/*
Theme Name: Paulo Breogán
Theme URI: https://paulobreogan.com
Author: Paulo Breogán
Author URI: https://paulobreogan.com
Description: Tema a medida del rediseño 2026 de paulobreogan.com. Fuentes, estilos y scripts propios, sin recursos externos ni cookies. Textos e imágenes editables con ACF.
Version: 1.2.2
Requires at least: 6.4
Requires PHP: 8.0
License: Propietario
Text Domain: paulobreogan
*/

/* Fuentes autoalojadas (sin peticiones a Google): Figtree e Instrument Serif, licencia SIL OFL 1.1 */
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/figtree-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/nunito-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Nunito';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/nunito-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   PAULOBREOGAN.COM — Rediseño 2026 (multipágina)
   Paleta validada WCAG 2.2 AA con scripts/contraste.py:
     #F5F2EC / #0B0B0C  17.61:1  AAA
     #B3AFA7 / #0B0B0C   9.00:1  AAA
     #F08A1D / #0B0B0C   7.83:1  AAA
     #0B0B0C / #F08A1D   7.83:1  AAA (CTA)
     #F08A1D / #141416   7.32:1  AAA (acento sobre superficie)
   Variante verde (?acento=verde): #34D368 → 9.99:1 AAA
   ============================================================ */
:root{
  --negro:#0B0B0C;
  --superficie:#141416;
  --superficie-2:#1B1B1E;
  --borde:#2A2A2E;
  --texto:#F5F2EC;
  --texto-2:#B3AFA7;
  --acento:#F08A1D;
  --acento-suave:#FBBF77;
  --fx-head:"Figtree",system-ui,sans-serif;
  --fx-body:"Figtree",system-ui,sans-serif;
  --ancho:1160px;
  --radio:14px;
}
[data-acento="verde"]{
  --acento:#34D368;
  --acento-suave:#8FE7AE;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--negro);
  color:var(--texto);
  font-family:var(--fx-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--acento-suave)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--acento);outline-offset:3px;border-radius:4px;
}
.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:20px}
.salto{position:absolute;left:-9999px;top:0;background:var(--acento);color:var(--negro);padding:.6rem 1rem;z-index:99;font-weight:600;text-decoration:none}
.salto:focus{left:12px;top:12px}

/* ---------- Efectos ---------- */
@keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-etiqueta{animation:subir .6s ease backwards}
.hero h1,.hero-pagina h1{animation:subir .7s ease .08s backwards}
.hero-sub{animation:subir .7s ease .16s backwards}
.hero-ctas{animation:subir .7s ease .24s backwards}
.hero-confianza{animation:subir .7s ease .34s backwards}
.hero-figura{animation:subir .8s ease .2s backwards}
.miga{animation:subir .6s ease backwards}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease var(--d,0ms),transform .55s ease var(--d,0ms)}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--fx-head);font-weight:600;font-size:1rem;
  padding:.9rem 1.7rem;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-primario{background:var(--acento);color:var(--negro)}
.btn-primario:hover{background:var(--acento-suave);box-shadow:0 6px 26px color-mix(in srgb,var(--acento) 35%,transparent);transform:translateY(-1px)}
.btn-fantasma{background:transparent;color:var(--texto);border-color:var(--borde)}
.btn-fantasma:hover{border-color:var(--acento);color:var(--acento-suave)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Cabecera (transparente arriba, sólida al hacer scroll) ---------- */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.cabecera.con-scroll{
  background:rgba(11,11,12,.85);backdrop-filter:blur(12px);
  border-bottom-color:var(--borde);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.logo{display:flex;flex-direction:column;gap:.22rem;color:var(--texto);text-decoration:none;white-space:nowrap;line-height:1;font-family:"Nunito",var(--fx-head),sans-serif}
.logo-nombre{font-weight:800;font-size:1.6rem;letter-spacing:.11em}
.logo-nombre b{font-weight:800;color:var(--texto)}
.logo-lema{font-weight:400;font-size:.72rem;letter-spacing:.06em;color:var(--texto-2)}
.logo-lema em{font-style:normal;color:var(--acento)}
.nav-principal{display:none;align-items:center}
.nav-principal > a, .nav-trigger{
  color:var(--texto-2);text-decoration:none;font-size:.95rem;padding:.4rem .75rem;border-radius:8px;display:inline-block;
}
.nav-principal > a:hover, .nav-trigger:hover{color:var(--texto)}
.nav-principal a[aria-current="page"]{color:var(--texto);font-weight:600}
.nav-item{position:relative}

/* Mega menú «Servicios» (estilo referencia: clic/hover, panel con velo) */
.nav-trigger{
  font:inherit;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;
}
.nav-trigger svg{width:10px;height:6px;color:var(--acento);transition:transform .2s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + .55rem);left:0;z-index:60;
  width:min(660px,calc(100vw - 40px));
  background:#0E0E0F;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;
  box-shadow:0 24px 48px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-panel.abierto{opacity:1;visibility:visible;transform:none}
.np-cab{padding:4px 8px 14px}
.np-hi{font-size:.85rem;color:var(--texto-2)}
.np-titulo{font-family:var(--fx-head);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;margin-top:.15rem;color:var(--texto)}
.np-titulo .cursiva{color:var(--acento);font-size:1.05em}
.np-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.np-item{
  display:flex;gap:.8rem;align-items:flex-start;padding:.7rem;border-radius:10px;
  text-decoration:none;color:var(--texto);transition:background .15s ease;
}
.np-item:hover,.np-item:focus-visible{background:rgba(255,255,255,.06)}
.np-item[aria-current="page"]{background:color-mix(in srgb,var(--acento) 10%,transparent)}
.np-icono{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);display:grid;place-items:center;flex:none;color:var(--texto)}
.np-icono svg{width:20px;height:20px}
.np-item strong{display:block;font-family:var(--fx-head);font-weight:700;font-size:.95rem;line-height:1.25}
.np-desc{display:block;font-size:.8rem;color:var(--texto-2);margin-top:.15rem}
.np-pie{
  margin-top:10px;padding:12px 8px 2px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.85rem;color:var(--texto-2);
}
.np-pie a{font-family:var(--fx-head);font-weight:600;text-decoration:none;font-size:.9rem}
.nav-velo{
  position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s;
}
.nav-velo.abierto{opacity:1;visibility:visible;pointer-events:auto}
.cabecera .btn{padding:.6rem 1.15rem;font-size:.9rem}
.btn-menu{display:inline-flex;background:none;border:1px solid var(--borde);border-radius:10px;color:var(--texto);padding:.5rem .6rem;cursor:pointer}
@media (min-width:900px){
  .nav-principal{display:flex;gap:.15rem}
  .btn-menu{display:none}
}
.nav-movil{border-top:1px solid var(--borde);padding-block:.75rem;background:rgba(11,11,12,.96);backdrop-filter:blur(12px)}
.nav-movil a{display:block;padding:.65rem 20px;color:var(--texto-2);text-decoration:none;font-size:1.05rem}
.nav-movil a:hover{color:var(--texto)}
.nav-movil a[aria-current="page"]{color:var(--texto);font-weight:600}
.nav-movil .nav-sub{padding-left:2.4rem;font-size:.97rem}
@media (min-width:900px){.nav-movil{display:none!important}}

/* ---------- Hero portada ---------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:auto -20% -55% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--acento) 16%,transparent) 0%,transparent 65%);
  pointer-events:none;
}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.2fr .8fr;gap:4rem}}
.hero-etiqueta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:500;color:var(--acento-suave);
  border:1px solid var(--borde);border-radius:999px;padding:.35rem .9rem;margin-bottom:1.4rem;
}
.hero-etiqueta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento)}
.hero h1{
  font-family:var(--fx-head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.2rem,5.5vw,3.7rem);line-height:1.08;
}
.hero h1 em{font-style:normal;color:var(--acento)}
.hero-sub{color:var(--texto-2);font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:34em;margin-top:1.25rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-confianza{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.5rem;color:var(--texto-2);font-size:.9rem}
.hero-confianza span{display:inline-flex;align-items:center;gap:.45rem}
.hero-confianza svg{width:16px;height:16px;color:var(--acento)}
.hero-figura{position:relative}
.hero-figura img{
  aspect-ratio:4/5;width:100%;height:auto;max-width:420px;margin-inline:auto;object-fit:cover;
  border-radius:var(--radio);border:1px solid var(--borde);
}

/* ---------- Hero de página interior ---------- */
.hero-pagina{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);position:relative;overflow:hidden}
.hero-pagina::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:50%;aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--acento) 12%,transparent) 0%,transparent 65%);
  pointer-events:none;
}
.hero-pagina h1{font-family:var(--fx-head);font-weight:700;letter-spacing:-.03em;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;max-width:18em}
.hero-pagina .hero-sub{margin-top:1rem}
.miga{font-size:.85rem;color:var(--texto-2);margin-bottom:1.2rem}
.miga a{color:var(--texto-2);text-decoration:none}
.miga a:hover{color:var(--texto)}
.miga span{color:var(--acento)}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(3.5rem,8vw,6.5rem)}
.seccion-alt{background:var(--superficie)}
.seccion-cab{max-width:640px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.kicker{
  font-family:var(--fx-head);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento);display:block;margin-bottom:.8rem;
}
h2{font-family:var(--fx-head);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15}
.seccion-cab p{color:var(--texto-2);margin-top:1rem;font-size:1.05rem}

/* ---------- Fotos ---------- */
.foto{width:100%;height:auto;border-radius:var(--radio);border:1px solid var(--borde);object-fit:cover}
.figura{margin:0}
.figura figcaption{color:var(--texto-2);font-size:.82rem;margin-top:.6rem}
.collage{position:relative;padding-bottom:3.5rem}
.collage img:first-child{width:82%;border-radius:var(--radio);border:1px solid var(--borde)}
.collage img:last-child{
  position:absolute;right:0;bottom:0;width:55%;
  border-radius:var(--radio);border:1px solid var(--borde);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* ---------- Tarjetas ---------- */
.tarjetas{display:grid;gap:1.1rem}
@media (min-width:640px){.tarjetas{grid-template-columns:1fr 1fr}}
.tarjeta{
  background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;
  transition:border-color .2s ease,transform .2s ease;
}
.seccion-alt .tarjeta{background:var(--superficie-2)}
.tarjeta:hover{border-color:var(--acento);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.tarjeta-icono{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acento) 14%,transparent);color:var(--acento);
}
.tarjeta-icono svg{width:24px;height:24px}
.tarjeta h3{font-family:var(--fx-head);font-size:1.2rem;font-weight:600}
.tarjeta p{color:var(--texto-2);font-size:.97rem;flex-grow:1}
.tarjeta a{font-weight:600;font-size:.93rem;text-decoration:none}
.tarjeta a:hover{text-decoration:underline}

/* ---------- Proceso ---------- */
.pasos{display:grid;gap:1.1rem;counter-reset:paso}
@media (min-width:900px){.pasos{grid-template-columns:repeat(4,1fr)}}
.pasos-3{display:grid;gap:1.1rem;counter-reset:paso}
@media (min-width:900px){.pasos-3{grid-template-columns:repeat(3,1fr)}}
.paso{border-left:2px solid var(--borde);padding:.2rem 0 .2rem 1.25rem;counter-increment:paso}
.paso-num{font-family:var(--fx-head);font-weight:700;font-size:2rem;color:var(--acento)}
.paso-num::before{content:"0" counter(paso)}
.paso h3{font-family:var(--fx-head);font-size:1.1rem;margin:.5rem 0 .4rem}
.paso p{color:var(--texto-2);font-size:.95rem}

/* ---------- Dos columnas ---------- */
.dos-col{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.dos-col{grid-template-columns:1fr 1fr;gap:4rem}}
.lista-check{list-style:none;display:grid;gap:1.1rem;margin-top:1.5rem}
.lista-check li{display:flex;gap:.85rem;align-items:flex-start}
.lista-check svg{width:22px;height:22px;color:var(--acento);flex:none;margin-top:.15rem}
.lista-check b{display:block;font-family:var(--fx-head);font-weight:600}
.lista-check span{color:var(--texto-2);font-size:.95rem}

/* ---------- Trabajos (rejilla simple, páginas de servicio) ---------- */
.trabajos{display:grid;gap:1.1rem}
@media (min-width:640px){.trabajos{grid-template-columns:1fr 1fr}}
.trabajo{border-radius:var(--radio);overflow:hidden;border:1px solid var(--borde);background:var(--superficie-2);text-decoration:none;display:block;transition:border-color .2s ease}
.trabajo:hover{border-color:var(--acento)}
.trabajo img{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;object-position:top;border-bottom:1px solid var(--borde);transition:transform .6s ease}
.trabajo:hover img{transform:scale(1.04)}

/* ---------- Trabajos destacados (portada, filas editoriales) ---------- */
.trabajos-lista{display:grid;gap:clamp(2.5rem,6vw,4.5rem)}
.trabajo-item{display:grid;gap:1.4rem;align-items:center}
@media (min-width:900px){
  .trabajo-item{grid-template-columns:7fr 5fr;gap:3.5rem}
  .trabajo-item:nth-child(even) .trabajo-media{order:2}
}
.trabajo-media{display:block;overflow:hidden;border-radius:var(--radio);border:1px solid var(--borde);transition:border-color .25s ease}
.trabajo-media img{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;object-position:top;transition:transform .6s ease}
.trabajo-item:hover .trabajo-media{border-color:var(--acento)}
.trabajo-item:hover .trabajo-media img{transform:scale(1.045)}
.trabajo-num{font-family:var(--fx-head);font-weight:700;font-size:.9rem;letter-spacing:.14em;color:var(--acento)}
.trabajo-texto h3{font-family:var(--fx-head);font-weight:700;font-size:clamp(1.45rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:.35rem 0 .7rem}
.trabajo-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding:0;list-style:none}
.trabajo-tags li{font-size:.78rem;font-weight:500;color:var(--texto-2);border:1px solid var(--borde);border-radius:999px;padding:.28rem .75rem}
.trabajo-desc{color:var(--texto-2);font-size:.98rem;max-width:44ch}
.trabajo-enlace{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-family:var(--fx-head);font-weight:600;font-size:.95rem;text-decoration:none}
.trabajo-enlace span{transition:transform .2s ease}
.trabajo-enlace:hover span{transform:translate(3px,-3px)}
.trabajo-info{padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.trabajo-info b{font-family:var(--fx-head);font-weight:600;color:var(--texto)}
.trabajo-info span{color:var(--texto-2);font-size:.85rem}

/* ---------- Testimonios ---------- */
.testimonios{display:grid;gap:1.1rem}
@media (min-width:900px){.testimonios{grid-template-columns:1fr 1fr}}
.testimonio{
  background:var(--superficie-2);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem;
}
.testimonio blockquote{color:var(--texto-2);font-size:.98rem}
.testimonio footer{display:flex;align-items:center;gap:.8rem}
.avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--borde);flex:none}
.testimonio b{font-family:var(--fx-head);font-weight:600;display:block}
.testimonio span{color:var(--texto-2);font-size:.85rem}
.estrellas{color:var(--acento);letter-spacing:2px;font-size:.9rem}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--fx-head);font-weight:600;font-size:1.05rem;padding:1.2rem 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--acento);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--texto-2);padding-bottom:1.2rem;max-width:60ch}

/* ---------- Banda CTA ---------- */
.banda-cta{
  background:linear-gradient(135deg,var(--superficie-2) 0%,var(--superficie) 100%);
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  text-align:center;padding-block:clamp(3rem,7vw,5rem);
}
.banda-cta h2{max-width:20em;margin-inline:auto}
.banda-cta p{color:var(--texto-2);margin-top:1rem;max-width:38em;margin-inline:auto}
.banda-cta .hero-ctas{justify-content:center}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;gap:2.5rem}
@media (min-width:900px){.contacto-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.contacto-canales{display:grid;gap:1rem;margin-top:1.8rem}
.canal{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;
  background:var(--superficie-2);border:1px solid var(--borde);border-radius:var(--radio);
  text-decoration:none;color:var(--texto);transition:border-color .2s ease;
}
.canal:hover{border-color:var(--acento)}
.canal svg{width:22px;height:22px;color:var(--acento);flex:none}
.canal b{font-family:var(--fx-head);font-weight:600;display:block}
.canal span{color:var(--texto-2);font-size:.88rem}
.formulario{display:grid;gap:1rem}
.campo label{display:block;font-weight:500;font-size:.92rem;margin-bottom:.4rem}
.campo input,.campo textarea{
  width:100%;background:var(--superficie-2);border:1px solid var(--borde);border-radius:10px;
  color:var(--texto);font-family:var(--fx-body);font-size:1rem;padding:.85rem 1rem;
}
.campo input::placeholder,.campo textarea::placeholder{color:#8B8880}
.campo input:hover,.campo textarea:hover{border-color:#3d3d42}
.nota-form{color:var(--texto-2);font-size:.8rem}
.nota-form a{color:var(--acento-suave)}

/* ---------- Prosa (quién soy) ---------- */
.prosa{max-width:640px;color:var(--texto-2)}
.prosa p{margin-bottom:1.1rem}
.prosa b, .prosa strong{color:var(--texto)}

/* ---------- Footer ---------- */
.pie{border-top:1px solid var(--borde);padding-block:2.2rem;background:var(--superficie)}
.pie-fila{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;color:var(--texto-2);font-size:.88rem}
.pie a{color:var(--texto-2);text-decoration:none}
.pie a:hover{color:var(--texto)}
.pie-legal{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ============================================================
   Ampliación estilo editorial (referencia palo-seco adaptada)
   ============================================================ */

/* Cursiva serif de acento en titulares */
.cursiva{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}

/* Nav segmentada en píldoras rellenas (solo escritorio, estilo referencia) */
@media (min-width:900px){
  .nav-principal{gap:.5rem}
  .nav-principal > a, .nav-trigger{
    color:var(--texto);
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);border-radius:12px;
    padding:.55rem 1.15rem;
    backdrop-filter:blur(8px);
    transition:background .2s ease,border-color .2s ease;
  }
  .nav-principal > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"]{background:rgba(255,255,255,.13)}
  .nav-principal a[aria-current="page"]{border-color:var(--acento)}
}

/* Hero lienzo: vídeo de fondo, titular abajo */
.hero-lienzo{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--superficie)}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.75);z-index:0;
}
.hero-lienzo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,12,.62) 0%,rgba(11,11,12,.38) 38%,rgba(11,11,12,.94) 78%,var(--negro) 100%),
             linear-gradient(90deg,rgba(11,11,12,.55) 0%,transparent 60%);
}
.hero-lienzo .contenedor{position:relative;z-index:2;width:100%;padding-block:clamp(6rem,14vh,9rem) clamp(2.8rem,6vh,4rem)}
.hero-lienzo h1{
  font-family:var(--fx-head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;max-width:15em;
}
.hero-lienzo h1 .cursiva{color:var(--acento);font-size:1.04em}
.hero-lienzo .hero-sub{max-width:38em}

/* Servicios en filas numeradas */
.servicios-filas{border-top:1px solid var(--borde)}
.servicio-fila{display:grid;gap:1.1rem;padding-block:2.2rem;border-bottom:1px solid var(--borde)}
@media (min-width:900px){.servicio-fila{grid-template-columns:5fr 7fr;gap:3.5rem;padding-block:3rem}}
.servicio-num{font-family:var(--fx-head);font-weight:700;font-size:.9rem;letter-spacing:.14em;color:var(--acento);display:block;margin-bottom:.5rem}
.servicio-fila h3{font-family:var(--fx-head);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12}
.servicio-fila h3 a{color:inherit;text-decoration:none}
.servicio-fila h3 a:hover{color:var(--acento-suave)}
.servicio-ver{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-family:var(--fx-head);font-weight:600;font-size:.92rem;text-decoration:none}
.servicio-cuerpo p{color:var(--texto-2)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;padding:0}
.chips li{
  font-size:.8rem;font-weight:500;color:var(--texto-2);
  border:1px solid var(--borde);border-radius:999px;padding:.3rem .8rem;
  background:color-mix(in srgb,#ffffff 3%,transparent);
}

/* Tarjeta "por dónde empezar" */
.fila-cta{
  margin-top:2.5rem;background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio);
  padding:clamp(1.8rem,4vw,2.8rem);display:grid;gap:1.2rem;
}
@media (min-width:900px){.fila-cta{grid-template-columns:1fr auto;align-items:center;gap:3rem}}
.fila-cta h3{font-family:var(--fx-head);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.fila-cta p{color:var(--texto-2);margin-top:.5rem;max-width:48ch}

/* Motivos numerados */
.motivos{display:grid;gap:1.1rem}
@media (min-width:900px){.motivos{grid-template-columns:repeat(3,1fr);gap:2rem}}
.motivo{border-top:2px solid var(--borde);padding-top:1.4rem}
.motivo .kicker{margin-bottom:.6rem}
.motivo h3{font-family:var(--fx-head);font-weight:700;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:.7rem}
.motivo h3 b{color:var(--acento);font-weight:700}
.motivo p{color:var(--texto-2);font-size:.97rem}

/* Mini franja de trabajos */
.trabajos-mini{display:grid;gap:1.1rem}
@media (min-width:640px){.trabajos-mini{grid-template-columns:repeat(3,1fr)}}
.trabajos-mini .trabajo img{aspect-ratio:16/11}

/* Resumen de reseñas */
.resumen-resenas{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;margin-bottom:2rem}
.resumen-resenas .estrellas{font-size:1.4rem;letter-spacing:4px}
.resumen-resenas span:last-child{color:var(--texto-2);font-size:.95rem}

/* Señales / cómo elegir */
.senales{display:grid;gap:1.1rem}
@media (min-width:900px){.senales{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.senal{background:var(--superficie-2);border:1px solid var(--borde);border-radius:var(--radio);padding:1.8rem 1.6rem}
.senal .servicio-num{margin-bottom:.8rem}
.senal h3{font-family:var(--fx-head);font-weight:700;font-size:1.25rem;margin-bottom:.7rem;letter-spacing:-.01em}
.senal p{color:var(--texto-2);font-size:.95rem}

/* Segmentos de público */
.segmentos{border-top:1px solid var(--borde)}
.segmento{border-bottom:1px solid var(--borde);padding-block:clamp(2.2rem,5vw,3.5rem);display:grid;gap:1rem}
@media (min-width:900px){.segmento{grid-template-columns:110px 1fr auto;align-items:center;gap:2.5rem}}
.segmento .indice{font-family:var(--fx-head);font-weight:600;color:var(--texto-2);font-size:.95rem;letter-spacing:.1em}
.segmento .kicker{margin-bottom:.5rem}
.segmento h3{font-family:var(--fx-head);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;max-width:22em}
.segmento h3 .cursiva{color:var(--acento);font-size:1.05em}
.segmento p{color:var(--texto-2);margin-top:.6rem;max-width:52ch}

/* ============================================================
   Halos de color (referencia: glowsec) — rompen el negro continuo
   ============================================================ */
[data-halo]{position:relative;overflow:hidden}
[data-halo] > .contenedor{position:relative;z-index:2}
.seccion-halo{background:var(--negro)}
.seccion-halo::before,.seccion-halo::after{
  content:"";position:absolute;left:0;right:0;height:clamp(90px,14vh,180px);z-index:1;pointer-events:none;
}
.seccion-halo::before{top:0;background:linear-gradient(180deg,var(--negro) 0%,transparent 100%)}
.seccion-halo::after{bottom:0;background:linear-gradient(0deg,var(--negro) 0%,transparent 100%)}
.halo{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  -webkit-mask-image:radial-gradient(125% 118% at 50% 45%,#000 48%,transparent 90%);
          mask-image:radial-gradient(125% 118% at 50% 45%,#000 48%,transparent 90%);
}
.halo-escena{position:absolute;inset:0;filter:blur(60px);will-change:transform}
.halo--izq .halo-escena{transform:translateX(-16%)}
.halo--der .halo-escena{transform:translateX(16%)}
.halo--arriba .halo-escena{transform:translateY(-16%)}
.halo-mancha,.halo-puntero{position:absolute;display:block;width:min(560px,90vw);aspect-ratio:1.2;mix-blend-mode:screen}
.halo-mancha:nth-child(1){left:-8%;top:-12%;background:radial-gradient(circle,color-mix(in srgb,var(--acento) 60%,transparent) 0,transparent 50%)}
.halo-mancha:nth-child(2){right:-8%;top:18%;background:radial-gradient(circle,color-mix(in srgb,var(--acento-suave) 45%,transparent) 0,transparent 50%)}
.halo-mancha:nth-child(3){left:28%;bottom:-24%;background:radial-gradient(circle,color-mix(in srgb,var(--acento) 50%,#7A2E00 20%) 0,transparent 50%)}
.halo-puntero{
  left:0;top:0;width:min(680px,100vw);opacity:.4;
  background:radial-gradient(circle,color-mix(in srgb,var(--acento-suave) 70%,transparent) 0,transparent 50%);
  transform:translate(calc(var(--px,50%) - 50%),calc(var(--py,50%) - 50%));
  transition:transform .35s ease-out;
}
.pie{position:relative;overflow:hidden}
.pie > .contenedor{position:relative;z-index:1}
.pie::before{
  content:"";position:absolute;inset:auto 0 -30%;height:70%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--acento) 45%,transparent),transparent 70%);
  filter:blur(20px);
}

/* ---------- Línea de tiempo (Quién soy) ---------- */
.dos-col--arriba{align-items:start}
@media (min-width:900px){.figura-fija{position:sticky;top:6rem}}
.hitos{list-style:none;padding:0;margin:1.4rem 0 0}
.hito{display:grid;grid-template-columns:3.2rem 1rem 1fr;gap:0 .9rem;align-items:start;padding-bottom:1.6rem}
.hito:last-child{padding-bottom:0}
.hito-ano{font-family:var(--fx-head);font-weight:700;font-size:.9rem;letter-spacing:.06em;color:var(--acento);padding-top:.2rem}
.hito-punto{position:relative;display:block;height:100%;min-height:1.6rem}
.hito-punto::before{content:"";position:absolute;left:50%;top:.45rem;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--acento)}
.hito-punto::after{content:"";position:absolute;left:50%;top:1.15rem;bottom:-1.6rem;width:1px;margin-left:-.5px;background:var(--borde)}
.hito:last-child .hito-punto::after{display:none}
.hito h3{font-family:var(--fx-head);font-weight:700;font-size:1.08rem;color:var(--texto);margin-bottom:.35rem}
.hito p{color:var(--texto-2);margin:0}

/* ---------- Etiqueta «Nuevo» y servicio IA ---------- */
.etiqueta-nuevo{
  display:inline-block;font-family:var(--fx-head);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--negro);background:var(--acento);border-radius:999px;padding:.18rem .5rem;margin-left:.4rem;vertical-align:middle;position:relative;top:-.15em;
}
.servicio-fila h3 .etiqueta-nuevo{font-size:.6rem;top:-.4em}
.nav-movil .etiqueta-nuevo{font-size:.58rem}
.np-item--ancho{grid-column:1 / -1}

/* ---------- Cabecera: ajustes por tamaño para que quepa el logo grande ---------- */
@media (min-width:900px) and (max-width:1080px){
  .logo-nombre{font-size:1.25rem}
  .logo-lema{font-size:.58rem}
  .nav-principal{gap:.3rem}
  .nav-principal > a, .nav-trigger{font-size:.88rem;padding:.45rem .8rem}
  .cabecera .btn{padding:.55rem .9rem;font-size:.85rem}
}
@media (max-width:600px){
  .logo-nombre{font-size:1.4rem}
  .logo-lema{font-size:.64rem}
  .cabecera > .cabecera-fila > .btn-primario{display:none}
}
.nav-movil a.nav-movil-cta{display:inline-flex;padding:.7rem 1.4rem;margin:.6rem 20px .4rem;color:var(--negro);font-size:1rem}

/* ---------- Mega menú en anchos medios: centrado en pantalla para no desbordar ---------- */
html{overflow-x:clip}
@media (min-width:900px) and (max-width:1180px){
  .nav-panel{
    position:fixed;left:50%;top:76px;
    transform:translate(-50%,-6px);
  }
  .nav-panel.abierto{transform:translate(-50%,0)}
}

/* ============================================================
   Rupturas de ritmo: secciones claras, banda naranja y marquesina
   (feedback: «es muy negro todo»)
   ============================================================ */
.seccion-clara{
  --negro:#F5F2EC;--superficie:#FFFFFF;--superficie-2:#FFFFFF;--borde:#DDD8CE;
  --texto:#0B0B0C;--texto-2:#4A4741;--acento:#A75701;--acento-suave:#8C4900;
  background:#F5F2EC;color:var(--texto);
}
.seccion-clara .btn-primario{background:#F08A1D;color:#0B0B0C}
.seccion-clara .btn-primario:hover{background:#FBBF77}
.seccion-clara .btn-fantasma{color:var(--texto);border-color:#0B0B0C}
.seccion-clara .btn-fantasma:hover{border-color:#A75701;color:#A75701}
.seccion-clara .chips li{background:rgba(11,11,12,.04);border-color:var(--borde);color:var(--texto-2)}
.seccion-clara .tarjeta,.seccion-clara .senal,.seccion-clara .testimonio{background:#FFFFFF;border-color:var(--borde)}
.seccion-clara .tarjeta:hover{box-shadow:0 14px 34px rgba(11,11,12,.12)}
.seccion-clara .tarjeta-icono{background:rgba(167,87,1,.12);color:#A75701}
.seccion-clara .segmento .indice{color:var(--texto-2)}

.fila-cta--naranja{background:#F08A1D;border-color:transparent;color:#0B0B0C}
.fila-cta--naranja h3{color:#0B0B0C}
.fila-cta--naranja p{color:#2A1D0C}
.btn-oscuro{background:#0B0B0C;color:#F5F2EC}
.btn-oscuro:hover{background:#1B1B1E;color:#FBBF77;transform:translateY(-1px)}

.marquesina{overflow:hidden;border-block:1px solid var(--borde);background:var(--negro);padding-block:1.1rem}
.marquesina-pista{display:flex;width:max-content;animation:desplazar 42s linear infinite}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
.marquesina span{
  display:inline-flex;align-items:center;white-space:nowrap;padding-right:2.6rem;
  font-family:var(--fx-head);font-weight:700;font-size:clamp(1.05rem,2vw,1.45rem);letter-spacing:.01em;color:var(--acento);
}
.marquesina span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);opacity:.45;margin-left:2.6rem}
@keyframes desplazar{to{transform:translateX(-50%)}}

/* ---------- Tipografía: sin palabras huérfanas ---------- */
h1,h2,h3,.np-titulo,summary{text-wrap:balance}
p,li,blockquote,figcaption,.np-desc{text-wrap:pretty}

/* Párrafos cortos con líneas equilibradas; banda final más ancha para frases enteras */
.banda-cta p,.seccion-cab p,.hero-sub,.fila-cta p,.np-desc{text-wrap:balance}
.banda-cta p{max-width:46em}

/* ---------- Panel «Contacto» con foto (estilo referencia) ---------- */
.nav-panel--contacto{width:340px;left:auto;right:0}
.nav-trigger.actual{border-color:var(--acento)}
.np-rol{font-size:.85rem;color:var(--texto-2);margin-top:.2rem}
.np-foto{margin:.7rem 0 .9rem;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--superficie)}
.np-foto img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.np-texto{font-size:.88rem;color:var(--texto-2);margin:0 8px .9rem;line-height:1.5}
.np-canales{display:grid;gap:.25rem;margin-bottom:.9rem}
.np-canal{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px;color:var(--texto);text-decoration:none;font-size:.92rem;font-weight:500}
.np-canal:hover{background:rgba(255,255,255,.06)}
.np-canal svg{width:18px;height:18px;color:var(--acento);flex:none}
.np-acciones{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.np-acciones .btn{padding:.65rem .8rem;font-size:.88rem}
@media (min-width:900px) and (max-width:1180px){.nav-panel--contacto{left:50%;right:auto}}

/* ============================================================
   Cabeceras de servicio con gráfico (HTML/CSS + capturas reales)
   ============================================================ */
.hero-pagina--grafico .hero-pagina-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.hero-pagina--grafico .hero-pagina-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem}}
.hero-pagina--grafico h1{max-width:14em}
.hero-grafico{position:relative;max-width:520px;margin-inline:auto;width:100%;animation:subir .8s ease .2s backwards}
@media (min-width:900px){.hero-grafico{margin-inline:0 auto;padding:1.2rem 0}}
.hero-grafico::before{content:"";position:absolute;inset:-12% -10%;background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--acento) 22%,transparent),transparent 62%);filter:blur(30px);pointer-events:none;z-index:0}
.hero-grafico > *{position:relative;z-index:1}

/* Navegador */
.mock-navegador{background:#141416;border:1px solid var(--borde);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.55);transform:rotate(-2.5deg)}
.mock-barra{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--borde);background:#1B1B1E}
.mock-barra i{width:9px;height:9px;border-radius:50%;background:#3A3A40;display:block}
.mock-url{margin-left:.6rem;flex:1;font-size:.74rem;color:var(--texto-2);background:#0E0E0F;border-radius:6px;padding:.28rem .7rem;font-family:var(--fx-body)}
.mock-navegador img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* Tarjeta flotante y chips */
.mock-flotante{
  position:absolute;z-index:2;background:#0E0E0F;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  padding:.7rem .9rem;box-shadow:0 18px 40px rgba(0,0,0,.5);display:flex;align-items:center;gap:.7rem;
  font-size:.82rem;color:var(--texto);max-width:78%;
}
.mock-flotante b{display:block;font-family:var(--fx-head);font-weight:700;font-size:.88rem;line-height:1.2}
.mock-flotante small{display:block;color:var(--texto-2);font-size:.76rem;margin-top:.1rem}
.mock-check{width:30px;height:30px;border-radius:50%;background:var(--acento);color:var(--negro);display:grid;place-items:center;flex:none}
.mock-check svg{width:16px;height:16px}
.mock-flotante--abajo{right:-4%;bottom:-8%}
.mock-flotante--arriba{left:-4%;top:-6%}
.mock-chips{position:absolute;left:4%;bottom:-6%;display:flex;gap:.4rem;flex-wrap:wrap;z-index:2}
.mock-chips span{font-size:.74rem;font-weight:600;background:#0E0E0F;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.3rem .7rem;color:var(--texto);box-shadow:0 10px 24px rgba(0,0,0,.45)}

/* Tarjeta genérica (SERP, estado, chat) */
.mock-tarjeta{background:#0E0E0F;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.55);overflow:hidden}
.mock-cabecera{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--borde);font-size:.8rem;color:var(--texto-2)}
.mock-cabecera b{font-family:var(--fx-head);color:var(--texto);font-size:.88rem}
.mock-pie{display:block;padding:.6rem 1rem;font-size:.72rem;color:var(--texto-2);border-top:1px solid var(--borde)}
.mock-online{display:inline-flex;align-items:center;gap:.4rem}
.mock-online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento)}

/* SERP */
.serp-busqueda{display:flex;align-items:center;gap:.6rem;margin:1rem 1rem .6rem;padding:.6rem .9rem;border:1px solid var(--borde);border-radius:999px;font-size:.9rem;color:var(--texto);background:#141416}
.serp-busqueda svg{width:16px;height:16px;color:var(--texto-2);flex:none}
.serp-resultado{padding:.7rem 1rem}
.serp-url{display:block;font-size:.74rem;color:var(--texto-2)}
.serp-titulo{display:block;font-family:var(--fx-head);font-weight:600;font-size:1rem;color:var(--acento-suave);margin:.15rem 0}
.serp-desc{display:block;font-size:.8rem;color:var(--texto-2);line-height:1.45}
.serp-skel{padding:.7rem 1rem;display:grid;gap:.45rem;opacity:.5}
.serp-skel i{display:block;height:8px;border-radius:4px;background:#2A2A2E}
.serp-skel i:nth-child(1){width:38%}.serp-skel i:nth-child(2){width:78%;height:11px}.serp-skel i:nth-child(3){width:92%}
.serp-pos{font-family:var(--fx-head);font-weight:700;color:var(--acento);font-size:.78rem;letter-spacing:.08em}

/* Estado (mantenimiento) */
.estado-lista{list-style:none;margin:0;padding:.4rem .6rem}
.estado-lista li{display:flex;align-items:center;gap:.8rem;padding:.7rem .5rem;border-bottom:1px solid var(--borde);font-size:.9rem}
.estado-lista li:last-child{border-bottom:0}
.estado-lista b{display:block;font-family:var(--fx-head);font-weight:600;font-size:.92rem}
.estado-lista small{display:block;color:var(--texto-2);font-size:.76rem}
.estado-lista .mock-check{width:26px;height:26px}
.estado-lista .mock-check svg{width:14px;height:14px}

/* Chat (IA) */
.chat{display:grid;gap:.6rem;padding:1rem}
.burbuja{max-width:82%;padding:.6rem .85rem;border-radius:14px;font-size:.86rem;line-height:1.45}
.burbuja--cliente{background:#1B1B1E;color:var(--texto);border-bottom-left-radius:4px;justify-self:start}
.burbuja--asistente{background:color-mix(in srgb,var(--acento) 22%,#141416);color:var(--texto);border-bottom-right-radius:4px;justify-self:end}
.burbuja time{display:block;font-size:.66rem;color:var(--texto-2);margin-top:.25rem;text-align:right}
.chat-escribiendo{display:inline-flex;gap:4px;padding:.55rem .8rem;background:#1B1B1E;border-radius:14px;justify-self:start}
.chat-escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--texto-2);animation:latir 1.2s infinite}
.chat-escribiendo i:nth-child(2){animation-delay:.2s}.chat-escribiendo i:nth-child(3){animation-delay:.4s}
@keyframes latir{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (max-width:899px){
  .mock-navegador{transform:none}
  .mock-flotante{position:static;margin-top:.8rem;max-width:none}
  .mock-chips{position:static;margin-top:.8rem}
}
.mock-chips--arriba{top:-5%;right:2%;left:auto;bottom:auto;justify-content:flex-end}
.testimonio .estrellas{color:var(--acento)}

/* ============================================================
   Blog (estilo referencia: tarjetas con imagen, categoría y extracto)
   ============================================================ */
.bcards{display:grid;gap:1.2rem}
@media (min-width:700px){.bcards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.bcards--3{grid-template-columns:repeat(3,1fr)}}
.bcard{display:flex;flex-direction:column;background:var(--superficie-2);border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;text-decoration:none;color:var(--texto);transition:border-color .2s ease,transform .2s ease}
.bcard:hover{border-color:var(--acento);transform:translateY(-3px)}
.bcard-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--superficie);border-bottom:1px solid var(--borde)}
.bcard-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.bcard:hover .bcard-thumb img{transform:scale(1.04)}
.bcard-cuerpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.bcard-cat{font-family:var(--fx-head);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acento)}
.bcard h3{font-family:var(--fx-head);font-weight:700;font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
.bcard p{color:var(--texto-2);font-size:.93rem;flex:1}
.bcard-meta{color:var(--texto-2);font-size:.78rem}
.bcard-leer{font-family:var(--fx-head);font-weight:600;font-size:.9rem;color:var(--acento-suave);margin-top:.2rem}
.bcard--texto .bcard-cuerpo{padding-top:1.4rem}

/* Artículo */
.articulo-cab{padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,3vw,2.5rem)}
.articulo-cab h1{font-family:var(--fx-head);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1;max-width:22em}
.articulo-cab .lead{color:var(--texto-2);font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:44em;margin-top:1rem;text-wrap:balance}
.meta-articulo{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-top:1.4rem;color:var(--texto-2);font-size:.88rem}
.meta-articulo img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 15%;border:1px solid var(--borde)}
.meta-articulo b{color:var(--texto);font-weight:600}
.articulo-portada{margin:0 auto;max-width:var(--ancho);padding-inline:20px}
.articulo-portada img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radio);border:1px solid var(--borde)}
.articulo{max-width:72ch;margin-inline:auto;padding:clamp(2.5rem,5vw,4rem) 20px;font-size:1.06rem;line-height:1.75;color:var(--texto-2)}
.articulo h2{font-size:clamp(1.45rem,2.6vw,1.9rem);color:var(--texto);margin:2.4rem 0 .9rem;text-wrap:balance}
.articulo h3{font-family:var(--fx-head);font-weight:700;font-size:1.15rem;color:var(--texto);margin:1.6rem 0 .5rem}
.articulo p{margin-bottom:1.1rem;text-wrap:pretty}
.articulo ul,.articulo ol{margin:0 0 1.2rem 1.3rem}
.articulo li{margin-bottom:.45rem}
.articulo li::marker{color:var(--acento)}
.articulo a{color:var(--acento-suave)}
.articulo strong{color:var(--texto)}
.caja{border:1px solid var(--borde);border-left:3px solid var(--acento);border-radius:12px;background:var(--superficie);padding:1.2rem 1.4rem;margin:1.6rem 0}
.caja .kicker{margin-bottom:.5rem}
.caja ul{margin-bottom:0}
.caja p:last-child{margin-bottom:0}
.autor{display:flex;gap:1.2rem;align-items:center;border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie-2);padding:1.3rem 1.4rem;margin-top:2.5rem}
.autor img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 15%;flex:none;border:2px solid var(--borde)}
.autor b{display:block;font-family:var(--fx-head);font-weight:700;color:var(--texto);font-size:1.05rem}
.autor p{margin:.3rem 0 0;font-size:.95rem}
.articulo .faq{max-width:none}

/* ---------- Fotos reales: vídeo propio, retrato, galería y fondo de escritorio ---------- */
.hero-video{object-position:center 68%}
.np-foto img{object-position:center 12%}
.autor img,.meta-articulo img{object-position:center 20%}
.intro-foto{margin-bottom:clamp(2rem,5vw,3.5rem)}
.intro-foto .seccion-cab{margin-bottom:0}
.intro-foto .foto{aspect-ratio:5/4;object-position:center 35%}
.galeria{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.galeria figure{flex:1 1 100%;max-width:100%}
@media (min-width:560px){.galeria figure{flex-basis:calc(50% - .5rem);max-width:calc(50% - .5rem)}}
@media (min-width:900px){.galeria figure{flex-basis:calc(33.333% - .67rem);max-width:calc(33.333% - .67rem)}}
.galeria img.enfoque-arriba{object-position:center 22%}
.galeria img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;border-radius:var(--radio);border:1px solid var(--borde)}
.galeria figcaption{color:var(--texto-2);font-size:.85rem;margin-top:.6rem}
.hero-pagina--foto{position:relative}
.hero-pagina--foto::before{display:none}
.hero-fondo{position:absolute;inset:0;z-index:0;background:var(--foto) center 42%/cover no-repeat;filter:saturate(.75) brightness(.6)}
.hero-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.5) 0%,rgba(11,11,12,.7) 55%,var(--negro) 100%),linear-gradient(90deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.2) 65%)}
.hero-pagina--foto .contenedor{position:relative;z-index:2}

.galeria .galeria-video{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;object-position:center 62%;border-radius:var(--radio);border:1px solid var(--borde);display:block;background:var(--superficie)}

/* ---------- Hero de portada: texto arriba en móvil, centrado en escritorio ---------- */
@media (max-width:899px){
  .hero-lienzo{align-items:flex-start;min-height:min(100svh,900px)}
  .hero-lienzo .contenedor{padding-block:1.5rem 3rem}
  .hero-lienzo::after{background:linear-gradient(180deg,rgba(11,11,12,.74) 0%,rgba(11,11,12,.62) 55%,var(--negro) 100%)}
  .hero-video{object-position:center center}
}
@media (min-width:900px){
  .hero-lienzo{align-items:center}
  .hero-lienzo .contenedor{padding-block:clamp(3.5rem,7vh,5.5rem) clamp(3rem,6vh,4rem)}
}
.hero.hero-lienzo{padding-block:0}

/* ---------- Páginas legales ---------- */
.legal{font-size:1rem}
.legal h2{font-size:1.25rem;margin-top:2.2rem}
.legal h3{font-size:1.05rem}
.legal p{margin-bottom:1rem}
.legal a{word-break:break-word}
.tabla-scroll{overflow-x:auto;margin:1.2rem 0}
.legal table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px}
.legal th,.legal td{border:1px solid var(--borde);padding:.6rem .7rem;text-align:left;vertical-align:top}
.legal th{background:var(--superficie-2);color:var(--texto);font-family:var(--fx-head)}

/* Trabajos realizados: rejilla de tarjetas por grupo (tiendas / servicios) */
.trabajos-rejilla{display:grid;gap:1.25rem}
@media (min-width:640px){.trabajos-rejilla{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.trabajos-rejilla{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.tcard{display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:var(--radio);background:var(--superficie);overflow:hidden}
.seccion-alt .tcard{background:var(--superficie-2)}
.tcard-media{display:block;overflow:hidden;border-bottom:1px solid var(--borde)}
.tcard-media img{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;object-position:top;display:block}
.tcard-texto{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.tcard-texto h3{font-family:var(--fx-head);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin:0 0 .65rem}
.tcard .trabajo-tags{margin-bottom:.85rem}
.tcard .trabajo-desc{font-size:.93rem;max-width:none}
.tcard .trabajo-enlace{margin-top:auto;padding-top:.95rem;font-size:.9rem}

/* Quién soy: mosaico «Café, código y bici»: retratos 3:4 en fila y la mesa completa a todo el ancho */
.mosaico{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.mosaico figure{position:relative;margin:0;overflow:hidden;border-radius:var(--radio);border:1px solid var(--borde);background:var(--superficie)}
.mosaico img,.mosaico video{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.mosaico-destacada img{object-position:center 40%}
.mosaico-ancha{grid-column:1/-1}
.mosaico .mosaico-ancha{background:var(--superficie-2)}
.mosaico-ancha img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.mosaico-ancha img{aspect-ratio:1224/641;object-position:center}
.mosaico-ancha figcaption{text-align:center;background:none;padding-bottom:.2rem;color:var(--texto-2)}
.mosaico figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .75rem;font-size:.8rem;line-height:1.35;color:#fff;background:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.78) 100%);text-wrap:balance}
@media (min-width:800px){
  .mosaico{grid-template-columns:repeat(4,1fr)}
  .mosaico-ancha{grid-column:1/-1}
}
.mosaico-cta{margin-top:1.6rem}

/* Párrafo de introducción bajo el título en bloques de dos columnas */
.dos-col-intro{margin:1rem 0 1.6rem;color:var(--texto-2)}

/* Banda de cifras bajo el hero de la portada */
.cifras{background:var(--negro);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.cifras-fila{display:grid;grid-template-columns:repeat(3,1fr)}
.cifra{padding:2.2rem 1rem;text-align:center;border-left:1px solid var(--borde)}
.cifra:first-child{border-left:0}
.cifra b{display:block;font-family:var(--fx-head);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1.1;color:var(--texto);font-variant-numeric:tabular-nums}
.cifra > span{display:block;margin-top:.45rem;color:var(--texto-2);font-size:.9rem;text-wrap:balance}
@media (max-width:640px){.cifras-fila{grid-template-columns:1fr}.cifra{border-left:0;border-top:1px solid var(--borde);padding:1.3rem 1rem}.cifra:first-child{border-top:0}}

/* Formulario de contacto: envío por correo + opción WhatsApp */
.campo-trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.campo-check{display:flex;gap:.65rem;align-items:flex-start;color:var(--texto-2);font-size:.88rem;cursor:pointer}
.campo-check input{margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--acento);flex:none}
.campo-check a{color:var(--acento-suave)}
.form-acciones{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.form-estado{margin:0;padding:.85rem 1rem;border-radius:12px;font-size:.92rem;border:1px solid var(--borde);background:var(--superficie-2)}
.form-estado.ok{border-color:rgba(52,211,104,.45);color:#9BE8B4}
.form-estado.error{border-color:rgba(240,138,29,.5);color:var(--acento-suave)}
.formulario[aria-busy="true"] .btn-primario{opacity:.6;pointer-events:none}

/* Política de cookies: maqueta propia de la página (namespace .pb-cookie-page) */
.pb-cookie-page,
  .pb-cookie-page * {
    box-sizing: border-box;
  }

  .pb-cookie-page {
    --pb-bg: #0b0b0c;
    --pb-surface: #141416;
    --pb-surface-soft: #1b1b1e;
    --pb-paper: #f5f2ec;
    --pb-muted: #b8b4ad;
    --pb-line: rgba(245, 242, 236, 0.14);
    --pb-orange: #f08a1d;
    --pb-orange-soft: rgba(240, 138, 29, 0.12);
    background:
      radial-gradient(circle at 88% 4%, rgba(240, 138, 29, 0.10), transparent 26rem),
      var(--pb-bg);
    color: var(--pb-paper);
    font-family: Figtree, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem clamp(5rem, 8vw, 8rem);
  }

  .pb-cookie-page ::selection {
    background: var(--pb-orange);
    color: var(--pb-bg);
  }

  .pb-cookie-page a {
    color: var(--pb-paper);
    text-decoration-color: var(--pb-orange);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.22em;
  }

  .pb-cookie-page a:hover {
    color: var(--pb-orange);
  }

  .pb-cookie-page a:focus-visible,
  .pb-cookie-page button:focus-visible {
    outline: 3px solid var(--pb-paper);
    outline-offset: 4px;
  }

  .pb-cookie-page__shell {
    margin: 0 auto;
    max-width: 1180px;
  }

  .pb-cookie-page__breadcrumb {
    color: var(--pb-muted);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    margin: 0 0 2.4rem;
    text-transform: uppercase;
  }

  .pb-cookie-page__breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .pb-cookie-page__breadcrumb span {
    color: var(--pb-orange);
    margin: 0 0.55rem;
  }

  .pb-cookie-page__hero {
    border-bottom: 1px solid var(--pb-line);
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.34fr);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  }

  .pb-cookie-page__eyebrow {
    align-items: center;
    color: var(--pb-orange);
    display: flex;
    font-size: 0.76rem;
    font-weight: 750;
    gap: 0.7rem;
    letter-spacing: 0.14em;
    margin: 0 0 1.2rem;
    text-transform: uppercase;
  }

  .pb-cookie-page__eyebrow::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 0.55rem;
    width: 0.55rem;
  }

  .pb-cookie-page h1 {
    color: var(--pb-paper);
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 720;
    letter-spacing: -0.065em;
    line-height: 0.92;
    margin: 0;
    max-width: 9ch;
    text-wrap: balance;
  }

  .pb-cookie-page__intro {
    align-self: end;
  }

  .pb-cookie-page__lead {
    color: var(--pb-paper);
    font-size: clamp(1.12rem, 1.65vw, 1.35rem);
    line-height: 1.5;
    margin: 0 0 1.6rem;
  }

  .pb-cookie-page__date {
    color: var(--pb-muted);
    font-size: 0.88rem;
    margin: 0;
  }

  .pb-cookie-page__layout {
    display: grid;
    gap: clamp(3rem, 7vw, 7rem);
    grid-template-columns: minmax(13rem, 0.26fr) minmax(0, 1fr);
    padding-top: clamp(3.5rem, 7vw, 6rem);
  }

  .pb-cookie-page__nav {
    align-self: start;
    position: sticky;
    top: 2rem;
  }

  .pb-cookie-page__nav-title {
    color: var(--pb-muted);
    font-size: 0.73rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    margin: 0 0 1rem;
    text-transform: uppercase;
  }

  .pb-cookie-page__nav ol {
    counter-reset: cookie-index;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pb-cookie-page__nav li {
    border-top: 1px solid var(--pb-line);
    counter-increment: cookie-index;
  }

  .pb-cookie-page__nav li:last-child {
    border-bottom: 1px solid var(--pb-line);
  }

  .pb-cookie-page__nav a {
    align-items: baseline;
    color: var(--pb-muted);
    display: grid;
    font-size: 0.88rem;
    gap: 0.7rem;
    grid-template-columns: 1.6rem 1fr;
    line-height: 1.35;
    padding: 0.78rem 0;
    text-decoration: none;
    transition: color 160ms ease, padding-left 160ms ease;
  }

  .pb-cookie-page__nav a::before {
    color: var(--pb-orange);
    content: counter(cookie-index, decimal-leading-zero);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.05em;
  }

  .pb-cookie-page__nav a:hover {
    color: var(--pb-paper);
    padding-left: 0.2rem;
  }

  .pb-cookie-page__content {
    min-width: 0;
  }

  .pb-cookie-page__section {
    border-top: 1px solid var(--pb-line);
    display: grid;
    gap: clamp(1.3rem, 3vw, 2.5rem);
    grid-template-columns: 3rem minmax(0, 1fr);
    padding: clamp(2.8rem, 5vw, 4.5rem) 0;
    scroll-margin-top: 2rem;
  }

  .pb-cookie-page__section:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .pb-cookie-page__number {
    color: var(--pb-orange);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    padding-top: 0.45rem;
  }

  .pb-cookie-page__body {
    max-width: 48rem;
    min-width: 0;
  }

  .pb-cookie-page h2 {
    color: var(--pb-paper);
    font-size: clamp(1.8rem, 3.5vw, 2.85rem);
    font-weight: 680;
    letter-spacing: -0.045em;
    line-height: 1.08;
    margin: 0 0 1.7rem;
    text-wrap: balance;
  }

  .pb-cookie-page h3 {
    color: var(--pb-paper);
    font-size: 1.18rem;
    font-weight: 680;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 2.5rem 0 0.8rem;
  }

  .pb-cookie-page p {
    color: var(--pb-muted);
    margin: 0 0 1.25rem;
  }

  .pb-cookie-page strong {
    color: var(--pb-paper);
    font-weight: 680;
  }

  .pb-cookie-page code {
    background: var(--pb-orange-soft);
    border: 1px solid rgba(240, 138, 29, 0.24);
    border-radius: 0.35rem;
    color: #ffad56;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82em;
    padding: 0.12em 0.35em;
    white-space: nowrap;
  }

  .pb-cookie-page__details {
    display: grid;
    gap: 0;
    margin: 1.6rem 0 0;
  }

  .pb-cookie-page__detail {
    border-top: 1px solid var(--pb-line);
    display: grid;
    gap: 1rem;
    grid-template-columns: 9rem minmax(0, 1fr);
    padding: 0.85rem 0;
  }

  .pb-cookie-page__detail:last-child {
    border-bottom: 1px solid var(--pb-line);
  }

  .pb-cookie-page__detail dt {
    color: var(--pb-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pb-cookie-page__detail dd {
    color: var(--pb-paper);
    margin: 0;
  }

  .pb-cookie-page__list {
    color: var(--pb-muted);
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
  }

  .pb-cookie-page__list li {
    margin: 0.55rem 0;
    padding-left: 1.35rem;
    position: relative;
  }

  .pb-cookie-page__list li::before {
    color: var(--pb-orange);
    content: "↗";
    left: 0;
    position: absolute;
    top: 0;
  }

  .pb-cookie-page__steps {
    counter-reset: cookie-steps;
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 1.4rem 0;
    padding: 0;
  }

  .pb-cookie-page__steps li {
    align-items: start;
    background: var(--pb-surface);
    border: 1px solid var(--pb-line);
    border-radius: 0.8rem;
    color: var(--pb-muted);
    counter-increment: cookie-steps;
    display: grid;
    gap: 0.9rem;
    grid-template-columns: 2.2rem 1fr;
    padding: 1rem 1.1rem;
  }

  .pb-cookie-page__steps li::before {
    align-items: center;
    background: var(--pb-orange);
    border-radius: 50%;
    color: var(--pb-bg);
    content: counter(cookie-steps);
    display: flex;
    font-size: 0.72rem;
    font-weight: 800;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
  }

  .pb-cookie-page__callout {
    background: var(--pb-orange-soft);
    border: 1px solid rgba(240, 138, 29, 0.28);
    border-radius: 1rem;
    margin: 1.8rem 0;
    padding: clamp(1.25rem, 3vw, 1.8rem);
  }

  .pb-cookie-page__callout p:last-child {
    margin-bottom: 0;
  }

  .pb-cookie-page__table-wrap {
    border: 1px solid var(--pb-line);
    border-radius: 1rem;
    margin: 1.25rem 0 2rem;
    overflow-x: auto;
  }

  .pb-cookie-page table {
    border-collapse: collapse;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    min-width: 760px;
    width: 100%;
  }

  .pb-cookie-page th,
  .pb-cookie-page td {
    border-bottom: 1px solid var(--pb-line);
    padding: 1rem;
    text-align: left;
    vertical-align: top;
  }

  .pb-cookie-page th {
    background: var(--pb-surface-soft);
    color: var(--pb-paper);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pb-cookie-page td {
    color: var(--pb-muted);
  }

  .pb-cookie-page tbody tr:last-child td {
    border-bottom: 0;
  }

  .pb-cookie-page__button {
    appearance: none;
    background: var(--pb-orange);
    border: 1px solid var(--pb-orange);
    border-radius: 999px;
    color: var(--pb-bg);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 750;
    justify-content: center;
    line-height: 1;
    margin: 0.6rem 0 1.5rem;
    padding: 1rem 1.35rem;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  }

  .pb-cookie-page__button:hover {
    background: var(--pb-paper);
    border-color: var(--pb-paper);
    color: var(--pb-bg);
    transform: translateY(-2px);
  }

  .pb-cookie-page__note {
    color: var(--pb-muted);
    font-size: 0.84rem;
  }

  .pb-cookie-page__footer {
    align-items: center;
    border-top: 1px solid var(--pb-line);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 2rem;
  }

  .pb-cookie-page__footer p {
    font-size: 0.84rem;
    margin: 0;
  }

  .pb-cookie-page__back {
    flex: 0 0 auto;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none !important;
  }

  @media (max-width: 860px) {
    .pb-cookie-page__hero {
      grid-template-columns: 1fr;
    }

    .pb-cookie-page__intro {
      max-width: 42rem;
    }

    .pb-cookie-page__layout {
      grid-template-columns: 1fr;
    }

    .pb-cookie-page__nav {
      position: static;
    }

    .pb-cookie-page__nav ol {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pb-cookie-page__nav li:nth-last-child(2) {
      border-bottom: 1px solid var(--pb-line);
    }
  }

  @media (max-width: 560px) {
    .pb-cookie-page {
      font-size: 16px;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .pb-cookie-page__nav ol {
      grid-template-columns: 1fr;
    }

    .pb-cookie-page__nav li:nth-last-child(2) {
      border-bottom: 0;
    }

    .pb-cookie-page__section {
      gap: 0.6rem;
      grid-template-columns: 1fr;
    }

    .pb-cookie-page__number {
      padding-top: 0;
    }

    .pb-cookie-page__detail {
      gap: 0.25rem;
      grid-template-columns: 1fr;
    }

    .pb-cookie-page__footer {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pb-cookie-page *,
    .pb-cookie-page *::before,
    .pb-cookie-page *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media print {
    .pb-cookie-page {
      background: #fff;
      color: #111;
      padding: 1cm;
    }

    .pb-cookie-page *,
    .pb-cookie-page h1,
    .pb-cookie-page h2,
    .pb-cookie-page h3,
    .pb-cookie-page p,
    .pb-cookie-page a,
    .pb-cookie-page strong,
    .pb-cookie-page td,
    .pb-cookie-page dd {
      color: #111 !important;
    }

    .pb-cookie-page__nav,
    .pb-cookie-page__button,
    .pb-cookie-page__back {
      display: none !important;
    }

    .pb-cookie-page__layout,
    .pb-cookie-page__hero,
    .pb-cookie-page__section {
      display: block;
    }

    .pb-cookie-page__section {
      break-inside: avoid;
    }
  }

/* Carrusel de reseñas: desplazamiento nativo con ajuste por tarjeta, flechas y puntos */
.carrusel{position:relative}
.carrusel-pista{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:.25rem .25rem .5rem;margin:-.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carrusel-pista::-webkit-scrollbar{display:none}
.carrusel-pista > *{flex:0 0 min(100%,400px);scroll-snap-align:start}
@media (min-width:640px){.carrusel-pista > *{flex-basis:calc((100% - 1.1rem)/2)}}
@media (min-width:1000px){.carrusel-pista > *{flex-basis:calc((100% - 2.2rem)/3)}}
.carrusel-pista:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
.carrusel-controles{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem}
.carrusel-btn{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid var(--borde);background:var(--superficie-2);color:var(--texto);font:inherit;font-size:1.1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s ease,color .2s ease}
.carrusel-btn:hover{border-color:var(--acento);color:var(--acento)}
.carrusel-puntos{display:flex;gap:.45rem}
.carrusel-puntos button{width:.6rem;height:.6rem;border-radius:999px;border:0;background:var(--borde);padding:0;cursor:pointer;transition:width .25s ease,background .2s ease}
.carrusel-puntos button[aria-selected="true"]{background:var(--acento);width:1.5rem}
.seccion-clara .carrusel-btn{background:#fff;color:#0B0B0C;border-color:#D9D4CA}
.seccion-clara .carrusel-btn:hover{color:var(--acento);border-color:var(--acento)}
.seccion-clara .carrusel-puntos button{background:#D9D4CA}
.seccion-clara .carrusel-puntos button[aria-selected="true"]{background:var(--acento)}
.testimonio blockquote.recortada{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.testimonio .leer-mas{background:none;border:0;padding:0;margin:-.4rem 0 .9rem;color:var(--acento);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.seccion-clara .testimonio .leer-mas{color:#A75701}
.avatar--letra{display:inline-flex;align-items:center;justify-content:center;background:var(--superficie-2);color:var(--acento);font-family:var(--fx-head);font-weight:700;font-size:1.05rem}
.seccion-clara .avatar--letra{background:#F5F2EC;color:#A75701}
.resenas-fuente{margin-top:1rem;color:var(--texto-2);font-size:.82rem}
.resenas-fuente a{color:inherit}
@media (prefers-reduced-motion:reduce){.carrusel-pista{scroll-behavior:auto}}
.resenas-mas{margin-top:1.4rem}
.resenas-mas .btn span{margin-left:.35rem}