/* =========================================================
   CEUTA DIGITAL · CAPA LIQUID GLASS (tintado aqua)
   Se carga la ÚLTIMA. Para revertir: quitar el enqueue.
   ========================================================= */
:root{
  --liquid:cubic-bezier(.32,.72,0,1);
  --g-bg:linear-gradient(155deg, rgba(146,193,209,.16), rgba(146,193,209,.05) 42%, rgba(255,255,255,.028));
  --g-bg-hover:linear-gradient(155deg, rgba(146,193,209,.21), rgba(146,193,209,.07) 44%, rgba(255,255,255,.035));
  --g-brd:rgba(255,255,255,.16);
  --g-blur:blur(28px) saturate(175%);
  --g-shadow:0 10px 38px -8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(146,193,209,.12);
}

/* ---------- CAMPO DE LUZ (lo que el cristal refracta) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(1100px 700px at 15% -5%, rgba(146,193,209,.15), transparent 60%),
  radial-gradient(900px 600px at 92% 12%, rgba(94,147,166,.13), transparent 62%),
  radial-gradient(1000px 800px at 50% 108%, rgba(146,193,209,.09), transparent 60%)}
.cd-orb{position:fixed;border-radius:50%;filter:blur(100px);z-index:-2;pointer-events:none;will-change:transform}
.cd-orb.o1{width:600px;height:600px;left:-160px;top:-140px;background:radial-gradient(circle,rgba(146,193,209,.26),transparent 68%);animation:cdDrift1 28s var(--liquid) infinite alternate}
.cd-orb.o2{width:520px;height:520px;right:-130px;top:22%;background:radial-gradient(circle,rgba(94,147,166,.24),transparent 68%);animation:cdDrift2 34s var(--liquid) infinite alternate}
/* ⚠️ SIN scale() en los fotogramas clave. Un `filter:blur(100px)` se rasteriza una vez
   y la tarjeta gráfica puede limitarse a moverlo… pero si además se ESCALA, hay que
   volver a calcular el desenfoque en cada paso de la animación. Sobre dos elementos de
   600px, en bucle infinito, eso calienta el teléfono de verdad. Solo se desplaza. */
@keyframes cdDrift1{to{transform:translate(120px,90px)}}
@keyframes cdDrift2{to{transform:translate(-110px,140px)}}

/* ---------- PIEZA DE CRISTAL (mixin aplicado a los componentes reales) ---------- */
.cd2 .pcell, .cd2 .ac, .cd2 .svrow, .cd2 .fitem, .cd2 .prc,
.cd-princ .prc, .bcard, .cd2 .final2 .wrap{
  position:relative;background:var(--g-bg);
  backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
  border:1px solid var(--g-brd);box-shadow:var(--g-shadow);
  overflow:hidden;isolation:isolate;
  transition:background 1s var(--liquid), border-color 1s var(--liquid), box-shadow 1s var(--liquid), transform .95s var(--liquid)}
.cd2 .pcell, .cd2 .ac, .cd2 .fitem, .cd2 .prc, .cd-princ .prc, .bcard{border-radius:26px}
.cd2 .svrow{border-radius:20px}
.cd2 .final2 .wrap{border-radius:36px;padding-top:70px;padding-bottom:70px;max-width:1000px}

/* brillo interior fijo */
.cd2 .pcell::before, .cd2 .ac::before, .cd2 .fitem::before, .cd2 .prc::before,
.cd-princ .prc::before, .bcard::before, .cd2 .final2 .wrap::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 36%,transparent 58%)}

/* barrido LÍQUIDO: solo al ENTRAR el ratón, lento; en reposo invisible (sin parpadeo al salir) */
.cd2 .pcell::after, .cd2 .ac::after, .cd2 .svrow::after, .cd2 .fitem::after,
.cd2 .prc::after, .cd-princ .prc::after, .bcard::after{
  content:"";position:absolute;top:-80%;left:-50%;width:80%;height:260%;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 25%,rgba(182,220,232,.14) 50%,rgba(255,255,255,.05) 75%,transparent);
  filter:blur(14px);opacity:0;transform:rotate(14deg) translateX(-180%)}
.cd2 .pcell:hover::after, .cd2 .ac:hover::after, .cd2 .svrow:hover::after, .cd2 .fitem:hover::after,
.cd2 .prc:hover::after, .cd-princ .prc:hover::after, .bcard:hover::after{
  animation:cdSweep 2.1s var(--liquid) forwards}
@keyframes cdSweep{
  0%{transform:rotate(14deg) translateX(-180%) scaleY(1);opacity:0}
  18%{opacity:1}
  55%{transform:rotate(14deg) translateX(120%) scaleY(1.06);opacity:1}
  82%{opacity:.7}
  100%{transform:rotate(14deg) translateX(430%) scaleY(1);opacity:0}}
.cd2 .pcell:hover, .cd2 .ac:hover, .cd2 .svrow:hover, .cd2 .fitem:hover, .cd2 .prc:hover,
.cd-princ .prc:hover, .bcard:hover{background:var(--g-bg-hover);border-color:rgba(182,220,232,.3)}
.cd2 .ac:hover, .bcard:hover{transform:translateY(-7px)}
.cd2 .svrow:hover{transform:translateX(8px)}

/* el contenido por encima del brillo */
.cd2 .ac .bd, .cd2 .ac .im, .cd2 .pcell>*, .cd2 .prc>*, .cd-princ .prc>*,
.bcard .bd, .bcard .thumb, .cd2 .fitem>*, .cd2 .final2 .wrap>*{position:relative;z-index:4}
.cd2 .ac .im{border-radius:20px;margin:12px 12px 0;overflow:hidden}
.bcard .thumb{border-radius:18px;margin:11px 11px 0;overflow:hidden}

/* ---------- HEADER: logo arriba + píldora + degradado de contraste ---------- */
header#hd, header#hd.scrolled{padding:30px 24px 46px!important;border-bottom:0!important;backdrop-filter:none!important;
  background:linear-gradient(180deg, rgba(7,9,10,.92) 0%, rgba(7,9,10,.74) 40%, rgba(7,9,10,.32) 72%, rgba(7,9,10,0) 100%)!important;
  pointer-events:none}
header#hd .hin, header#hd .brand, header#hd .menu, header#hd .mburger{pointer-events:auto}
header#hd.hd-hide{transform:none!important}
header#hd .hin{gap:15px}
header#hd .brand img, header#hd.scrolled .brand img{height:46px!important;filter:drop-shadow(0 4px 18px rgba(0,0,0,.55))}
header#hd .menu{
  display:flex;align-items:center;gap:4px;padding:11px 13px;border-radius:100px;
  background:linear-gradient(150deg,rgba(146,193,209,.18),rgba(255,255,255,.05));
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 40px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3)}
/* Tipografía de IDENTIDAD (Sora = var(--disp)) también en el menú, no la de texto corrido */
header#hd .menu a{padding:9px 15px;border-radius:100px;font:600 14.5px var(--disp);letter-spacing:-.015em;transition:all .4s var(--liquid)}
header#hd .menu a::after{display:none}
header#hd .menu a:hover{background:rgba(255,255,255,.08);color:#fff}
header#hd .menu li.current-menu-item a{color:#06282F;background:linear-gradient(150deg,#B7DCE8,#92C1D1);font-weight:600;
  box-shadow:0 4px 14px -4px rgba(146,193,209,.7), inset 0 1px 0 rgba(255,255,255,.5)}
header#hd .menu li:last-child a{border:0;margin-left:6px;color:#06282F;
  background:linear-gradient(150deg,#fff,#dceef4);font-weight:600;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8)}
header#hd .menu li:last-child a:hover{color:#06282F}

/* ---------- BOTONES en píldora ---------- */
.cd2 .btn, .cdlight .btn, .post-cta .btn{border-radius:100px;transition:transform .5s var(--liquid),box-shadow .5s var(--liquid),background .5s var(--liquid)}
.cd2 .btn:not(.ghost){background:linear-gradient(150deg,#ffffff,#d9ecf3);color:#06282F;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(94,147,166,.25)}
.cd2 .btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(146,193,209,.55), inset 0 1px 0 rgba(255,255,255,.9)}
.cd2 .btn.ghost{background:linear-gradient(150deg,rgba(146,193,209,.18),rgba(255,255,255,.04));
  backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.26)}
.cd2 .btn.ghost:hover{background:linear-gradient(150deg,rgba(146,193,209,.3),rgba(255,255,255,.07))}

/* ---------- MÉTODO: la línea, no bloques ---------- */
.cd2 .stepswrap{padding-top:40px;margin-top:44px}
.cd2 .steptrack{background:rgba(255,255,255,.13)}
.cd2 .stepfill{background:linear-gradient(90deg,#5E93A6,#92C1D1,#B7DCE8);box-shadow:0 0 12px rgba(146,193,209,.7);transition:width 1.8s var(--liquid)}
.cd2 .steps2{gap:30px}
.cd2 .st{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0 16px 0 0;position:relative}
.cd2 .st::after{display:none}
.cd2 .st::before{content:"";position:absolute;top:-44px;left:0;width:9px;height:9px;border-radius:50%;
  background:#92C1D1;box-shadow:0 0 16px rgba(146,193,209,.9);transform:scale(0);transition:transform .7s var(--liquid)}
.cd2 .stepswrap.lit .st::before, .cd2 .stepswrap:hover .st::before{transform:scale(1)}
.cd2 .st:nth-child(2)::before{transition-delay:.22s}
.cd2 .st:nth-child(3)::before{transition-delay:.44s}
.cd2 .st:nth-child(4)::before{transition-delay:.66s}

/* ---------- BANDA CLARA: vidrio esmerilado claro ---------- */
.cd2 .light{background:transparent!important}
.cd2 .light .wrap{padding:62px 56px;border-radius:34px;max-width:1140px;
  background:linear-gradient(150deg,rgba(237,245,248,.94),rgba(214,234,241,.88));
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 26px 70px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95)}
.cd2 .light .phimg{border-radius:22px;box-shadow:0 24px 54px -20px rgba(10,30,40,.55);border:1px solid rgba(255,255,255,.7)}

/* ---------- PÁGINAS DE CATEGORÍA (variante clara) ----------
   NO se envuelve .lbody .wrap en un panel: la imagen (.cfig) sube -76px para
   solapar la franja oscura, y un panel la dejaba descuadrada con hueco negro. */
.cdlight .itm, .cdlight .sst, .cdlight .lfaq .fitem{
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:18px;
  box-shadow:0 6px 18px -8px rgba(10,30,40,.18);
  transition:transform .9s var(--liquid), box-shadow .9s var(--liquid)}
/* con fondo de tarjeta, el texto necesita su propio aire */
.cdlight .itm{padding:24px 22px}
.cdlight .sst{padding:24px 22px}
.cdlight .sgrid{gap:18px;padding-top:34px}
.cdlight .itm:hover, .cdlight .sst:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(10,30,40,.28)}
.cdlight .cfig img{border-radius:22px;box-shadow:0 30px 64px -24px rgba(10,30,40,.5)}
.cdlight .btn{border-radius:100px}
/* FAQ del servicio: separación de la línea y texto ajustado */
.cdlight .lfaq{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.cdlight .lfaq .fitem{border-top:0!important;border-bottom:0!important}
.cdlight .lfaq .fq{padding:20px 56px 20px 24px;line-height:1.35}
.cdlight .lfaq .fa>div{padding:0!important}
.cdlight .lfaq .fa p{padding:0 24px 22px!important}

/* ---------- BLOG ---------- */
/* el contenedor tenía fondo opaco y tapaba el campo de luz */
.cd2, .blogwrap, .blogwrap.cd2, .post-single{background:transparent!important}
/* la miniatura es un <span>: sin display:block no recorta ni respeta márgenes */
.bcard .thumb{display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;margin:11px 11px 0}
.bcard a.cov{display:block}
.bcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.blogfilter .chip{border-radius:100px;background:linear-gradient(150deg,rgba(146,193,209,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(16px);transition:all .5s var(--liquid)}
.blogfilter .chip.on{background:linear-gradient(150deg,#B7DCE8,#92C1D1);color:#06282F;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.blogsearch{border-radius:100px;background:linear-gradient(150deg,rgba(146,193,209,.12),rgba(255,255,255,.03));
  backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.16)}
.post-cta .box{border-radius:28px;background:linear-gradient(155deg,rgba(146,193,209,.16),rgba(255,255,255,.03));
  backdrop-filter:var(--g-blur);border:1px solid var(--g-brd);box-shadow:var(--g-shadow)}
.post-cover img{border-radius:24px}

/* ---------- MÁS AIRE entre el menú y el contenido ---------- */
.cd2 > section:first-child, .cd2 .blogwrap{padding-top:236px!important}
.cdlight .chero{padding-top:230px!important}
.blogwrap{padding-top:236px!important}
.post-head{padding-top:220px!important}
.cd2 .hero{padding-top:250px!important}
@media(max-width:860px){
  .cd2 > section:first-child, .cd2 .blogwrap, .blogwrap{padding-top:170px!important}
  .cdlight .chero{padding-top:168px!important}
  .post-head{padding-top:160px!important}
  .cd2 .hero{padding-top:180px!important}
}

/* ---------- CIFRAS: que quepan en la tarjeta ---------- */
.cd2 .pcell{padding:36px 26px}
.cd2 .pcell .n{font-size:clamp(1.7rem,3.3vw,3rem);letter-spacing:-.035em;margin-bottom:14px}
.cd2 .pcell .l{max-width:30ch;margin-left:auto;margin-right:auto}

/* ---------- FAQ ----------
   OJO: se pliega con grid-template-rows:0fr. El padding NO puede ir en .fa>div
   (aunque la altura sea 0, el padding seguiría ocupando y asomaría la respuesta). */
.cd2 .faq2{gap:10px}
.cd2 .fitem{border-top:0!important;border-bottom:0!important}
.cd2 .fitem .fq{padding:24px 62px 24px 28px;line-height:1.35}
.cd2 .fitem .fa>div{padding:0!important}
.cd2 .fitem .fa p{padding:0 28px 26px!important;max-width:none}

/* ---------- CTA FINAL: fondo decorativo propio (El Estrecho: dos orillas + canal de luz) ---------- */
.cd2 .final2 .bg, .cdlight .ccta .bg{
  background-image:url('fondo-decorativo.webp')!important;background-size:cover!important;background-position:center!important;
  opacity:.34!important}
.cd2 .final2 .veil, .cdlight .ccta .veil{opacity:.9}

/* ---------- FOOTER tradicional (NO cristal) ---------- */
footer{position:relative;z-index:2;margin-top:40px;
  border-top:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(7,9,10,.35));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- IMÁGENES: reset que faltaba ----------
   No existía la regla base `img{max-width:100%;height:auto}`. Sin ella, cualquier
   imagen que WordPress imprima con atributo height="640" mantiene ese alto fijo
   mientras el ancho escala → se estira. Era el caso de la portada de las entradas
   en móvil (ratio 1.60 renderizado a 0.53). Se excluyen las que sí controlan su
   tamaño a propósito (logo del header y las que usan object-fit:cover). */
img{max-width:100%}
.post-cover img, .entry-content img, .post-single img{height:auto;object-fit:contain}
.post-cover img{aspect-ratio:16/10;object-fit:cover}

/* ---------- PIE: 5 columnas (marca + 2 áreas + agencia + contacto) ----------
   Va aquí y no en app.css porque app.css se regenera desde home-v1.html. */
.fgrid{grid-template-columns:1.5fr 1fr 1fr .8fr 1fr}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcol h5 a{text-decoration:none}
.fcol h5 a:hover{color:var(--aqua-hi)}

/* ---------- MÓVIL ---------- */
@media(max-width:860px){
  header#hd, header#hd.scrolled{padding:16px 18px 0!important}
  header#hd .brand img, header#hd.scrolled .brand img{height:40px!important}
  /* ⚠️ `#hd{will-change:transform}` (app2.css) convierte al header en BLOQUE CONTENEDOR
     de sus hijos `position:fixed`: la bandeja se pegaba al fondo del header en vez de
     al de la pantalla, y el velo solo cubría la franja del header.
     Se desactiva SIEMPRE en móvil, no solo al abrir: si se quita y se pone al abrir y
     cerrar, en mitad de la animación de cierre el header vuelve a ser bloque contenedor
     y la bandeja da un salto visible a la altura del botón. */
  header#hd{will-change:auto}

  /* Las esferas de fondo dejan de animarse en móvil y se desenfocan menos.
     Dos elementos de 600px con blur de 100px en bucle infinito es de las cosas
     que más batería consumen en un teléfono, y aquí no aportan nada: son fondo. */
  .cd-orb{animation:none!important;filter:blur(64px)}
  .cd-orb.o1{width:420px;height:420px}
  .cd-orb.o2{width:360px;height:360px}

  /* ===== MENÚ MÓVIL — HOJA INFERIOR (opción B) =====
     Sube desde abajo, de modo que todos los enlaces caen en la zona cómoda del pulgar.
     Mantiene el cristal tal cual: mismo desenfoque, mismo tinte aqua, mismo brillo interior.
     Se oculta con `transform` (no con display) para que la entrada pueda animarse.
     OJO con la especificidad: `header#hd .menu` de más arriba lleva #id, así que para
     ganarle hace falta `header#hd.nav-open .menu` (0,1,2,1) > (0,1,1,1). */
  header#hd .menu{
    display:flex;flex-direction:column;gap:4px;
    position:fixed;left:10px;right:10px;bottom:10px;top:auto;width:auto;
    border-radius:28px;padding:16px 14px 22px;
    transform:translateY(115%);visibility:hidden;pointer-events:none;
    transition:transform .52s var(--liquid),visibility 0s linear .52s;
    max-height:80vh;overflow-y:auto;overscroll-behavior:contain}
  header#hd.nav-open .menu{transform:none;visibility:visible;pointer-events:auto;
    transition:transform .52s var(--liquid),visibility 0s}
  /* Sin asa y sin numeración: el asa insinuaba que la bandeja se puede arrastrar
     (no se puede) y los números no aportaban nada al usuario. */
  header#hd .menu li{width:100%}
  header#hd .menu a{width:100%;display:flex;align-items:center;
    font:600 19px/1 var(--disp);letter-spacing:-.02em;padding:17px 20px;border-radius:14px}
  header#hd .menu li:last-child a{justify-content:center;margin-top:10px}

  /* El banner de cookies también vive fijo abajo (z-index 9998) y tapaba media
     bandeja. Mientras el menú está abierto se aparta; vuelve al cerrarlo. */
  .cd-nav-abierto #cdck-banner{opacity:0;pointer-events:none;transform:translateY(24px);
    transition:opacity .3s var(--liquid),transform .3s var(--liquid)}

  /* velo detrás de la bandeja. Va en el header (fijo) y no en el menú:
     si fuera pseudo-elemento del menú se desplazaría con su transform. */
  header#hd::after{content:"";position:fixed;inset:0;background:rgba(4,6,7,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .4s var(--liquid);z-index:-1}
  header#hd.nav-open::after{opacity:1;pointer-events:auto}
  .cd2 .light .wrap, .cdlight .lbody .wrap{padding:36px 24px}
  .cd2 .final2 .wrap{padding-top:48px;padding-bottom:48px;border-radius:28px}
}
@media(prefers-reduced-motion:reduce){
  .cd-orb{animation:none}
  .cd2 .pcell:hover::after, .cd2 .ac:hover::after, .cd2 .svrow:hover::after,
  .cd2 .fitem:hover::after, .cd-princ .prc:hover::after, .bcard:hover::after{animation:none}
}