/* Estilos de las páginas de texto (sobre-clems, preguntas-frecuentes,
   privacidad). El catálogo (index.html) NO usa este archivo: tiene su CSS
   adentro y se deja como está.

   Las fuentes son las mismas cuatro que ya viajan en fuentes/. Se declaran de
   nuevo acá porque estas páginas no comparten el <style> del catálogo. No se
   agregan pesos ni familias nuevas: si algún día se agrega uno, hay que bajar
   el .woff2 de vuelta (ya no alcanza con tocar una URL de Google). */

@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(fuentes/cormorantgaramond-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fuentes/cormorantgaramond-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(fuentes/jost-normal.woff2) format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/marcellus-normal.woff2) format('woff2')}

:root{
  --cacao:#5a3528; --cacao-soft:#8a6149; --crema:#fbf6ef; --crema-2:#f4e9dd;
  --rosa:#e8c4ba; --rosa-dk:#c98a78; --oro:#c98a3c; --oro-dk:#9c6318;
  --tinta:#3a2418; --linea:#e4d6c6; --blanco:#fffdfa;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--crema);color:var(--tinta);
  font-family:'Jost',sans-serif;font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* ENCABEZADO ─────────────────────────────────────────────── */
.cab{
  text-align:center;padding:38px 24px 30px;border-bottom:1px solid var(--linea);
  background:radial-gradient(130% 90% at 50% -10%, #fff 0%, var(--crema) 55%, var(--crema-2) 100%);
}
.cab img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.cab .marca{font-family:'Cormorant Garamond';font-style:italic;font-size:38px;line-height:1;color:var(--cacao)}
.cab .marca span{
  display:block;font-family:'Marcellus';font-style:normal;font-size:13px;
  letter-spacing:.34em;margin-top:8px;color:var(--cacao-soft);
}
.cab .pestanas{margin-top:20px;padding:0}

/* PESTAÑAS ───────────────────────────────────────────────────
   Las mismas que la portada, con la misma pinta. Están para poder saltar entre
   las páginas sin bajar hasta el pie, que era donde vivían antes y no las veía
   nadie.

   NO reemplazan a la miga de pan: la miga dice dónde estás y es la que el
   BreadcrumbList del JSON-LD promete que existe en pantalla; las pestañas dicen
   a dónde podés ir. Si se saca la miga, hay que sacar también el BreadcrumbList
   o queda declarando algo que la página no muestra.

   Privacidad no lleva pestañas: es una página legal, se llega desde el pie y no
   hay pestaña propia que marcar como activa. */
.pestanas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto;padding:0 24px;max-width:760px}
.pest{
  font-family:'Jost';font-size:12.5px;letter-spacing:.05em;padding:8px 17px;
  border-radius:40px;border:1px solid var(--linea);background:rgba(255,255,255,.62);
  color:var(--cacao-soft);text-decoration:none;
  transition:border-color .2s,color .2s,background-color .2s;
}
a.pest:hover{border-color:var(--oro);color:var(--cacao);background:var(--blanco)}
.pest.on{background:var(--cacao);color:var(--crema);border-color:var(--cacao)}

/* MIGA DE PAN ────────────────────────────────────────────── */
.miga{max-width:760px;margin:20px auto 0;padding:0 24px;font-size:14px;color:var(--cacao-soft)}
.miga a{color:var(--cacao-soft)}
.miga span{color:var(--tinta)}

/* CUERPO ─────────────────────────────────────────────────── */
main{max-width:760px;margin:0 auto;padding:26px 24px 60px}

h1{
  font-family:'Cormorant Garamond';font-weight:600;font-size:40px;line-height:1.15;
  color:var(--cacao);margin-bottom:6px;
}
h2{
  font-family:'Marcellus';font-weight:400;font-size:23px;color:var(--cacao);
  margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--linea);
}
h3{font-family:'Marcellus';font-weight:400;font-size:18px;color:var(--cacao-soft);margin:24px 0 8px}
h2:first-of-type{border-top:0;padding-top:0;margin-top:26px}

.bajada{font-family:'Cormorant Garamond';font-style:italic;font-size:22px;color:var(--cacao-soft);margin-bottom:8px}
.fecha{font-size:14px;color:var(--cacao-soft);margin-bottom:10px}

p{margin:0 0 14px}
a{color:var(--oro-dk)}
a:hover{color:var(--rosa-dk)}
strong,b{font-weight:500;color:var(--cacao)}

ul,ol{margin:0 0 16px 22px}
li{margin-bottom:8px}

/* TABLAS ─────────────────────────────────────────────────── */
.tabla-envoltorio{overflow-x:auto;margin:0 0 18px}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:16px;background:var(--blanco)}
caption{text-align:left;font-size:14px;color:var(--cacao-soft);padding-bottom:8px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-weight:500;color:var(--cacao);background:var(--crema-2);font-size:15px}
tbody tr:last-child td{border-bottom:0}

/* PREGUNTAS ──────────────────────────────────────────────── */
.pregunta{border-bottom:1px solid var(--linea);padding:18px 0}
.pregunta:last-of-type{border-bottom:0}
.pregunta h2{
  font-family:'Marcellus';font-size:19px;color:var(--cacao);
  margin:0 0 8px;padding:0;border:0;
}
.pregunta p:last-child{margin-bottom:0}

/* AVISOS ─────────────────────────────────────────────────── */
.aviso{
  background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--rosa);
  padding:16px 18px;margin:0 0 18px;border-radius:4px;
}
.aviso p:last-child{margin-bottom:0}

/* BOTONES ────────────────────────────────────────────────── */
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.btn{
  display:inline-block;padding:12px 22px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:400;letter-spacing:.02em;
}
.btn-wa{background:var(--cacao);color:var(--crema)}
.btn-wa:hover{background:var(--cacao-soft);color:var(--crema)}
.btn-linea{border:1px solid var(--cacao-soft);color:var(--cacao)}
.btn-linea:hover{background:var(--crema-2);color:var(--cacao)}

/* PIE ────────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--linea);background:var(--crema-2);
  padding:30px 24px;text-align:center;font-size:15px;
}
footer nav{margin-bottom:12px}
footer nav a{margin:0 10px;white-space:nowrap;line-height:2.2}
footer .fdato{color:var(--cacao-soft);font-size:14px}

/* HERO DE MARCA (solo sobre-clems) ───────────────────────────
   Sustituye a .cab en esa página: ahí la marca la cuenta el video y el logo
   circular de arriba quedaba repetido en la misma pantalla. */
.hero{
  border-bottom:1px solid var(--linea);padding:34px 24px 30px;
  background:radial-gradient(130% 90% at 50% -10%, #fff 0%, var(--crema) 55%, var(--crema-2) 100%);
}
.hero-caja{
  max-width:760px;margin:0 auto;display:flex;align-items:center;gap:34px;
}
/* Ancho fijo + aspect-ratio: el hueco del video ya ocupa su lugar antes de que
   baje un byte, así el título no salta cuando aparece. */
.hero-video{
  flex:0 0 186px;width:186px;aspect-ratio:9/16;overflow:hidden;
  border-radius:16px;border:1px solid var(--linea);
  background:var(--crema-2);box-shadow:0 10px 26px -14px rgba(90,53,40,.42);
}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-texto{flex:1;min-width:0}
.hero-ojo{
  font-family:'Marcellus';font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cacao-soft);margin-bottom:12px;
}
.hero h1{margin-bottom:8px}
.hero .bajada{margin-bottom:6px}
/* Dentro del hero las pestañas acompañan a la columna de texto, no al ancho de
   la página: por eso pierden el centrado y el padding que traen por defecto. */
.hero-texto .pestanas{justify-content:flex-start;padding:0;margin-top:18px}
/* El primer párrafo del cuerpo entra un punto más grande: hace de bajada real
   del texto ahora que el h1 se fue al hero. */
.entrada{font-size:1.06em;line-height:1.72}

/* FAMILIAS DE PRODUCTOS ──────────────────────────────────────
   Eran una tabla de tres filas. Como tarjetas, cada familia trae su propio
   encabezado: un modelo puede citar "Boxes" sin arrastrar la grilla entera. */
.familias{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:12px;margin:0 0 20px}
.familia{
  background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
  padding:16px 18px 14px;display:flex;flex-direction:column;
}
.familia h3{margin:0 0 8px;font-size:17px;color:var(--cacao)}
.familia p{font-size:15px;line-height:1.62;margin:0 0 10px}
.familia-uso{
  margin:auto 0 0;padding-top:10px;border-top:1px solid var(--linea);
  font-size:14px;color:var(--cacao-soft);
}

/* PASOS DEL ENCARGO ──────────────────────────────────────────
   counter propio en vez de los números del <ol>: el marcador nativo no se
   puede pintar ni redondear. Sigue siendo un <ol>, así que quien lo lee de
   corrido conserva el orden. */
.pasos{list-style:none;margin:0 0 20px;padding:0;counter-reset:paso}
.pasos li{
  counter-increment:paso;position:relative;padding:0 0 16px 44px;margin:0;
}
.pasos li::before{
  content:counter(paso);position:absolute;left:0;top:-1px;
  width:29px;height:29px;border-radius:50%;
  background:var(--crema-2);border:1px solid var(--linea);color:var(--oro-dk);
  font-family:'Marcellus';font-size:14px;line-height:27px;text-align:center;
}
/* La línea que une los pasos se corta en el último: si no, queda un hilo
   colgando abajo de todo. */
.pasos li:not(:last-child)::after{
  content:'';position:absolute;left:14px;top:31px;bottom:4px;width:1px;background:var(--linea);
}
.pasos li:last-child{padding-bottom:0}

/* REGLAS DEL ENCARGO ─────────────────────────────────────────
   <dl> y no tabla: término y definición es exactamente lo que son, y se lee
   igual de bien extraído en texto plano que en pantalla. */
.reglas{margin:0 0 20px}
.regla{
  display:grid;grid-template-columns:170px 1fr;gap:0 20px;
  padding:14px 0;border-bottom:1px solid var(--linea);
}
.regla:first-child{padding-top:0}
.regla:last-child{border-bottom:0;padding-bottom:0}
.regla dt{font-family:'Marcellus';font-size:16px;color:var(--cacao)}
.regla dd{margin:0;font-size:16px;line-height:1.62}

/* CONTACTO ───────────────────────────────────────────────── */
.contacto{
  list-style:none;margin:0 0 8px;padding:16px 18px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:10px;
}
.contacto li{margin-bottom:8px;font-size:16px}
.contacto li:last-child{margin-bottom:0}

@media (max-width:700px){
  .hero-caja{flex-direction:column;text-align:center;gap:22px}
  .hero-video{flex:0 0 auto;width:154px}
  .hero-texto .pestanas{justify-content:center}
  .regla{grid-template-columns:1fr;gap:4px}
  .regla dt{font-size:15px;color:var(--cacao-soft)}
}

@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:32px}
  h2{font-size:21px}
  .cab .marca{font-size:32px}
}

/* El scroll suave del html también es movimiento que alguien puede no querer.
   Del logo animado se ocupa el script de sobre-clems: si el sistema pide menos
   movimiento ni siquiera pide el video, y queda el poster. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}