/* =========================================================================
   Adetti Cosméticos — hoja de estilo única
   Paleta derivada del logotipo; bandas de color tomadas del Catálogo 2026.
   ========================================================================= */

/* ---------- Tipografías auto-hospedadas ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight:600 800; font-style:normal; font-display:swap;
  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:'Fraunces';
  src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight:600 800; font-style:normal; font-display:swap;
  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:'Outfit';
  src:url('../fonts/outfit-latin.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
  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:'Outfit';
  src:url('../fonts/outfit-latin-ext.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
  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;
}

/* ---------- Respaldos con métricas igualadas ----------
   Ocupan exactamente el mismo espacio que la tipografía real, así el cambio
   al cargar la fuente no reacomoda el texto (CLS ≈ 0). Los valores salen de
   medir el ancho y las cajas de ambas familias en el navegador.            */
@font-face{
  font-family:'Outfit respaldo';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('Roboto');
  size-adjust:98%; ascent-override:101%; descent-override:26%; line-gap-override:0%;
}
@font-face{
  font-family:'Fraunces respaldo';
  src:local('Times New Roman'),local('Times'),local('Georgia');
  size-adjust:99%; ascent-override:99%; descent-override:26%; line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  /* Color — el crema es el papel; magenta y lima son la tinta. */
  --crema:#F4F4EF;
  --crema-hondo:#E8E8DF;
  --blanco:#FFFFFF;
  --tinta:#2E2E2F;          /* 12.3:1 sobre crema */
  --tinta-suave:#5A5A5C;    /*  6.2:1 sobre crema */
  --magenta:#D63795;        /* logotipo: marca, filetes, titulares grandes */
  --magenta-hondo:#B82A7C;  /* bandas y botones con texto blanco — 5.7:1 */
  --magenta-oscuro:#8E1F5E; /* estado :active */
  --lima:#98BF0C;           /* bandas de pilares */
  --verde-hoja:#70BE44;     /* hoja del logotipo */
  --verde-hondo:#4E6A05;    /*  5.6:1 sobre crema */
  --linea:#DEDED4;
  --linea-tenue:#EBEBE3;

  /* Texto sobre la banda lima.
     Decisión del cliente: blanco, como en el catálogo impreso (2.1:1).
     Para cumplir WCAG AA cambia SOLO estas dos líneas por:
        --lima-texto:var(--tinta);  --lima-texto-suave:#3F4A10;         */
  --lima-texto:var(--blanco);
  --lima-texto-suave:rgba(255,255,255,.88);

  /* Tipografía */
  --display:'Fraunces','Fraunces respaldo',Georgia,'Times New Roman',serif;
  --texto:'Outfit','Outfit respaldo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-xs:.75rem;  --t-sm:.875rem; --t-base:1rem;  --t-md:1.0625rem;
  --t-lg:clamp(1.125rem,.95rem + .75vw,1.375rem);
  --t-xl:clamp(1.5rem,1.2rem + 1.5vw,2rem);
  --t-2xl:clamp(1.875rem,1.4rem + 2.4vw,2.75rem);
  --t-3xl:clamp(2.375rem,1.6rem + 3.8vw,4rem);

  /* Ritmo */
  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem; --e5:2rem;
  --e6:3rem;  --e7:4rem;   --e8:6rem;
  --ancho:1180px;
  --borde:10px;

  /* Capas */
  --z-cabecera:100; --z-menu:200; --z-arriba:300;

  --curva:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--t-md);
  font-weight:350;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
img{height:auto}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.1;
  letter-spacing:-.022em; text-wrap:balance; margin:0}
h1{font-size:var(--t-3xl); letter-spacing:-.03em}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0 0 1em; text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--magenta-hondo); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--magenta-oscuro)}
ul{margin:0; padding:0}
:focus-visible{outline:2.5px solid var(--magenta-hondo); outline-offset:3px; border-radius:3px}
.banda-magenta :focus-visible,.banda-lima :focus-visible{outline-color:var(--blanco)}

.contenedor{width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem)}
.solo-lectores{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.saltar{position:absolute; left:.75rem; top:-4rem; z-index:var(--z-arriba); background:var(--magenta-hondo);
  color:#fff; padding:.7rem 1.1rem; border-radius:var(--borde); font-weight:500; text-decoration:none;
  transition:top .2s var(--curva)}
.saltar:focus{top:.75rem; color:#fff}

/* ---------- El realce ondulado: el gesto propio del catálogo ---------- */
/* Se pinta como fondo, no como pseudo-elemento, para que `box-decoration-break`
   repita la onda en cada línea cuando el titular se parte en dos. */
.realce{
  display:inline; padding:.06em .34em .12em; color:var(--blanco);
  background-image:var(--onda-lima);
  background-size:100% 100%; background-repeat:no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.realce--magenta{background-image:var(--onda-magenta)}
:root{
  --onda-lima:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M2 21C56 8 104 24 156 15c52-9 100 7 154-2 30-5 60-9 88-4l0 78c-28 6-58 1-88-4-54-9-102 7-154-2-52-9-100 7-154-6z' fill='%2398BF0C'/%3E%3C/svg%3E");
  --onda-magenta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M2 21C56 8 104 24 156 15c52-9 100 7 154-2 30-5 60-9 88-4l0 78c-28 6-58 1-88-4-54-9-102 7-154-2-52-9-100 7-154-6z' fill='%23B82A7C'/%3E%3C/svg%3E");
}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:var(--z-cabecera);
  background:color-mix(in srgb,var(--crema) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--curva),background .25s var(--curva);
}
.cabecera[data-fija="si"]{border-bottom-color:var(--linea); background:color-mix(in srgb,var(--crema) 96%,transparent)}
.cabecera .contenedor{display:flex; align-items:center; gap:var(--e3); min-height:4.25rem}
.marca{display:flex; align-items:center; margin-right:auto; text-decoration:none; flex:none}
.marca svg{height:1.5rem; width:auto}
.nav{display:none}
.nav a{color:var(--tinta); text-decoration:none; font-size:var(--t-sm); font-weight:400; padding:.4rem .1rem;
  position:relative}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:.12rem; height:1.5px;
  background:var(--magenta); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--curva)}
.nav a:hover{color:var(--magenta-hondo)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  background:none; border:1px solid var(--linea); border-radius:var(--borde); color:var(--tinta);
  font:inherit; font-size:var(--t-sm); padding:.5rem .8rem; cursor:pointer}
.menu-btn:hover{border-color:var(--tinta-suave)}
.menu-btn svg{width:1.05rem; height:1.05rem}
.cabecera .btn--solido{padding-inline:1rem}
@media (max-width:23.5rem){
  .cabecera .btn--solido span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .cabecera .btn--solido{padding-inline:.85rem}
}

@media (min-width:62rem){
  .nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.9rem)}
  .menu-btn{display:none}
}

/* menú móvil */
.menu{position:fixed; inset:0; z-index:var(--z-menu); background:var(--crema);
  padding:5.5rem clamp(1.15rem,6vw,2.5rem) 2rem; display:grid; align-content:start; gap:.2rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .24s var(--curva),transform .24s var(--curva),visibility .24s}
.menu[data-abierto="si"]{opacity:1; visibility:visible; transform:none}
.menu a{font-family:var(--display); font-size:1.75rem; font-weight:700; color:var(--tinta);
  text-decoration:none; padding:.55rem 0; border-bottom:1px solid var(--linea-tenue)}
.menu a:last-of-type{border-bottom:0}
.menu .btn{margin-top:var(--e4); justify-self:start}
.menu-cerrar{position:absolute; top:1.15rem; right:clamp(1.15rem,6vw,2.5rem)}
body[data-bloqueado="si"]{overflow:hidden}
@media (min-width:62rem){.menu{display:none}}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--texto); font-size:var(--t-sm); font-weight:500; letter-spacing:.005em;
  padding:.85rem 1.35rem; border-radius:var(--borde); border:1px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .2s var(--curva),color .2s var(--curva),
             border-color .2s var(--curva),transform .12s var(--curva);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.1em; height:1.1em; flex:none}
.btn--solido{background:var(--magenta-hondo); color:#fff}
.btn--solido:hover{background:var(--magenta-oscuro); color:#fff}
.btn--linea{background:transparent; color:var(--tinta); border-color:var(--linea)}
.btn--linea:hover{border-color:var(--tinta); color:var(--tinta)}
.btn--claro{background:var(--blanco); color:var(--magenta-hondo)}
.btn--claro:hover{background:var(--crema); color:var(--magenta-oscuro)}
.btn--contorno-claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--contorno-claro:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}
.btn--ancho{width:100%}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(3.5rem,9vw,var(--e8))}
.seccion--tenue{background:var(--crema-hondo)}
.banda-magenta{background:var(--magenta-hondo); color:#fff}
.banda-magenta h2,.banda-magenta h3{color:#fff}
.banda-lima{background:var(--lima); color:var(--lima-texto)}
.banda-lima h2,.banda-lima h3{color:var(--lima-texto)}

.rotulo{font-size:var(--t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde-hondo); margin:0 0 var(--e2)}
.banda-magenta .rotulo{color:#fff}
.banda-lima .rotulo{color:var(--lima-texto-suave)}
.entrada{max-width:52ch; color:var(--tinta-suave); font-size:var(--t-lg); margin-top:var(--e3)}
.banda-magenta .entrada{color:rgba(255,255,255,.9)}
.banda-lima .entrada{color:var(--lima-texto-suave)}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(2rem,6vw,3.5rem); padding-bottom:clamp(3rem,7vw,4.5rem); overflow:hidden}
.hero .contenedor{display:grid; gap:clamp(1.75rem,4vw,3rem)}
.hero__texto{max-width:min(100%,36rem)}
.hero h1{margin-bottom:var(--e4)}
.hero__sub{font-size:var(--t-lg); color:var(--tinta-suave); max-width:44ch; margin-bottom:var(--e5)}
.hero__ctas{display:flex; flex-wrap:wrap; gap:var(--e2)}
.hero__figura{position:relative; justify-self:center; width:100%; max-width:32rem}
.hero__figura img{border-radius:var(--borde); width:100%}
.hero__sello{
  position:absolute; left:0; bottom:1.25rem; background:var(--blanco);
  border-radius:var(--borde); padding:.7rem .95rem; box-shadow:0 6px 24px rgba(46,46,47,.1);
  max-width:15.5rem;
}
.hero__sello b{display:block; font-family:var(--display); font-size:var(--t-base); font-weight:700; line-height:1.2}
.hero__sello span{font-size:var(--t-xs); color:var(--tinta-suave)}
@media (min-width:52rem){
  .hero .contenedor{grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,5vw,4rem)}
  .hero__figura{max-width:none}
  .hero__sello{left:-1.5rem; bottom:2rem}
}

/* ---------- La marca ---------- */
.marca-bloque{display:grid; gap:clamp(1.75rem,4vw,3rem)}
.marca-bloque .cita{
  font-family:var(--display); font-weight:600; font-size:var(--t-xl); line-height:1.28;
  letter-spacing:-.015em; margin:0; padding-left:var(--e4); border-left:1px solid var(--magenta);
}
.marca-bloque .cita cite{display:block; font-family:var(--texto); font-style:normal;
  font-size:var(--t-sm); font-weight:400; color:var(--tinta-suave); margin-top:var(--e3)}
@media (min-width:52rem){.marca-bloque{grid-template-columns:1.15fr .85fr; align-items:start; gap:clamp(2.5rem,6vw,5rem)}}

/* ---------- Filtro ---------- */
.filtro{display:flex; flex-wrap:wrap; gap:var(--e1); margin:var(--e5) 0 var(--e4)}
.filtro button{
  font:inherit; font-size:var(--t-sm); font-weight:450; padding:.55rem 1.05rem; min-height:44px; cursor:pointer;
  background:transparent; color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:99px;
  transition:background-color .18s var(--curva),color .18s var(--curva),border-color .18s var(--curva);
}
.filtro button:hover{border-color:var(--tinta-suave); color:var(--tinta)}
.filtro button[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--crema)}

/* ---------- Rejilla de producto ---------- */
.rejilla{list-style:none; display:grid; gap:clamp(1.15rem,3vw,2rem) clamp(.85rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
@media (max-width:33rem){.rejilla{grid-template-columns:repeat(2,1fr); gap:1.35rem .85rem}}
.ficha{height:100%}
.ficha a{display:grid; gap:var(--e2); height:100%; align-content:start;
  text-decoration:none; color:inherit}
.ficha__img{position:relative; background:var(--crema); border-radius:var(--borde); overflow:hidden;
  aspect-ratio:1; border:1px solid var(--linea-tenue)}
.ficha__img img{width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--curva)}
.ficha a:hover .ficha__img img{transform:scale(1.035)}
.ficha a:hover .ficha__nombre{color:var(--magenta-hondo)}
.distintivo{position:absolute; top:.6rem; left:.6rem; font-size:.625rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:.28rem .55rem; border-radius:99px;
  background:var(--magenta-hondo); color:#fff}
.distintivo--favorito{background:var(--blanco); color:var(--verde-hondo);
  box-shadow:inset 0 0 0 1px rgba(78,106,5,.35)}
.distintivo--clasico{background:var(--blanco); color:var(--tinta-suave); box-shadow:inset 0 0 0 1px var(--linea)}
.ficha__nombre{font-family:var(--display); font-weight:700; font-size:var(--t-base); line-height:1.22;
  letter-spacing:-.015em; transition:color .2s var(--curva)}
.ficha__beneficio{font-size:var(--t-sm); color:var(--tinta-suave); line-height:1.45; margin:0}
.ficha__pres{font-size:var(--t-xs); color:var(--tinta-suave); letter-spacing:.03em;
  font-variant-numeric:tabular-nums; margin-top:auto; padding-top:.15rem}
.vacio{color:var(--tinta-suave); padding:var(--e5) 0; font-size:var(--t-base)}

/* ---------- Pilares ---------- */
.pilares{list-style:none; display:grid; gap:clamp(1.75rem,4vw,2.5rem); margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:40rem){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.pilares{grid-template-columns:repeat(4,1fr)}}
.pilar{padding-top:var(--e4); border-top:1.5px solid var(--lima-texto-suave)}
.pilar h3{font-size:var(--t-lg); margin-bottom:var(--e2)}
.pilar p{font-size:var(--t-sm); color:var(--lima-texto-suave); line-height:1.55}

/* ---------- Rutinas ---------- */
.rutinas{list-style:none; display:grid; gap:var(--e4); margin-top:clamp(2rem,5vw,3rem)}
@media (min-width:48rem){.rutinas{grid-template-columns:repeat(2,1fr); gap:var(--e5)}}
.rutina{background:var(--blanco); border:1px solid var(--linea-tenue); border-radius:var(--borde);
  padding:clamp(1.25rem,3vw,1.75rem)}
.rutina h3{font-size:var(--t-lg); margin-bottom:var(--e3)}
.rutina ol{list-style:none; display:grid; gap:.65rem; counter-reset:paso; padding:0; margin:0}
.rutina li{counter-increment:paso; display:grid; grid-template-columns:1.65rem 1fr; gap:.65rem;
  align-items:baseline; font-size:var(--t-sm)}
.rutina li::before{content:counter(paso); font-family:var(--display); font-weight:700;
  color:var(--magenta); font-size:var(--t-base); font-variant-numeric:tabular-nums}
.rutina a{color:var(--tinta); text-decoration-color:var(--linea)}
.rutina a:hover{color:var(--magenta-hondo); text-decoration-color:currentColor}

/* ---------- La revista: catálogo hojeable ----------
   El carrusel es CSS puro. Sin JavaScript se hojea arrastrando o con las
   miniaturas, que son anclas reales; el JS solo añade botones y contador. */
.revista__cabeza{display:grid; gap:var(--e4); padding-bottom:clamp(1.75rem,4vw,2.5rem)}
@media (min-width:52rem){
  .revista__cabeza{grid-template-columns:1fr auto; align-items:end; gap:clamp(2rem,5vw,4rem)}
}
.revista__acciones{display:flex; flex-wrap:wrap; gap:var(--e2); margin:0}


/* el marco es quien hace scroll; la lista queda como lista de verdad, para
   que sus <li> conserven el rol semántico */
.revista__marco{
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.revista__marco::-webkit-scrollbar{display:none}
.revista__marco:focus-visible{outline-offset:-3px}
.revista__paginas{
  list-style:none; display:flex; gap:clamp(.75rem,2vw,1.5rem);
  padding:0 max(calc((100vw - min(76vh,44rem)) / 2), 1.15rem) var(--e4);
  margin:0;
}
.revista__pagina{flex:0 0 auto; scroll-snap-align:center; scroll-margin-inline:0}
.revista__pagina img{
  width:min(86vw, 76vh, 44rem); height:auto; border-radius:var(--borde);
  background:var(--crema-hondo); box-shadow:0 2px 22px rgba(46,46,47,.09);
}

.revista__barra{display:flex; align-items:center; justify-content:center; gap:var(--e4);
  margin-bottom:var(--e4)}
.revista__flecha{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:99px; cursor:pointer;
  background:var(--blanco); border:1px solid var(--linea); color:var(--tinta);
  transition:border-color .2s var(--curva),background-color .2s var(--curva)}
.revista__flecha:hover:not(:disabled){border-color:var(--tinta); background:var(--crema)}
.revista__flecha:disabled{opacity:.35; cursor:default}
.revista__flecha svg{width:1.15rem; height:1.15rem}
.revista__contador{margin:0; font-size:var(--t-sm); color:var(--tinta-suave);
  font-variant-numeric:tabular-nums; min-width:10.5rem; text-align:center}
.revista__contador b{color:var(--tinta); font-weight:600}

.revista__tira{list-style:none; display:flex; gap:.5rem; overflow-x:auto;
  padding-bottom:var(--e2); scrollbar-width:thin}
.revista__tira a{display:block; position:relative; border-radius:6px; overflow:hidden;
  border:1px solid var(--linea-tenue); transition:border-color .2s var(--curva)}
.revista__tira img{width:clamp(3.25rem,7vw,4.25rem); height:auto; display:block}
.revista__tira span{position:absolute; inset:auto 0 0 0; text-align:center;
  font-size:.625rem; font-weight:600; padding:.1rem; color:var(--tinta);
  background:color-mix(in srgb,var(--crema) 88%,transparent);
  font-variant-numeric:tabular-nums}
.revista__tira a:hover{border-color:var(--tinta-suave)}
.revista__tira a[aria-current="true"]{border-color:var(--magenta-hondo); border-width:2px}
.revista__tira a[aria-current="true"] span{background:var(--magenta-hondo); color:#fff}

/* ---------- Servicios: bloque en la home ---------- */
.servicios-bloque{display:grid; gap:clamp(1.75rem,4vw,3rem)}
@media (min-width:52rem){
  .servicios-bloque{grid-template-columns:1fr 1fr; align-items:start; gap:clamp(2.5rem,6vw,5rem)}
}
.lista-servicios{list-style:none; display:grid; gap:0; border-top:1px solid var(--linea)}
.lista-servicios li{padding:.8rem 0 .8rem 1.6rem; border-bottom:1px solid var(--linea);
  font-size:var(--t-base); position:relative}
.lista-servicios li::before{content:""; position:absolute; left:0; top:1.42em;
  width:.42rem; height:.42rem; border-radius:99px; background:var(--verde-hoja)}

/* ---------- Servicios: página propia ---------- */
.servicios-cabeza{display:grid; gap:clamp(2rem,5vw,3rem); padding-block:clamp(1.5rem,4vw,2.5rem) clamp(2.5rem,6vw,4rem)}
@media (min-width:56rem){
  .servicios-cabeza{grid-template-columns:1.25fr .75fr; align-items:start; gap:clamp(2.5rem,6vw,4.5rem)}
}
.pro{background:var(--blanco); border:1px solid var(--linea-tenue); border-radius:var(--borde);
  padding:clamp(1.35rem,3vw,1.75rem)}
.pro .lbl{font-size:var(--t-xs); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-suave); margin:0 0 var(--e2)}
.pro__nombre{font-family:var(--display); font-weight:700; font-size:var(--t-lg);
  letter-spacing:-.018em; line-height:1.2; margin:0}
.pro__titulo{font-size:var(--t-sm); color:var(--tinta-suave); margin:.35rem 0 0}
.pro__datos{margin:var(--e4) 0 0; display:grid; gap:var(--e3)}
.pro__datos div{border-top:1px solid var(--linea-tenue); padding-top:var(--e2)}
.pro__datos dt{font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:.2rem}
.pro__datos dd{margin:0; font-size:var(--t-sm)}

.grupo{display:grid; gap:var(--e4); padding-block:clamp(2rem,5vw,3rem);
  border-top:1px solid var(--linea)}
@media (min-width:56rem){
  .grupo{grid-template-columns:.75fr 1.25fr; gap:clamp(2.5rem,6vw,4.5rem)}
  .grupo__intro{position:sticky; top:6rem}
}
.grupo__intro h2{font-size:var(--t-xl)}
.grupo__intro p{font-size:var(--t-sm); color:var(--tinta-suave); margin-top:var(--e2)}
.grupo__lista{list-style:none; display:grid; gap:0}
.grupo__lista li{padding:var(--e3) 0; border-bottom:1px solid var(--linea-tenue)}
.grupo__lista li:first-child{padding-top:0}
.grupo__lista li:last-child{border-bottom:0; padding-bottom:0}
.grupo__lista h3{font-size:var(--t-base); font-weight:700; letter-spacing:-.012em}
.grupo__lista p{font-size:var(--t-sm); color:var(--tinta-suave); margin:.3rem 0 0; max-width:56ch}

.sucursales{list-style:none; display:grid; gap:var(--e4)}
@media (min-width:40rem){.sucursales{grid-template-columns:repeat(2,1fr)}}
.sucursal{background:var(--blanco); border:1px solid var(--linea-tenue);
  border-radius:var(--borde); padding:clamp(1.25rem,3vw,1.6rem)}
.sucursal h3{font-size:var(--t-lg); margin-bottom:var(--e2)}
.sucursal address{font-style:normal; font-size:var(--t-sm); line-height:1.6; color:var(--tinta)}
.sucursal__horario{margin:var(--e3) 0 0; display:grid; gap:.45rem; font-size:var(--t-sm)}
.sucursal__horario div{display:grid; grid-template-columns:5.2rem 1fr; gap:.5rem}
.sucursal__horario dt{color:var(--tinta-suave)}
.sucursal__horario dd{margin:0}
.sucursal__mapa{display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--e3);
  font-size:var(--t-sm); font-weight:500; text-decoration:none}
.sucursal__mapa svg{width:1.1em; height:1.1em; transition:transform .25s var(--curva)}
.sucursal__mapa:hover svg{transform:translateX(3px)}
.dato address{font-style:normal; display:block; margin-bottom:.4rem}

/* ---------- Dónde comprar ---------- */
.canales{list-style:none; display:grid; gap:var(--e2); margin-top:clamp(1.75rem,4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.canal{display:flex; flex-direction:column; gap:.3rem; height:100%; padding:1.15rem 1.25rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--borde); text-decoration:none; color:#fff;
  transition:background-color .2s var(--curva),border-color .2s var(--curva),color .2s var(--curva)}
a.canal:hover{background:var(--blanco); border-color:var(--blanco); color:var(--magenta-oscuro)}
a.canal:hover span{color:var(--magenta-hondo)}
.canal > b{font-family:var(--display); font-size:var(--t-lg); font-weight:700; letter-spacing:-.015em}
.canal em{display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:var(--e3);
  font-style:normal; font-size:var(--t-sm); font-weight:500}
.canal em svg{width:1.1em; height:1.1em; transition:transform .25s var(--curva)}
a.canal:hover em svg{transform:translateX(3px)}
.canal{min-height:11rem}
.canal span{font-size:var(--t-xs); color:rgba(255,255,255,.95); line-height:1.45}
/* el marcador de dato faltante nunca se parte a la mitad ni cambia de estilo */
.np{white-space:nowrap; font:inherit; color:inherit; letter-spacing:inherit}
/* canal sin enlace todavía: se ve, pero no promete que se pueda clicar */
.canal--inerte{background:transparent; border-style:dashed;
  border-color:rgba(255,255,255,.42); cursor:default}
.canal--inerte b{color:rgba(255,255,255,.94)}

/* ---------- Contacto ---------- */
.contacto{display:grid; gap:clamp(1.75rem,4vw,3rem); margin-top:clamp(1.75rem,4vw,2.5rem)}
@media (min-width:48rem){.contacto{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.contacto{grid-template-columns:repeat(3,1fr)}}
.dato{border-top:1px solid var(--linea); padding-top:var(--e3)}
.dato dt{font-size:var(--t-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:.35rem}
.dato dd{margin:0; font-size:var(--t-base)}
.dato dd a{color:var(--tinta); text-decoration-color:var(--linea)}
.dato dd a:hover{color:var(--magenta-hondo)}

/* ---------- Pie ---------- */
.pie{background:var(--tinta); color:var(--crema); padding-block:clamp(2.5rem,6vw,4rem)}
.pie a{color:var(--crema); text-decoration-color:rgba(244,244,239,.35)}
.pie a:hover{color:#fff; text-decoration-color:currentColor}
.pie__alto{display:grid; gap:var(--e5)}
@media (min-width:48rem){.pie__alto{grid-template-columns:1.4fr 1fr 1fr}}
.pie__marca svg{height:2.6rem; width:auto}
.pie__lema{font-size:var(--t-sm); color:rgba(244,244,239,.72); max-width:32ch; margin-top:var(--e3)}
.pie h2{font-size:var(--t-sm); font-family:var(--texto); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(244,244,239,.66); margin-bottom:var(--e2)}
.pie ul{list-style:none; display:grid; gap:.45rem; font-size:var(--t-sm)}
.pie__bajo{margin-top:clamp(2rem,5vw,3rem); padding-top:var(--e4);
  border-top:1px solid rgba(244,244,239,.16); display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4);
  align-items:center; justify-content:space-between; font-size:var(--t-xs);
  color:rgba(244,244,239,.7)}
.pie__meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4)}
/* crédito del estudio: presente, nunca compitiendo con la marca del cliente */
.pie__credito{display:inline-flex; align-items:center; gap:.4rem;
  color:rgba(244,244,239,.7); text-decoration:none;
  transition:color .2s var(--curva)}
.pie__credito::before{content:""; width:.3rem; height:.3rem; border-radius:99px;
  background:var(--verde-hoja); flex:none}
.pie__credito b{font-weight:600; color:var(--crema)}
.pie__credito:hover{color:var(--crema)}
.pie__credito:hover b{text-decoration:underline; text-underline-offset:.2em}

/* ---------- Página de producto ---------- */
.miga{font-size:var(--t-xs); color:var(--tinta-suave); padding-top:var(--e4)}
.miga ol{list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.miga a{color:var(--tinta-suave); text-decoration-color:var(--linea)}
.miga a:hover{color:var(--magenta-hondo)}
.miga li+li::before{content:"/"; margin-right:.4rem; color:var(--linea)}

.producto{display:grid; gap:clamp(1.75rem,4vw,3.5rem); padding-block:clamp(1.75rem,4vw,2.75rem) clamp(3rem,7vw,4.5rem)}
@media (min-width:56rem){.producto{grid-template-columns:1fr 1fr; align-items:start; gap:clamp(2.5rem,5vw,4.5rem)}
  .producto__media{position:sticky; top:6rem}}
.producto__media img{background:var(--crema); border:1px solid var(--linea-tenue); border-radius:var(--borde); width:100%}
.producto h1{font-size:var(--t-2xl); margin-bottom:var(--e3)}
.producto__resumen{font-size:var(--t-lg); color:var(--tinta-suave); margin-bottom:var(--e4)}
.producto__meta{display:flex; flex-wrap:wrap; gap:var(--e1); margin-bottom:var(--e5)}
.etiqueta{font-size:var(--t-xs); font-weight:500; letter-spacing:.03em; padding:.34rem .7rem;
  border-radius:99px; border:1px solid var(--linea); color:var(--tinta-suave);
  font-variant-numeric:tabular-nums}
.producto__ctas{display:grid; gap:var(--e2); margin-bottom:var(--e5)}
@media (min-width:26rem){.producto__ctas{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}}

.detalle{border-top:1px solid var(--linea); padding-top:var(--e4); margin-top:var(--e4)}
.detalle h2{font-size:var(--t-lg); margin-bottom:var(--e3)}
.detalle p{font-size:var(--t-base)}
.lista-marca{list-style:none; display:grid; gap:.6rem}
.lista-marca li{display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; align-items:baseline;
  font-size:var(--t-base)}
.lista-marca li::before{content:""; width:.42rem; height:.42rem; border-radius:99px;
  background:var(--verde-hoja); transform:translateY(-.15rem)}
.pastillas{list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
.pastillas li{font-size:var(--t-sm); padding:.4rem .8rem; border-radius:99px;
  background:var(--crema-hondo); color:var(--tinta)}

.relacionados{border-top:1px solid var(--linea); padding-block:clamp(3rem,7vw,4.5rem)}

/* ---------- Aviso / 404 ---------- */
.texto-largo{max-width:68ch; padding-block:clamp(2.5rem,6vw,4rem)}
.texto-largo h2{font-size:var(--t-xl); margin:var(--e6) 0 var(--e3)}
.texto-largo h2:first-of-type{margin-top:var(--e5)}
.texto-largo ul{padding-left:1.15rem; display:grid; gap:.4rem; margin-bottom:1em}
.texto-largo li{list-style:disc}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ---------- Impresión ---------- */
@media print{
  .cabecera,.menu,.filtro,.hero__ctas,.producto__ctas,.pie__bajo{display:none}
  body{background:#fff; color:#000}
}