/* Zoi Organic: hoja de estilos del sitio público. Tokens y razones en docs/diseno/DESIGN.md */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-var-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:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-var-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}

:root{
  --terra:#A9572F;--terra-osc:#8F4A28;--crema:#F6EFE6;--tinta:#2B1D15;--suave:#5C4A3E;
  --arena:#EBDFD1;--papel:#FBF7F1;--sobre:#FFF6EC;--wa:#17703F;--linea:rgba(43,29,21,.25);
  --serif:"Fraunces",Georgia,serif;--sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* El contenido se centra en 1240 px; los bloques de color siguen llegando de borde a borde. */
  --ancho:1240px;
  --lado:max(clamp(20px,4.5vw,56px),calc((100vw - var(--ancho)) / 2));
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--crema);color:var(--tinta);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--terra-osc)}
a,button,summary,label,[role=switch]{cursor:pointer}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.bloque-terra :focus-visible{outline-color:var(--sobre)}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.1}
p{margin:0 0 1em}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;background:var(--tinta);color:var(--crema);padding:10px 16px;z-index:100}
.saltar:focus{top:12px}
#contenido:focus{outline:none}

/* Bloques de terracota: el motivo de la marca */
.bloque-terra{background:var(--terra);color:var(--sobre)}
.bloque-terra a:hover{color:#fff}
.franja{height:36px;background:url(../img/patron.webp) repeat-x 0 center/192px 36px;opacity:.5;border-block:1px solid rgba(194,110,65,.35)}

/* Cabecera fija */
.cabecera{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--lado);background:var(--crema);transition:box-shadow .25s,padding .25s var(--ease)}
.cabecera.es-scroll{box-shadow:0 4px 18px rgba(43,29,21,.12);padding-block:8px}
.logo{margin-right:auto}
.logo img{height:44px;width:auto;transition:height .25s var(--ease)}
.es-scroll .logo img{height:38px}
.nav-principal{display:flex;align-items:center;gap:30px;font-size:15px}
.nav-link,.nav-item--menu>.nav-link{position:relative;padding:8px 0}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-link:hover::after,.nav-link[aria-current=page]::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-link:hover{text-decoration:none}
.nav-item--menu{position:relative;display:flex;align-items:center}
.nav-toggle{background:none;border:0;padding:8px 6px;color:inherit;display:flex;align-items:center}
.nav-toggle svg{transition:transform .25s var(--ease)}
.nav-item--menu.abierto .nav-toggle svg,.nav-item--menu:hover .nav-toggle svg{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:-18px;min-width:310px;margin:0;padding:8px;list-style:none;background:var(--sobre);border:1px solid var(--linea);box-shadow:0 14px 30px rgba(43,29,21,.16);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item--menu:hover .submenu,.nav-item--menu:focus-within .submenu,.nav-item--menu.abierto .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:10px 14px;border-radius:2px;transition:background .15s,padding-left .2s var(--ease)}
.submenu a:hover{background:var(--arena);padding-left:20px;text-decoration:none;color:var(--tinta)}
.submenu strong{display:block;font-weight:500}
.submenu small{display:block;font-size:13.5px;color:var(--suave);line-height:1.35}
.submenu a[aria-current=page]{background:var(--arena)}
.boton--chico{min-height:42px;padding:9px 18px;font-size:15px}
.boton-menu{display:none;width:46px;height:46px;border:1px solid rgba(43,29,21,.35);background:transparent;color:var(--tinta);border-radius:2px;align-items:center;justify-content:center}
.boton-menu--claro{border-color:rgba(255,246,236,.6);color:var(--sobre)}
.menu-movil{position:fixed;inset:0;z-index:90;background:var(--terra);color:var(--sobre);display:flex;flex-direction:column;overflow-y:auto}
.menu-movil[hidden]{display:none}
.menu-movil__barra{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.menu-movil__barra img{height:38px;width:auto}
.menu-movil nav{padding:12px 20px 0;flex:1}
.menu-movil__grande{display:block;padding:12px 0;border-bottom:1px solid rgba(255,246,236,.35);font-family:var(--serif);font-size:32px;line-height:1.1}
.menu-movil nav>.menu-movil__grande:first-child{border-top:1px solid rgba(255,246,236,.35)}
.menu-movil__sub{list-style:none;margin:0;padding:6px 0 10px 14px;border-bottom:1px solid rgba(255,246,236,.35)}
.menu-movil__sub a{display:block;padding:9px 0;font-size:19px}
.menu-movil__pie{padding:24px 20px 32px;display:flex;flex-direction:column;gap:20px}
.menu-movil__legal{display:flex;justify-content:space-between;font-size:14px}
.menu-movil__legal a,.menu-movil__legal .enlace-boton{padding:10px 0}

/* Botones y enlaces */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;border:0;border-radius:2px;font:500 16px/1.2 var(--sans);transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
.boton:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 18px rgba(43,29,21,.2)}
.boton:active{transform:translateY(0);box-shadow:none}
.boton--terra{background:var(--terra);color:#fff}
.boton--terra:hover{background:var(--terra-osc);color:#fff}
.boton--claro{background:var(--sobre);color:var(--terra-osc)}
.boton--claro:hover{background:#fff;color:var(--terra-osc)}
.boton--wa{background:var(--wa);color:#fff}
.boton--wa:hover{background:#0F5C32;color:#fff}
.boton--ancho{width:100%;min-height:54px}
.icono-wa{flex:none}
.enlace-sub{position:relative;display:inline-block;font-size:16px;padding:4px 0 3px;color:var(--terra-osc);background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:background-size .25s var(--ease),color .2s}
.enlace-sub:hover{background-size:0 2px;background-position:100% 100%;text-decoration:none}
.enlace-sub--claro{color:var(--sobre)}
.enlace-boton{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px}
.acciones{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.chip{display:inline-block;border:1px solid rgba(43,29,21,.35);border-radius:999px;padding:1px 12px;font-size:13.5px;line-height:1.6;background:transparent}
.chip--sobre-foto{position:absolute;left:10px;top:10px;background:var(--sobre);border-color:transparent}

/* Botón flotante de WhatsApp: el icono real, y al pasar el cursor dice qué es */
.wa-flotante{position:fixed;right:max(16px,2vw);bottom:max(16px,2vw);z-index:40;min-width:58px;height:58px;padding:0 12px;border-radius:29px;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .2s var(--ease),box-shadow .2s,background-color .2s}
.wa-flotante::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);opacity:0;pointer-events:none;animation:latido 2.4s ease-out 4s 3}
.wa-flotante:hover,.wa-flotante:focus-visible{color:#fff;text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.3);background:#0F5C32}
.wa-flotante .icono-wa{width:32px;height:32px}
.wa-flotante__texto{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:500;transition:max-width .35s var(--ease),opacity .2s,margin .35s var(--ease)}
.wa-flotante:hover .wa-flotante__texto,.wa-flotante:focus-visible .wa-flotante__texto{max-width:140px;opacity:1;margin:0 6px 0 10px}
@keyframes latido{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* Portada */
.portada{display:grid;grid-template-columns:1fr 1fr;min-height:min(600px,calc(100vh - 70px))}
.portada__texto{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:48px 48px 48px var(--lado)}
.portada h1{font-size:clamp(34px,4.1vw,54px);letter-spacing:-.01em;color:var(--terra);line-height:1.06}
.portada__texto p{max-width:480px;margin:0}
.portada__bloque{display:flex;padding:36px}
.portada__marco{position:relative;flex:1;display:block;overflow:hidden;min-height:340px;background:var(--terra-osc)}
.portada__marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada__pie{position:absolute;left:0;bottom:0;padding:34px 22px 16px;margin:0;width:100%;font-size:15px;color:#fff;background:linear-gradient(transparent,rgba(43,29,21,.6))}

/* Secciones */
.seccion{padding:80px var(--lado) 32px}
.seccion--lista{padding-top:56px;padding-bottom:80px}
.seccion__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.seccion h2{font-size:clamp(26px,2.9vw,38px)}
.seccion--lista>h2{margin-bottom:32px}
.familias{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px}
.familia{display:flex;align-items:stretch;justify-content:space-between;gap:20px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.familia:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 16px 32px rgba(43,29,21,.16)}
.familia__texto{padding:32px;align-self:center}
.familia h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:8px}
.familia p{margin:0;max-width:280px;font-size:16px}
.familia--grande{grid-row:span 2;flex-direction:column;justify-content:space-between;min-height:540px}
.familia--grande .familia__texto{padding:40px 40px 0;align-self:stretch}
.familia--grande h3{font-size:clamp(30px,3.4vw,42px);font-weight:700;margin-bottom:12px}
.familia--grande p{max-width:340px}
.familia__minis{display:flex;gap:10px;padding:0 40px 40px}
.familia__mini{flex:1;aspect-ratio:1;overflow:hidden;background:#fff}
.familia__mini img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.familia--grande:hover .familia__mini:nth-child(1) img{transform:scale(1.08)}
.familia--grande:hover .familia__mini:nth-child(2) img{transform:scale(1.08) translateY(-4px)}
.familia--grande:hover .familia__mini:nth-child(3) img{transform:scale(1.08)}
.familia--foto{display:grid;grid-template-columns:1fr minmax(120px,42%)}
.familia--foto .familia__foto{overflow:hidden;min-height:200px}
.familia--foto .familia__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.familia--foto:hover .familia__foto img{transform:scale(1.06)}
.familia--arena{background:var(--arena)}
.familia--papel{background:var(--papel);border:1px solid rgba(43,29,21,.18)}
.familia--arena:hover,.familia--papel:hover{color:var(--tinta)}
.rejilla{display:grid;gap:40px 24px}
.rejilla--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Novedad */
.novedad{display:grid;grid-template-columns:1fr 1fr;background:var(--arena);margin-top:48px;height:clamp(340px,34vw,460px)}
.novedad__foto{position:relative;display:block;overflow:hidden}
.novedad__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.novedad:hover .novedad__foto img{transform:scale(1.04)}
.novedad__texto{padding:48px calc(var(--lado) - 16px) 48px 56px;align-self:center}
.novedad__etiqueta{font-size:14px;font-weight:500;color:var(--terra-osc);margin-bottom:6px}
.novedad h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:10px}
.novedad p{max-width:420px}
.novedad .acciones{margin-top:20px}

/* Tarjeta de producto */
.tarjeta{border-top:1px solid var(--linea);padding-top:18px;display:flex;flex-direction:column;transition:border-color .2s}
.tarjeta:hover{border-top-color:var(--terra)}
.tarjeta__enlace{display:block}
.tarjeta__enlace:hover{text-decoration:none;color:inherit}
.tarjeta__foto{position:relative;background:#fff;aspect-ratio:1;margin-bottom:14px;overflow:hidden}
.tarjeta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .45s}
.tarjeta__img--hover{opacity:0;transform:scale(1.06)}
.tarjeta:hover .tarjeta__img:not(.tarjeta__img--hover){transform:scale(1.06)}
.tarjeta:hover .tarjeta__img--hover{opacity:1;transform:scale(1)}
.tarjeta__nombre{font-size:21px;line-height:1.15;margin:2px 0 4px;transition:color .2s}
.tarjeta:hover .tarjeta__nombre{color:var(--terra)}
.tarjeta__precio{margin:0;font-size:15px;color:var(--suave)}
.tarjeta__wa{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:15px;color:var(--terra-osc);align-self:flex-start}
.tarjeta__wa span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .25s var(--ease)}
.tarjeta__wa:hover{text-decoration:none}
.tarjeta__wa:hover span{background-size:100% 2px}
.tarjeta-cta{padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:340px;transition:transform .3s var(--ease),box-shadow .3s}
.tarjeta-cta:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(43,29,21,.16)}
.tarjeta-cta p{font-family:var(--serif);font-size:28px;line-height:1.15;margin:0}
.tarjeta-cta .boton{align-self:flex-start}
.rejilla--sobre-terra .tarjeta{border-top-color:rgba(255,246,236,.4)}
.rejilla--sobre-terra .tarjeta:hover{border-top-color:var(--sobre)}
.rejilla--sobre-terra .tarjeta:hover .tarjeta__nombre{color:#fff}
.rejilla--sobre-terra .tarjeta__precio,.rejilla--sobre-terra .tarjeta__wa{color:var(--sobre)}
.rejilla--sobre-terra .chip{border-color:transparent}

/* Quiénes somos y conversación */
.quienes{padding:88px var(--lado)}
.quienes__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.quienes__frase{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.15;margin:0}
.quienes__texto{padding-top:36px;display:flex;flex-direction:column;gap:6px}
.quienes__texto p{margin:0 0 10px}
.quienes__texto .enlace-sub{align-self:flex-start}
.conversa{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;padding-bottom:80px}
.conversa p{max-width:480px}
.conversa .boton{margin-top:8px}
.chat{background:var(--arena);padding:28px;display:flex;flex-direction:column;gap:12px}
.chat__etiqueta{font-size:14px;color:var(--suave);margin:0}
.chat__globo{max-width:380px;padding:12px 16px;font-size:15.5px;line-height:1.45;color:var(--tinta);overflow-wrap:anywhere}
.chat__globo--cliente{align-self:flex-end;background:#DDEFD9;border-radius:12px 12px 2px 12px}

/* Encabezado de página (bloque terracota) */
.encabezado{padding:48px var(--lado) 56px}
.encabezado--texto{padding-top:64px;padding-bottom:72px}
.encabezado__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end}
.encabezado h1{font-size:clamp(36px,4.8vw,64px);font-weight:700;line-height:1;letter-spacing:-.01em}
.encabezado--texto h1{max-width:900px;line-height:1.04}
.encabezado p{margin:0;max-width:500px}
.encabezado__etiqueta{font-size:14px;margin-bottom:12px!important}
.migas{font-size:14px;margin:0 0 24px}
.migas--clara{padding:14px var(--lado) 0;color:var(--suave);font-size:14px;margin:0}
.filtros-barra{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:15px}
.filtros a{display:flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid rgba(43,29,21,.45);border-radius:999px;transition:background .2s,transform .2s var(--ease)}
.filtros a:hover{text-decoration:none;background:var(--arena);color:var(--tinta);transform:translateY(-2px)}
.filtros a[aria-current=page]{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.cuenta{margin:0;font-size:15px;color:var(--suave)}

/* Ficha de producto */
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:20px var(--lado) 80px;align-items:start}
.ficha__principal{background:#fff;aspect-ratio:1;overflow:hidden}
.ficha__principal img{width:100%;height:100%;object-fit:cover;animation:aparece .5s var(--ease)}
.ficha__miniaturas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;margin:8px 0 0;padding:0}
.ficha__miniaturas a{display:block;aspect-ratio:1;border:2px solid transparent;overflow:hidden;opacity:.75;transition:opacity .2s,border-color .2s,transform .2s var(--ease)}
.ficha__miniaturas a:hover{opacity:1;transform:translateY(-2px)}
.ficha__miniaturas a[aria-current=true]{border-color:var(--terra);opacity:1}
.ficha__miniaturas img{width:100%;height:100%;object-fit:cover}
.ficha__info{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.ficha__familia{font-size:14px;color:var(--terra-osc);margin:0;font-weight:500}
.ficha h1{font-size:clamp(32px,3.8vw,50px);line-height:1.06;color:var(--terra)}
.ficha__estado{margin:0}
.ficha__texto{max-width:520px;margin:0}
.ficha__detalles{display:grid;grid-template-columns:140px 1fr;margin:6px 0 10px;border-top:1px solid var(--linea);font-size:15.5px}
.ficha__detalles dt,.ficha__detalles dd{margin:0;padding:11px 0;border-bottom:1px solid rgba(43,29,21,.15)}
.ficha__detalles dt{color:var(--suave)}
.otras{padding:64px var(--lado) 72px}
.otras h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:28px}

/* Nosotros y contacto */
.nosotros{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:80px var(--lado);align-items:start}
.nosotros__texto{max-width:560px;display:flex;flex-direction:column;gap:4px}
.nosotros__lead{font-size:18.5px}
.nosotros__foto{margin:0}
.nosotros__foto>div{background:var(--arena);aspect-ratio:4/5;overflow:hidden}
.nosotros__foto img{width:100%;height:100%;object-fit:cover}
.contacto{padding:80px var(--lado)}
.contacto h2{font-size:clamp(28px,3.4vw,46px);color:var(--terra);margin-bottom:14px}
.contacto>p{max-width:560px;margin-bottom:40px}
.contacto__rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.contacto__rejilla>div{border-top:1px solid var(--linea);padding-top:18px}
.contacto h3{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--terra-osc);margin-bottom:8px;line-height:1.4}
.contacto__numero{font-family:var(--serif);font-size:28px;line-height:1.2;margin:0 0 14px}

/* Estados y páginas especiales */
.estado{max-width:620px}
.estado h2,.estado h1{font-size:clamp(28px,3vw,38px);margin-bottom:12px}
.estado--pagina{padding:80px var(--lado) 110px}
.pagina-estado{padding:80px var(--lado);display:flex;flex-direction:column;gap:22px;min-height:400px;justify-content:center}
.pagina-estado h1{font-size:clamp(36px,5.4vw,64px);font-weight:700;line-height:1.04}
.pagina-estado p{margin:0;max-width:500px}
.pagina-estado__codigo{font-size:14px}

/* Legal */
.legal{display:grid;grid-template-columns:240px 1fr;gap:72px;padding:56px var(--lado) 88px;align-items:start}
.legal__indice{position:sticky;top:88px}
.legal__indice-titulo{font-size:14px;color:var(--terra-osc);font-weight:500;margin-bottom:4px}
.legal__indice ul{list-style:none;margin:0;padding:0}
.legal__indice a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid rgba(43,29,21,.15)}
.legal__texto{max-width:760px}
.legal__texto section{padding-bottom:36px}
.legal__texto h2{font-size:30px;color:var(--terra);margin-bottom:14px}
.legal__fecha{font-size:14px;color:var(--suave)}
.aviso-borrador{background:var(--arena);padding:14px 16px;border-left:4px solid var(--terra);font-size:15px}
.tabla-scroll{overflow-x:auto;margin-bottom:1em}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;background:var(--arena);font-weight:500}
th,td{padding:10px 12px;border-bottom:1px solid rgba(43,29,21,.15);vertical-align:top}

/* Pie */
.pie{padding:64px var(--lado) 32px;font-size:15.5px}
.pie__rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
.pie__marca img{height:50px;width:auto;margin-bottom:16px}
.pie__marca p{max-width:290px}
.pie__titulo{font-family:var(--sans);font-size:14px;font-weight:500;margin-bottom:10px;line-height:1.4}
.pie p{margin:0 0 4px}
.pie a{text-decoration:underline;text-underline-offset:3px}
.pie__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:18px;border-top:1px solid rgba(255,246,236,.35);font-size:14px}
.pie__enlaces{display:flex;gap:24px;flex-wrap:wrap}
.pie__enlaces a,.pie__enlaces .enlace-boton{padding:8px 0}

/* Banner de cookies propio (RF-17): los tres botones pesan igual */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:0 20px 20px;pointer-events:none}
.cookies[hidden]{display:none}
.cookies__caja{pointer-events:auto;max-width:1060px;margin:0 auto;background:var(--sobre);color:var(--tinta);border:2px solid var(--tinta);border-radius:2px;padding:22px 26px;display:flex;gap:28px;align-items:center;box-shadow:0 10px 30px rgba(43,29,21,.25);animation:sube .4s var(--ease)}
.cookies__caja[hidden]{display:none}
.cookies__caja--config{flex-direction:column;align-items:stretch;gap:0;max-width:620px}
.cookies h2{font-size:22px;margin-bottom:6px}
.cookies p{margin:0;font-size:15.5px;line-height:1.5}
.cookies a{text-decoration:underline;text-underline-offset:3px}
.cookies__texto{flex:1}
.cookies__botones{display:flex;gap:10px;flex:none;width:490px;max-width:100%}
.cookies__caja--config .cookies__botones{width:100%;margin-top:22px}
.cookies__boton{flex:1;min-height:50px;border:2px solid var(--tinta);background:var(--sobre);color:var(--tinta);font:500 15.5px var(--sans);border-radius:2px;padding:0 14px;transition:background .15s,color .15s}
.cookies__boton:hover{background:var(--tinta);color:var(--sobre)}
.cookies__fila{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0;border-bottom:1px solid rgba(43,29,21,.2)}
.cookies__fila strong{display:block;font-weight:500}
.cookies__fila span{font-size:14.5px;color:var(--suave)}
.cookies__fijo{font-size:14.5px;flex:none}
.cookies__interruptor{appearance:none;flex:none;width:52px;height:30px;border:2px solid var(--tinta);border-radius:999px;background:var(--sobre);position:relative;margin:0}
.cookies__interruptor::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--tinta);transition:transform .15s}
.cookies__interruptor:checked{background:var(--tinta)}
.cookies__interruptor:checked::after{background:var(--sobre);transform:translateX(22px)}

/* Movimiento (MOTION 2). Cada efecto tiene un motivo:
   - entrada de la portada y revelado al hacer scroll: guían la mirada de arriba hacia abajo;
   - efectos al pasar el cursor: confirman qué es pulsable;
   - la franja del patrón avanza muy despacio: es el motivo de la marca, no decoración suelta;
   - todo se apaga con prefers-reduced-motion. */
@keyframes sube{from{transform:translateY(22px)}to{transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@keyframes deriva{to{background-position-x:192px}}
/* La entrada de la portada solo mueve (no oculta): el texto y la foto principales se pintan de inmediato y no retrasan la carga percibida. */
@keyframes entra{from{transform:translateY(14px)}to{transform:none}}
.portada__texto>*{animation:entra .6s var(--ease) both}
.portada__texto>*:nth-child(2){animation-delay:.08s}
.portada__texto>*:nth-child(3){animation-delay:.16s}
.franja{animation:deriva 24s linear infinite}
@view-transition{navigation:auto}
@supports (animation-timeline:view()){
  [data-reveal]{animation:sube linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .portada__marco img{animation:parallax linear both;animation-timeline:scroll(root);animation-range:0 700px}
  @keyframes parallax{to{transform:translateY(36px) scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  @view-transition{navigation:none}
  [data-reveal]{transform:none!important}
}

/* Pantallas anchas: no estirar más allá del ancho de lectura */
@media (min-width:1700px){body{font-size:16.5px}}

/* Móvil y tablet */
@media (max-width:1060px){
  .nav-principal{gap:20px}
  .cabecera__wa span{display:none}
  .cabecera__wa{min-width:46px;padding:0}
  .rejilla--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-principal,.cabecera__wa{display:none}
  .boton-menu{display:flex}
  .cabecera{padding:12px 20px}
  .logo img,.es-scroll .logo img{height:38px}
  .portada{grid-template-columns:1fr;min-height:0}
  .portada__texto{padding:32px 20px;gap:18px}
  .portada__bloque{padding:0 20px 28px}
  .portada__marco{min-height:300px;aspect-ratio:4/3}
  .seccion{padding:52px 20px 20px}
  .seccion--lista{padding:40px 20px 56px}
  .familias{grid-template-columns:1fr;grid-template-rows:none}
  .familia--grande{grid-row:auto;min-height:0}
  .familia--grande .familia__texto{padding:28px 20px 0}
  .familia__minis{padding:20px}
  .familia__texto{padding:24px 20px}
  .familia--foto{grid-template-columns:1fr 40%}
  .novedad{grid-template-columns:1fr;margin-top:32px;height:auto}
  .novedad__foto{aspect-ratio:4/3}
  .novedad__texto{padding:32px 20px 40px}
  .rejilla{gap:28px 14px}
  .rejilla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarjeta__nombre{font-size:18px}
  .tarjeta-cta{grid-column:1/-1;min-height:0}
  .tarjeta-cta p{font-size:24px}
  .quienes{padding:52px 20px}
  .quienes__rejilla,.conversa,.encabezado__rejilla,.nosotros,.legal,.ficha{grid-template-columns:1fr;gap:26px}
  .quienes__texto{padding-top:0}
  .conversa{padding-bottom:52px}
  .chat{padding:20px 16px}
  .chat__globo{max-width:280px;font-size:15px}
  .encabezado{padding:28px 20px 36px}
  .encabezado--texto{padding:36px 20px 44px}
  .encabezado h1{font-size:40px}
  .encabezado--texto h1{font-size:34px;line-height:1.06}
  .migas{margin-bottom:14px}
  .ficha{padding:14px 20px 52px}
  .ficha h1{font-size:36px}
  .ficha__detalles{grid-template-columns:104px 1fr;font-size:15px}
  .otras{padding:44px 20px}
  .nosotros{padding:36px 20px}
  .contacto{padding:44px 20px}
  .contacto__rejilla{grid-template-columns:1fr;gap:22px}
  .legal{padding:24px 20px 52px}
  .legal__indice{position:static}
  .legal__texto h2{font-size:26px}
  .pie{padding:40px 20px 32px}
  .pie__rejilla{grid-template-columns:1fr;gap:20px}
  .pie__base{margin-top:24px}
  .pagina-estado{padding:44px 20px}
  .estado--pagina{padding:44px 20px 68px}
  .wa-flotante{height:56px;min-width:56px}
  .cookies{padding:0}
  .cookies__caja{flex-direction:column;align-items:stretch;gap:12px;padding:18px 20px 22px;border-width:2px 0 0;max-width:none}
  .cookies__caja--config{max-width:none}
  .cookies__botones{flex-direction:column;width:100%;gap:10px}
}
@media (max-width:420px){.rejilla--4{gap:26px 12px}.ficha__miniaturas{grid-template-columns:repeat(4,minmax(0,1fr))}}