/* Ficha Clampfather (/portfolio/clampfather/ y /en/portfolio/clampfather/).
   Solo lo que ficha-proyecto.css no trae: todo con prefijo cf- y cargado
   únicamente por esas dos páginas. Cargar DESPUÉS de ficha-proyecto.css.
   Los colores llevan !important por el mismo motivo que en ficha-proyecto.css:
   las reglas genéricas de .entry-content del tema pisan a igual especificidad.
   Creado el 23-10-2026. Reversible: borrar este fichero y las dos fichas. */

/* ── Hero: antetítulo, lema y foto que sube sobre la banda ── */
.cf-eyebrow{margin:0!important;color:#9cc3ff!important;-webkit-text-fill-color:#9cc3ff;font-size:.8rem!important;font-weight:800;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}
.cf-tagline{margin:-6px 0 0!important;color:#e2e8f0!important;-webkit-text-fill-color:#e2e8f0;font-family:Georgia,"Times New Roman",Times,serif;font-size:clamp(1.15rem,2vw,1.45rem)!important;font-style:italic;line-height:1.35}
.cf-chip--status::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.25)}
body.robotuno-static-migration .cf-hero .ru-hero-estandar__content{padding-bottom:104px}
/* La foto principal es un fotograma panorámico de la demo (1660x720) */
.cf-hero-media{position:relative;z-index:2;max-width:960px;margin-top:-84px!important}

/* ── Ficha rápida (fila de datos clave) ── */
.cf-facts{display:grid;gap:0;margin:34px 0 0;padding:6px 0;border:1px solid rgba(16,35,63,.08);border-radius:22px;background:#fff;box-shadow:0 14px 36px rgba(16,35,63,.05)}
.cf-facts__item{box-sizing:border-box;padding:14px 22px;border-top:1px solid rgba(16,35,63,.07)}
.cf-facts__item:first-child{border-top:0}
.cf-facts dt{margin:0;color:#5b6b81!important;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cf-facts dd{margin:5px 0 0;color:#0f2343!important;font-size:.95rem;font-weight:700;line-height:1.45}
body.ru-ficha-proyecto .cf-facts dd a{color:#0d58bb!important;text-decoration:underline;text-decoration-color:rgba(13,88,187,.35);text-underline-offset:3px}
body.ru-ficha-proyecto .cf-facts dd a:hover,body.ru-ficha-proyecto .cf-facts dd a:focus{text-decoration-color:#0d58bb}

/* ── Dato destacado con fuente ── */
.cf-callout{box-sizing:border-box;display:grid;gap:6px;max-width:760px;margin:0 auto 22px;padding:22px 26px;border:1px solid rgba(13,88,187,.16);border-left:5px solid #0d58bb;border-radius:20px;background:#fff;box-shadow:0 14px 36px rgba(16,35,63,.05)}
.cf-callout__value{color:#0d58bb!important;font-size:clamp(2rem,4vw,2.6rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.cf-callout__label{margin:0!important;color:#0f2343!important;font-size:1rem;font-weight:700;line-height:1.5}
.cf-callout__source{margin:4px 0 0!important;color:#5b6b81!important;font-size:.78rem;line-height:1.5}
body.ru-ficha-proyecto .cf-callout__source a{color:#0d58bb!important}

/* ── Rejillas de tarjetas de 3 y 4 columnas (sobre .ru-ficha-cards) ── */
@media (min-width:980px){
  .ru-ficha-cards.cf-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ru-ficha-cards.cf-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.cf-card__index{display:block;margin-bottom:10px;color:#0d58bb!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;font-weight:700;letter-spacing:.06em}

/* ── Vídeo: fachada de YouTube con miniatura propia ──
   La fachada (.ru-yt-facade) y su JS ya existen (overrides.css + consent.js);
   aquí solo se ensancha y se le pone el fotograma detrás del botón de play.
   Ancho 920px = el que overrides.css impone (con !important) a todo iframe de
   YouTube; así fachada e iframe miden lo mismo. Al iframe solo se le quita el
   margen de 24px de esa regla, para que al pulsar no se mueva nada. */
/* Dos vídeos (caso de uso + demo): uno debajo de otro en móvil, en paralelo
   desde 900px. Cada <figure> lleva su fachada y su pie. */
.cf-videos{display:grid;gap:26px 22px;max-width:920px;margin:0 auto}
@media (min-width:900px){.cf-videos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
.cf-video{margin:0}
.cf-video__caption{margin:12px 0 0!important;color:#0f2343!important;font-size:.95rem;line-height:1.45;text-align:center}
.cf-video__caption b{color:#0d58bb!important;font-weight:800}
body.robotuno-static-migration .cf-video .ru-yt-facade{max-width:none;margin:0;border-radius:22px;box-shadow:0 24px 60px rgba(16,35,63,.18)!important}
body.robotuno-static-migration .entry-content .cf-video .ru-yt-frame{width:100%!important;margin:0!important;border-radius:22px}
.cf-video__thumb{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.cf-video .ru-yt-facade::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,23,42,.15) 0%,rgba(15,23,42,.55) 100%)}
.cf-video .ru-yt-facade__play,.cf-video .ru-yt-facade__label,.cf-video .ru-yt-facade__note{position:relative;z-index:2}
.cf-video .ru-yt-facade__note{position:absolute}
/* La regla global .entry-content :where(span) pone el texto en gris; sobre el
   fotograma tiene que ser blanco para leerse. */
.cf-video .ru-yt-facade__label,.cf-video .ru-yt-facade__note{color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* Leyenda de colores del overlay */
.cf-legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:20px auto 0;padding:0;list-style:none}
.cf-legend li{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:7px 16px;border:1px solid rgba(16,35,63,.1);border-radius:999px;background:#fff;color:#12335f!important;font-size:.88rem;line-height:1.35}
.cf-legend b{font-weight:800}
.cf-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%}
.cf-dot--green{background:#16a34a}
.cf-dot--amber{background:#f59e0b}
.cf-dot--red{background:#dc2626;animation:cf-blink 1s steps(2,start) infinite}
.cf-dot--grey{background:#94a3b8}
.cf-dot--panel{border-radius:3px;background:#0f2343}
@keyframes cf-blink{to{visibility:hidden}}
.cf-note{max-width:720px;margin:14px auto 0!important;color:#5b6b81!important;font-size:.8rem;line-height:1.6;text-align:center}

/* ── Cómo funciona: 6 pasos (vertical en móvil, 3×2 en tableta, fila en escritorio) ── */
.cf-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.cf-steps__item{position:relative;box-sizing:border-box;padding:0 0 0 62px}
.cf-steps__num{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#0d58bb 0%,#1f7bf3 100%);color:#fff!important;font-weight:900;font-size:1.05rem;box-shadow:0 10px 24px rgba(13,88,187,.25)}
/* Hilo vertical entre números (móvil) */
.cf-steps__item:not(:last-child)::before{content:"";position:absolute;left:21px;top:50px;bottom:-12px;width:2px;background:rgba(13,88,187,.2)}
.cf-steps__item h3{margin:9px 0 6px!important;color:#0f2343!important;font-size:1.05rem!important;line-height:1.25!important}
.cf-steps__item p{margin:0;color:#54657d!important;font-size:.9rem;line-height:1.65}
@media (min-width:720px){
  .cf-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 18px}
  .cf-steps__item{padding:0}
  .cf-steps__num{position:relative}
  .cf-steps__item:not(:last-child)::before{display:none}
  .cf-steps__item h3{margin-top:14px!important}
}
@media (min-width:1080px){
  .cf-steps{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  /* Hilo horizontal entre números (escritorio) */
  .cf-steps__item:not(:last-child)::before{display:block;left:52px;right:-8px;top:21px;bottom:auto;width:auto;height:2px}
}

/* ── Hardware: galería con pie de foto ── */
.cf-gallery{display:grid;gap:16px;max-width:960px;margin:30px auto 0;padding:0;list-style:none}
.cf-gallery figure{margin:0;border:1px solid rgba(16,35,63,.08);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 14px 36px rgba(16,35,63,.06)}
.cf-gallery img{display:block;width:100%;height:auto}
/* Las dos fotos que van en pareja, a 4:3 recortando lo que sobre: así quedan a
   la misma altura aunque cada una venga con su proporción. */
.cf-gallery li:not(.cf-gallery__wide) img{aspect-ratio:4/3;object-fit:cover}
.cf-gallery figcaption{padding:11px 16px;color:#5b6b81!important;font-size:.84rem;line-height:1.5;text-align:center}
@media (min-width:720px){
  .cf-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-gallery__wide{grid-column:1/-1}
}

/* ── Listas con check (Por qué en local, Privacidad) ── */
.cf-panel{box-sizing:border-box;max-width:960px;margin:30px auto 0;padding:26px;border:1px solid rgba(13,88,187,.14);border-radius:24px;background:#eef5ff}
.cf-panel h3{margin:0 0 16px!important;color:#0f2343!important;font-size:1.12rem!important;line-height:1.25!important;text-align:center}
.cf-checks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cf-checks li{position:relative;box-sizing:border-box;padding:14px 18px 14px 50px;border:1px solid rgba(16,35,63,.08);border-radius:16px;background:#fff;color:#12335f!important;font-size:.94rem;line-height:1.55}
.cf-checks li::before{content:"\2713";position:absolute;left:16px;top:13px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#e5f5ec;color:#177245;font-size:.8rem;font-weight:900}
@media (min-width:720px){.cf-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.cf-panel .cf-checks{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── Microcopy con guiño ── */
.cf-wink{margin:18px auto 0!important;color:#5b6b81!important;font-family:Georgia,"Times New Roman",Times,serif;font-size:.98rem;font-style:italic;text-align:center}

/* ── Roadmap: puntos huecos y línea discontinua (no es lo que ya existe) ── */
.cf-roadmap{max-width:720px;margin:0 auto;padding:0;list-style:none}
.cf-roadmap li{position:relative;padding:0 0 18px 38px;color:#12335f!important;font-size:.98rem;font-weight:600;line-height:1.55}
.cf-roadmap li::before{content:"";position:absolute;left:4px;top:5px;box-sizing:border-box;width:16px;height:16px;border:2.5px solid #a05a00;border-radius:50%;background:#fff}
.cf-roadmap li:not(:last-child)::after{content:"";position:absolute;left:11px;top:25px;bottom:2px;border-left:2px dashed rgba(160,90,0,.35)}

/* ── FAQ ── */
.cf-faq{display:grid;gap:12px;max-width:820px;margin:0 auto}
.cf-faq__item{border:1px solid #d7e2ee;border-radius:14px;background:#fff;overflow:hidden;transition:box-shadow .2s ease}
.cf-faq__item[open]{box-shadow:0 6px 20px rgba(17,45,82,.1)}
.cf-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;color:#17304a!important;font-size:1rem;font-weight:700;line-height:1.4;list-style:none;cursor:pointer}
.cf-faq__item summary::-webkit-details-marker{display:none}
.cf-faq__item summary:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
.cf-faq__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#eef5ff;color:#0d58bb;font-size:1.2rem;line-height:1;transition:transform .2s ease}
.cf-faq__item[open] .cf-faq__icon{transform:rotate(45deg);background:#2563eb;color:#fff}
.cf-faq__answer{padding:0 22px 18px}
.cf-faq__answer p{margin:0;color:#54657d!important;font-size:.95rem;line-height:1.7}

/* ── Mercado: foto ilustrativa + 4 cifras con fuente ── */
.cf-market{display:grid;gap:22px;align-items:center}
.cf-market .ru-ficha-media{margin:0;max-width:none}
.ru-ficha-stats.cf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:0}
.cf-kpis .ru-ficha-stat{padding:18px 16px}
.cf-kpis .ru-ficha-stat__value{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.cf-sources{max-width:900px;margin:16px auto 0!important;color:#5b6b81!important;font-size:.78rem;line-height:1.6;text-align:center}
body.ru-ficha-proyecto .cf-sources a{color:#0d58bb!important}
@media (min-width:900px){.cf-market{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* ── Calculadora (sin <form>: así ru-track no la confunde con un formulario de contacto) ── */
.cf-calc{box-sizing:border-box;max-width:980px;margin:0 auto;padding:24px;border:1px solid rgba(16,35,63,.09);border-radius:26px;background:#fff;box-shadow:0 24px 60px rgba(16,35,63,.08)}
.cf-calc__grid{display:grid;gap:18px;margin-top:16px}
.cf-calc__panel{box-sizing:border-box;min-width:0;margin:0;padding:20px;border:1px solid rgba(13,88,187,.14);border-radius:20px;background:#f8fbff}
.cf-calc__panel legend{padding:0 8px;color:#0f2343!important;font-size:1.02rem;font-weight:800}
.cf-field{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center;margin:0 0 12px}
.cf-field span{color:#12335f!important;font-size:.92rem;line-height:1.4}
.cf-field input{box-sizing:border-box;width:100%;min-height:44px;padding:8px 12px;border:1.5px solid rgba(13,88,187,.3);border-radius:12px;background:#fff;color:#0f2343;font:inherit;font-size:1rem;font-weight:700;text-align:right}
.cf-field input:focus{outline:3px solid rgba(37,99,235,.35);outline-offset:1px;border-color:#2563eb}
.cf-calc__days .cf-field{max-width:460px;margin:0 auto}
.cf-calc__results{display:grid;gap:10px;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(13,88,187,.25)}
.cf-calc__results p{margin:0!important;color:#54657d!important;font-size:.9rem;line-height:1.45}
/* Selector reforzado: la regla del tema para <strong> en .entry-content (con !important) pisaba el azul */
body.ru-ficha-proyecto .cf-calc .cf-calc__value{display:block;color:#0d58bb!important;-webkit-text-fill-color:#0d58bb;font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
@media (min-width:860px){.cf-calc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Pasos: variante de 4 (2 columnas en tableta, 4 en escritorio) ── */
@media (min-width:720px){.cf-steps.cf-steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.cf-steps.cf-steps--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}

/* ── Fila de CTA centrada y línea de servicios de RobotUNO ── */
.cf-cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.cf-built{max-width:760px;margin:22px auto 0!important;color:#5b6b81!important;font-size:.9rem;line-height:1.6;text-align:center}
body.ru-ficha-proyecto .cf-built a{color:#0d58bb!important}

/* ── Formulario de solicitud de precio ──
   Va a web3forms como el resto de formularios del sitio; ru-track.js lo reconoce
   por el action y le añade sesión, recorrido y gclid. Estilos propios (cf-) porque
   los de .ru-contact-form viven inline en cada página. */
.cf-lead{box-sizing:border-box;display:grid;gap:26px;margin-top:64px;padding:30px;border:1px solid rgba(13,88,187,.14);border-radius:30px;background:linear-gradient(180deg,#eef5ff 0%,#f8fbff 100%);scroll-margin-top:110px}
.cf-lead__intro h2{margin:0!important;color:#0f2343!important;font-size:clamp(1.5rem,2.8vw,2.1rem)!important;line-height:1.15!important;letter-spacing:-.03em}
.cf-lead__intro>p{margin:12px 0 0!important;color:#54657d!important;font-size:.98rem;line-height:1.7}
.cf-lead__intro .cf-checks{grid-template-columns:1fr;margin-top:18px}
.cf-lead__intro .cf-wink{text-align:left;margin-top:20px!important}
.cf-form{box-sizing:border-box;padding:24px;border:1px solid rgba(16,35,63,.09);border-radius:24px;background:#fff;box-shadow:0 24px 60px rgba(16,35,63,.1)}
.cf-form__pair{display:grid;gap:14px}
.cf-form__field{display:grid;gap:6px;margin:0 0 14px}
.cf-form__field label,.cf-form__group legend{color:#0f2343!important;font-size:.9rem;font-weight:700;line-height:1.35}
.cf-form__field input,.cf-form__field textarea{box-sizing:border-box;width:100%;min-height:46px;padding:10px 14px;border:1.5px solid rgba(16,35,63,.18);border-radius:12px;background:#fff;color:#0f2343;font:inherit;font-size:1rem}
.cf-form__field textarea{min-height:110px;resize:vertical}
.cf-form__field input:focus,.cf-form__field textarea:focus{outline:3px solid rgba(37,99,235,.3);outline-offset:1px;border-color:#2563eb}
.cf-form__group{min-width:0;margin:0 0 14px;padding:0;border:0}
.cf-form__group legend{margin-bottom:8px;padding:0}
.cf-form__options{display:flex;flex-wrap:wrap;gap:8px}
.cf-form__option{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border:1.5px solid rgba(13,88,187,.22);border-radius:999px;background:#f8fbff;color:#12335f!important;font-size:.88rem;cursor:pointer}
.cf-form__option input{margin:0;accent-color:#0d58bb}
.cf-form__option:has(input:checked){border-color:#0d58bb;background:#eef5ff;font-weight:700}
.cf-form__option:has(input:focus-visible){outline:3px solid rgba(37,99,235,.35);outline-offset:1px}
.cf-form__check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;color:#54657d!important;font-size:.88rem;line-height:1.5}
.cf-form__check input{margin-top:3px;accent-color:#0d58bb}
body.ru-ficha-proyecto .cf-form__check a{color:#0d58bb!important}
.cf-form__hint{margin:-4px 0 14px!important;color:#5b6b81!important;font-size:.8rem;line-height:1.5}
.cf-form__honeypot{display:none}
body.robotuno-static-migration .cf-form .cf-form__submit{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:0 28px;border:0!important;border-radius:999px;background:linear-gradient(135deg,#0d58bb 0%,#1f7bf3 100%)!important;color:#fff!important;font:inherit;font-size:1.02rem;font-weight:800;cursor:pointer;box-shadow:0 16px 34px rgba(13,88,187,.24)!important}
body.robotuno-static-migration .cf-form .cf-form__submit:hover,body.robotuno-static-migration .cf-form .cf-form__submit:focus{background:linear-gradient(135deg,#0b4ea6 0%,#1a6fdc 100%)!important;color:#fff!important;box-shadow:0 20px 42px rgba(13,88,187,.3)!important}
body.robotuno-static-migration .cf-form .cf-form__submit:focus-visible{outline:3px solid #2563eb!important;outline-offset:3px}
.cf-form__note{margin:10px 0 0!important;color:#5b6b81!important;font-size:.8rem;text-align:center}
@media (min-width:640px){.cf-form__pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Letra pequeña. El tema fija 16.5px con ".entry-content p" (0,1,1), que gana a
   una clase sola; con .ru-ficha-shell delante (0,2,0) vuelven a su tamaño. */
.ru-ficha-shell .cf-note,.ru-ficha-shell .cf-form__hint,.ru-ficha-shell .cf-form__note{font-size:.8rem}
.ru-ficha-shell .cf-sources{font-size:.78rem}
.ru-ficha-shell .cf-built{font-size:.9rem}
@media (min-width:980px){.cf-lead{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;padding:40px}}

@media (max-width:639px){
  body.robotuno-static-migration .cf-hero .ru-hero-estandar__content{padding-bottom:84px}
  .cf-lead{padding:20px 14px}
  .cf-form{padding:18px 14px}
  .cf-calc{padding:16px}
  .cf-calc__panel{padding:16px 14px}
  .cf-field{grid-template-columns:minmax(0,1fr) 96px}
  .cf-cta-row .ru-ficha-btn{width:100%}
  .cf-hero-media{margin-top:-74px!important}
  .cf-callout{padding:20px}
  .cf-panel{padding:20px 16px}
  .cf-legend li{font-size:.84rem}
}
@media (min-width:720px) and (max-width:1079px){
  .cf-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-facts__item:nth-child(2){border-top:0}
  .cf-facts__item:last-child{grid-column:1/-1}
}
@media (min-width:1080px){
  .cf-facts{grid-template-columns:1fr 1.25fr 1.35fr .9fr 1.25fr;padding:4px 0}
  .cf-facts__item{border-top:0;border-left:1px solid rgba(16,35,63,.07)}
  .cf-facts__item:first-child{border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .cf-dot--red{animation:none}
  .cf-faq__item,.cf-faq__icon{transition:none}
}