/* ============================================================
   SENTIDA · base común (TRAMA, 24/09/2026)
   La usan Decoradas, Nuestras tortas y Antojos: tokens, tipografías,
   botones, cabecera y pie. La home tiene home.css, con los mismos tokens.
   Los colores y las fuentes viven en comun/marca.css.
   ============================================================ */

:root{
  --lateral:clamp(20px,4vw,56px);
  --ancho:1440px;
  --cab:88px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--cab) + 8px); scrollbar-color:var(--beige) var(--blanco)}
html.mov{scroll-behavior:smooth}
html,body{margin:0; background:var(--blanco); color:var(--marron); font-family:var(--ui); -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:var(--marron); text-decoration:none}
:where(a:hover){color:var(--marron-medio)}
img{display:block; max-width:100%; height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--celeste-profundo); outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--celeste); color:var(--marron)}

.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.saltar{position:fixed; z-index:99; left:16px; top:-6rem; background:var(--marron); color:var(--blanco); padding:12px 16px; border-radius:2px; border:1px solid transparent}
.saltar:focus{top:16px; color:var(--blanco)}
.ico{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ico-wa{fill:currentColor; stroke:none}
.display{font-family:var(--display); font-weight:400}
.envoltorio{max-width:var(--ancho); margin:0 auto; padding-inline:var(--lateral)}

/* Botones y enlaces */
.btn,.enlace,.cab-nav a,.menu summary{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:51px; padding:0 22px; border:1px solid transparent; border-radius:2px;
  font-family:var(--ui); cursor:pointer; letter-spacing:.13em; transition:background-color .2s, color .2s, transform .2s;
}
.mov .btn:hover{transform:translateY(-3px)}
.btn .ico{width:16px; height:16px}
.btn-1{background:var(--marron); color:var(--blanco)}
.btn-1:hover{background:var(--marron-medio); color:var(--blanco)}
.btn-2{background:transparent; color:var(--marron); border-color:var(--marron)}
.btn-2:hover{background:var(--crema); color:var(--marron)}
.botones{display:flex; flex-wrap:wrap; gap:10px}
.enlace{display:inline-flex; align-items:center; gap:8px; min-height:44px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px}
.enlace .ico{width:14px; height:14px}
.enlace-btn{background:none; border:0; padding:0; min-height:44px; font:inherit; font-size:14px; color:var(--marron); text-decoration:underline; text-underline-offset:5px; cursor:pointer}

/* ------------------------------------------------------------
   Componentes de sentida-v2
   ------------------------------------------------------------ */
.eti{font-size:11px; font-weight:600; letter-spacing:.18em; line-height:1.4; text-transform:uppercase; color:var(--celeste-profundo)}
.con-linea::before{content:""; display:inline-block; vertical-align:middle; width:30px; height:2px; margin-right:13px; background:var(--celeste-filete)}
.acento{color:var(--celeste-profundo)}
.seccion{padding-block:clamp(76px,12vh,120px)}
.titulo-seccion{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 50px; margin-bottom:clamp(30px,5vh,48px)}
.titulo-seccion .eti{margin-bottom:22px}
.titulo-seccion h2{font-size:clamp(2.6875rem,4.8vw,4.3125rem); line-height:1.1; letter-spacing:-.045em; text-wrap:balance}
.titulo-seccion > p{max-width:265px; margin-bottom:8px; font-size:15px; line-height:1.7; color:var(--marron-medio)}
.circulo{display:block; aspect-ratio:1; border-radius:50%; overflow:hidden; border:8px solid var(--crema); box-shadow:0 0 0 1px var(--celeste-filete); background:var(--crema)}
.circulo img{width:100%; height:100%; object-fit:cover}
@media (max-width:760px){
  .titulo-seccion{display:block}
  .titulo-seccion > p{margin-top:18px; font-size:14px; max-width:none}
}

/* ------------------------------------------------------------
   Cabecera: el mismo contenido en las cuatro páginas
   ------------------------------------------------------------ */
.cab{position:fixed; top:0; left:0; right:0; z-index:60; background:var(--blanco); border-bottom:1px solid var(--linea)}
.cab-in{position:relative; max-width:var(--ancho); margin:0 auto; height:calc(var(--cab) - 1px); padding:0 var(--lateral); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px}
.cab-nav{display:flex; justify-content:center; gap:0 clamp(18px,2.4vw,36px)}
.cab-nav a{display:inline-flex; align-items:center; min-height:44px; white-space:nowrap}
.cab-nav a[aria-current="page"]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px}
.cab-nav .solo-ancho{display:none}
.cab-marca{display:flex; align-items:center; min-height:44px}
.marca-logo{display:block; width:132px; height:auto}
.cab-acc{display:flex; justify-content:flex-end; align-items:center; gap:12px}
.menu{display:none}
.menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border:1px solid var(--marron); border-radius:2px}
.menu summary::-webkit-details-marker{display:none}
.menu-cerrar,.menu-i-cerrar,.menu[open] .menu-abrir,.menu[open] .menu-i-abrir{display:none}
.menu[open] .menu-cerrar,.menu[open] .menu-i-cerrar{display:inline}
.menu nav{position:absolute; top:100%; left:0; right:0; background:var(--blanco); border-bottom:1px solid var(--beige); padding:8px var(--lateral) 24px; display:flex; flex-direction:column; max-height:calc(100vh - var(--cab)); max-height:calc(100dvh - var(--cab)); overflow-y:auto; overscroll-behavior:contain}
.menu nav a{font-family:var(--display); font-size:26px; line-height:1.1; display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--linea)}
.menu nav a[aria-current="page"]{color:var(--marron-medio)}

/* ------------------------------------------------------------
   Marquesina: cinta celeste con el lema. Es decorativa (aria-hidden).
   Sin «mov», quieta.
   ------------------------------------------------------------ */
.marquesina{position:relative; margin-top:var(--cab); height:44px; display:flex; align-items:center; overflow:hidden; background:var(--celeste); color:var(--celeste-profundo)}
.marquesina-pista{display:flex; width:max-content}
/* La pausa: solo existe cuando la cinta se mueve (.mov). */
.marquesina-pausa{display:none}
.mov .marquesina-pausa{
  position:absolute; right:0; top:0; bottom:0; z-index:1; display:grid; place-items:center; width:44px; padding:0;
  border:0; background:var(--celeste); color:var(--celeste-profundo); cursor:pointer;
  box-shadow:-18px 0 14px -4px var(--celeste);
}
.marquesina-pausa:hover{color:var(--marron)}
.marquesina-pausa:focus-visible{outline-offset:-4px}
.marquesina-pausa .ico{width:16px; height:16px}
.marquesina-pausa .ico-seguir,.marquesina.pausada .ico-pausar{display:none}
.marquesina.pausada .ico-seguir{display:block}
.marquesina-pista span{white-space:nowrap; padding-right:34px; font-size:11px; font-weight:600; letter-spacing:.21em; text-transform:uppercase}
.marquesina i{display:inline-block; position:relative; font-style:normal; width:10px; height:10px; margin:0 40px; vertical-align:middle; border:1px solid var(--celeste-filete); border-radius:50%}
.marquesina i::after{content:""; position:absolute; inset:2px; border:1px solid var(--celeste-filete); border-radius:50%}
.mov .marquesina-pista{animation:marquesina 48s linear infinite}
.mov .marquesina:hover .marquesina-pista,.mov .marquesina.pausada .marquesina-pista{animation-play-state:paused}
@keyframes marquesina{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   «Antes de pedir»: la banda crema arriba del pie. Tres <details>
   (andan sin JavaScript); el «+» está dibujado, no es un carácter.
   ------------------------------------------------------------ */
.saber{background:var(--crema); color:var(--marron)}
.saber-in{padding-block:clamp(64px,10vh,96px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px clamp(40px,6vw,96px); align-items:start}
.saber-cab .eti{margin-bottom:20px}
.saber-cab h2{font-size:clamp(2.25rem,3.6vw,3.25rem); line-height:1.08; letter-spacing:-.04em; text-wrap:balance}
.saber-cab > p:not(.eti){margin-top:22px; max-width:380px; font-size:14px; line-height:1.7; color:var(--marron-medio)}
.saber a:not(.btn){color:var(--marron); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.saber a:not(.btn):hover{color:var(--marron-medio)}
.saber-lista{border-top:1px solid var(--marron)}
.saber-item{border-bottom:1px solid var(--beige)}
.saber-item:last-child{border-bottom-color:var(--marron)}
.saber-item summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) 38px; align-items:center; gap:12px; min-height:84px; padding:14px 0}
.saber-item summary::-webkit-details-marker{display:none}
.saber-n{font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--celeste-profundo); font-variant-numeric:tabular-nums}
.saber-t{font-family:var(--display); font-weight:400; font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.2; letter-spacing:-.02em}
.saber-mas{position:relative; width:38px; height:38px; border:1px solid var(--marron); border-radius:50%; transition:background-color .2s, border-color .2s}
.saber-mas::before,.saber-mas::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--marron); transition:transform .3s cubic-bezier(.16,1,.3,1)}
.saber-mas::after{transform:rotate(90deg)}
.saber-item:not([open]) summary:hover .saber-mas{background:var(--blanco)}
.saber-item[open] .saber-mas{background:var(--marron)}
.saber-item[open] .saber-mas::before,.saber-item[open] .saber-mas::after{background:var(--crema)}
.saber-item[open] .saber-mas::after{transform:rotate(0deg)}
.saber-cuerpo{padding:0 50px 30px 56px; font-size:15px; line-height:1.7; color:var(--marron-medio)}
.saber-cuerpo ul{list-style:none; padding:0; display:grid; gap:10px}
.saber-cuerpo li{position:relative; padding-left:22px; max-width:560px}
/* La viñeta es el aro de la cinta */
.saber-cuerpo li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border:1px solid var(--celeste-filete); border-radius:50%}
.saber-dos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px}
.saber-sub{margin-bottom:10px; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.18em; line-height:1.5; text-transform:uppercase; color:var(--celeste-profundo)}
.mov .saber-item[open] .saber-cuerpo{animation:saber-abrir .35s cubic-bezier(.16,1,.3,1)}
@keyframes saber-abrir{from{opacity:0; transform:translateY(-6px)}}

/* ------------------------------------------------------------
   Pie: marca · Explorá · Escribinos · el sello. El borde de arriba
   es el dentado del ticket: la banda crema se corta como el papel.
   ------------------------------------------------------------ */
.pie{position:relative; background:var(--marron); color:var(--crema)}
.saber + .pie::before{
  content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--crema);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 16px 100%;
}
.pie a{color:var(--crema)}
.pie a:hover{color:var(--blanco); text-decoration:underline; text-underline-offset:4px}
.pie :focus-visible{outline-color:var(--crema)}
.pie-in{padding-block:clamp(64px,10vh,92px); display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr) auto; gap:40px clamp(40px,5vw,80px); align-items:start}
.pie-logo{display:block; width:150px; height:auto}
.pie-lema{margin-top:18px; font-size:23px; line-height:1.2; color:var(--crema)}
.pie-links{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:24px 40px; font-size:13px; line-height:1.5}
.pie-eti{margin-bottom:10px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--beige)}
.pie-links ul{list-style:none; padding:0}
.pie-links a{display:inline-flex; align-items:center; gap:10px; min-height:44px}
.pie-links .ico,.pie-lugar .ico{width:16px; height:16px; color:var(--beige)}
.pie-links a:hover .ico{color:var(--blanco)}
.pie-lugar{display:flex; align-items:flex-start; gap:10px; padding-top:12px; line-height:1.9}
.pie-lugar .ico{margin-top:.25em}
.pie-sello{width:164px; height:164px; border-radius:50%; background:var(--blanco); transform:rotate(-8deg)}
.pie-fin{padding-block:24px; border-top:1px solid var(--marron-medio); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:11px; letter-spacing:.1em}
/* El crédito del estudio: «Diseño» y el logo de TRAMA, que lleva a su sitio. */
.pie-trama{display:inline-flex; align-items:center; gap:8px; min-height:44px}
.pie-trama img{display:block; width:auto; height:15px}

/* ------------------------------------------------------------
   La franja legal del pie (legal/pie.html, la misma en la tienda) y las
   páginas de Privacidad y Términos (legal/*.html).
   ------------------------------------------------------------ */
.pie-legal{padding-block:20px 24px; border-top:1px solid var(--marron-medio); display:grid; gap:12px; font-size:12px; line-height:1.6}
.pie-legal-links{display:flex; flex-wrap:wrap; align-items:center; gap:4px 28px; font-size:13px}
.pie-legal-links a{display:inline-flex; align-items:center; min-height:44px}
.pie .pie-arrepentimiento{padding:0 16px; border:1px solid var(--crema); border-radius:2px}
.pie .pie-arrepentimiento:hover{background:var(--crema); color:var(--marron); text-decoration:none}
.pie-aaip{max-width:120ch; font-size:11px; line-height:1.6; color:var(--beige)}
.legal{padding-block:clamp(40px,7vh,80px) clamp(72px,12vh,120px)}
.legal-cab .eti{margin-bottom:18px}
.legal-cab h1{font-size:clamp(2.6rem,5vw,4.3rem); line-height:1.05; letter-spacing:-.03em}
.legal-texto{max-width:68ch; margin-top:clamp(28px,5vh,48px); font-size:16px; line-height:1.7}
.legal-texto > * + *{margin-top:16px}
.legal-texto h2{margin-top:44px; font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1.2}
.legal-texto ul{padding-left:1.2em}
.legal-texto li + li{margin-top:10px}
.legal-texto a{text-decoration:underline; text-decoration-color:var(--beige); text-underline-offset:4px}
.legal-fecha{font-size:13px; color:var(--marron-medio)}
/* La línea de consentimiento junto a cada «Mandar» (Ley 25.326). */
.acepto{font-size:13px; line-height:1.5; color:var(--marron-medio)}
.acepto a{color:inherit; text-decoration:underline; text-decoration-color:var(--beige); text-underline-offset:4px}

/* Con cuatro secciones, el menú entra entero recién desde 1100 px;
   «Nosotras», desde 1280 px (antes queda en el pie). */
@media (min-width:1280px){
  .cab-nav .solo-ancho{display:inline-flex}
}
/* En el celular (y en la tablet, donde aparece «Menú»): Menú y la bolsa a la
   izquierda, el logo a la derecha. Decisión de las dueñas del 07/10/2026; en
   la compu queda como estaba, con el logo a la izquierda. El orden del HTML
   es el de la compu, así que acá se acomoda con la grilla y `order`. */
@media (max-width:1099px){
  .cab-in{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"acc . marca"; gap:12px}
  .cab-marca{grid-area:marca}
  .cab-acc{grid-area:acc; justify-content:flex-start}
  .cab-nav{display:none}
  .menu{display:block; order:-1}
}
@media (max-width:899px){
  :root{--cab:64px}
  .marquesina{height:36px}
  .marquesina i{margin:0 24px}
  .saber-in{grid-template-columns:1fr}
  .saber-cuerpo{padding:0 0 26px 56px}
  .pie-in{grid-template-columns:minmax(0,1fr) auto; gap:36px 24px}
  .pie-links{grid-column:1 / -1; grid-row:2}
  .pie-sello{width:118px; height:118px; margin-top:-6px}
  .marca-logo{width:104px}
}
@media (max-width:599px){
  .saber-item summary{grid-template-columns:34px minmax(0,1fr) 38px; min-height:76px}
  .saber-cuerpo{padding-left:46px; font-size:14px}
  .saber-dos{grid-template-columns:1fr}
  .pie-links{grid-auto-flow:row}
  .pie-links div:first-child ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px}
}
@media (max-width:380px){
  .btn{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .saber-mas::before,.saber-mas::after{transition:none}
}