/* Estilos de las páginas públicas (las que no son la app). Se generan con herramientas/escribir-paginas.mjs, pero este archivo se edita a mano: no lo pisa nadie. Colores tomados de la app para que no parezca otro sitio. Sin código, sin dependencias, sin nada externo salvo las tipografías de Google — que ya usa la app y que _headers permite. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* FONDO BLANCO, pedido por Fernando el 31/08/2026 con la captura de /sostener/: la hoja deja de ser una tarjeta flotando sobre el verde de la app y pasa a ser la página entera, blanca y plana. El verde queda en la barra de navegación y el pie; el resto respira en blanco. */ body{margin:0;background:#fff;color:#24312A;font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;line-height:1.6;font-size:17px} .col{max-width:820px;margin:0 auto;padding:0 clamp(14px,4vw,28px);width:100%} a{color:#566A2C} a:hover{color:#37451C} :focus-visible{outline:2.5px solid #EDA50C;outline-offset:2px;border-radius:6px} .cab{background:#4a4a4a;padding:18px 0 20px} .logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.03em;color:#fff;line-height:1;text-decoration:none;display:inline-block} .logo b{color:#B4D200;font-weight:800} .logo:hover{color:#fff} .lema{color:#d9d9d9;font-size:13.5px;font-weight:500;margin:4px 0 0} /* LA BARRA ES OPACA, y esto no es un detalle de gusto. Estuvo en rgba(237,243,225,.92) desde que se escribió, sin ningún backdrop-filter detrás: ese 8% de transparencia no difumina nada — deja pasar el texto de la página, que se ve corriendo por debajo de los enlaces mientras uno baja. En las páginas cortas casi no se nota; en /prensa/, que es larga, se lee media frase fantasma atrás del menú. Una barra fija tapa lo que hay debajo o no es una barra. */ .nav{background:#EDF3E1;border-bottom:1px solid #e2e8d5;position:sticky;top:0;z-index:5} .nav .col{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:11px;padding-bottom:11px} .nav a{font-size:14px;font-weight:700;color:#566A2C;text-decoration:none} .nav a:hover{text-decoration:underline} .nav .abrir{margin-left:auto;background:#EDA50C;color:#3a2703;padding:8px 15px;border-radius:999px;font-weight:800;font-size:13.5px} .nav .abrir:hover{background:#d99400;color:#3a2703;text-decoration:none} /* EL AIRE DE LA HOJA — y por qué el selector es main.col Y NO main. El 31/08/2026 Fernando avisó DOS VECES que el título quedaba pegado a la barra y el botón final pegado al pie, y las dos veces se subió este número sin que cambiara nada en la pantalla. El motivo: main lleva la clase col, y «.col{padding:0 ...}» le GANA a «main{...}» por especificidad — una clase pesa más que un elemento, sin importar el orden. O sea que este relleno llevaba muerto desde el primer día, con su número prolijo en el archivo. Se vio midiendo el estilo COMPUTADO en el navegador (daba 0), no leyendo el CSS; la prueba de las páginas ahora mide eso mismo. Solo el relleno vertical: el horizontal lo sigue dando .col. */ main.col{padding-top:clamp(52px,7vw,68px);padding-bottom:clamp(66px,9vw,88px)} /* Sin tarjeta: sobre blanco, el borde y la sombra eran el disfraz de otra época. El contenido se alinea con la navegación (el .col ya da el margen). */ .hoja{background:none;border:0;border-radius:0;box-shadow:none;padding:0} .hoja h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(27px,5vw,38px);line-height:1.08;letter-spacing:-.02em;color:#3c3c3c;margin:0} .bajada{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(16px,2.6vw,20px);color:#566A2C;margin:13px 0 0;line-height:1.35} .hoja h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(20px,3vw,24px);letter-spacing:-.01em;color:#37451C;margin:42px 0 0;line-height:1.2} .hoja h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17.5px;color:#37451C;margin:24px 0 0} .hoja p{margin:12px 0 0;color:#4a4a42} .hoja ul,.hoja ol{margin:12px 0 0;padding-left:22px;color:#4a4a42} .hoja li{margin:7px 0} .hoja strong,.hoja b{color:#37451C} hr{border:0;border-top:1px solid #eef1e6;margin:34px 0 0} /* La tarjeta de los tres pasos, igual que en la portada */ .pasos{display:flex;flex-wrap:wrap;gap:18px;margin:20px 0 0;padding:0;list-style:none} .pasos li{flex:1 1 180px;background:#f8faf3;border:1px solid #e9efdc;border-radius:14px;padding:16px;margin:0} .pasos img{height:56px;width:auto;display:block;margin-bottom:8px} .pasos b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;color:#37451C} .pasos span{display:block;font-size:14.5px;color:#6d7a68;margin-top:3px} /* Fichas de dos columnas (mares, corrientes) */ .fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none} .fichas li{background:#f8faf3;border:1px solid #e9efdc;border-radius:12px;padding:13px 15px;margin:0;font-size:15px;color:#4a4a42} .fichas b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;color:#37451C;margin-bottom:2px} /* Preguntas frecuentes: abiertas de entrada, porque un robot no hace clic */ .faq{margin:14px 0 0} .faq dt{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16.5px;color:#37451C;margin:20px 0 0} .faq dd{margin:6px 0 0;color:#4a4a42} .aviso{background:#fbfdf7;border:1.5px dashed #cdd8b4;border-radius:14px;padding:16px 18px;margin:22px 0 0} .aviso p{margin:6px 0 0} .aviso p:first-child{margin:0} .cta{margin:44px 0 14px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px} /* La fila de imagen y texto integrados. Nació en /que-es/ y el 31/08/2026 pasó a ser LA forma de poner una imagen en cualquier página: Fernando pidió que ninguna quede como cartel suelto entre párrafos (reemplazó a la viñeta centrada, que se retiró entera). La imagen va SIEMPRE al costado del texto, alternando lados — en móvil también. En pantallas angostas se achica con dos topes (ancho de pantalla y alto) para que el texto conserve el ancho; los width/height del HTML siguen puestos para que nada salte mientras carga. */ .paso{display:flex;align-items:center;gap:clamp(14px,3.5vw,22px);margin:28px 0 0;text-align:left} .paso:nth-child(even){flex-direction:row-reverse} .paso img{flex:none} .paso .frente{display:flex;gap:14px;align-items:center;flex:none} .paso div{min-width:0} .paso p{margin:0} @media(max-width:639px){ .paso img{width:auto;height:auto;max-width:27vw;max-height:96px} .paso .frente{gap:7px} .paso .frente img{max-width:13vw} } .pares{list-style:none;margin:16px 0 0;padding:0} .pares li{border:1px solid #e9efdc;background:#f8faf3;border-radius:12px;padding:12px 16px;margin:9px 0 0;font-size:15.5px;color:#6d7a68} .pares b{color:#37451C;display:inline} .pares .flecha{color:#9db89a;padding:0 6px} .botellareal{border:1.5px dashed #cdd8b4;background:#fbfdf7;border-radius:16px;padding:18px 20px;margin:26px 0 0} .botellareal .mata{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#707861;margin:0} .botellareal .texto{font-family:'Bricolage Grotesque',sans-serif;font-size:17.5px;color:#3c3c3c;margin:8px 0 0;line-height:1.5} .botellareal .nota{font-size:13.5px;color:#6d7a68;margin:10px 0 0} .cierre{font-style:italic;color:#6d7a68;font-size:14.5px;text-align:center;margin:40px 0 0} .quees .cta a{display:block;text-align:center;background:#EDA50C;color:#3a2703;border-radius:999px;padding:15px 22px;text-decoration:none;box-shadow:0 10px 22px -12px rgba(237,165,12,.9)} .quees .cta a:hover{filter:brightness(1.04)} /* Los mares con su dibujo, en las fichas de Cómo funciona. */ .fichas img{display:block;height:64px;width:auto;margin-bottom:7px} /* Sostener el mar: el botón del aporte con el estilo de la casa (el mismo del botón principal de /b/), y el texto chico de al lado. Nada externo. */ .boton-aporte{display:inline-block;text-align:center;text-decoration:none;border-radius:999px;padding:13px 26px;font-weight:800;font-size:15px;background:#EDA50C;color:#3a2703;box-shadow:0 10px 22px -12px rgba(237,165,12,.9)} .boton-aporte:hover{filter:brightness(1.04)} .aporte{margin:26px 0 6px} .firma{color:#5d6a55;font-style:italic} .hoja .chico{font-size:13px;color:#6d7a68;margin-top:4px} /* El índice de secciones que queda fijo al hacer scroll (03/09/2026, pedido de Fernando). Hoy lo usa /prensa/, que es la única página larga con anclas: un periodista salta entre secciones y no tiene por qué volver arriba cada vez. POR QUÉ EL «top» NO ES CERO. La barra de navegación YA es sticky en top:0, así que este índice tiene que pegarse DEBAJO de ella o queda tapado. Su alto está medido en el navegador, no estimado: 61px de 480px para arriba y 89px por debajo, donde el botón «Abrir Seabottles» se va a un segundo renglón. Si algún día cambia el alto de la barra, esto se corre solo si alguien vuelve a medir — y hay una prueba de navegador que lo mira, para que no haya que acordarse. NO SE ARRASTRA DE COSTADO. La primera versión lo dejaba en un renglón con «overflow-x:auto», para que no se comiera media pantalla de teléfono. Se veía la barra de arrastre gris debajo del menú y Fernando la rechazó, con razón: un menú que esconde la mitad de sus opciones detrás de un gesto que nadie anuncia no es un menú corto, es un menú incompleto. La cuenta además no daba lo que parecía — tres renglones eran 62px y uno son 40, así que el ahorro real era de 22px de una pantalla de 700. Se pagaba caro y barato a la vez. LO QUE HACE AHORA: es una fila que se envuelve, con la misma gramática que la barra de navegación de arriba —enlaces sin subrayado, en negrita, con aire entre ellos y sin puntos de separación—, para que se lea como su hermana chica y no como un párrafo con guiones. Sin los «·» y sin la palabra «Secciones» adelante entra en dos renglones en un teléfono en vez de tres, y en uno solo de 480px para arriba. La palabra sigue estando para quien no ve la pantalla, en el aria-label del