/* ========================================================================= Clorofila — sistema de diseño "invernadero de noche" El fondo es verde tinta, no papel crema: las fotos del estudio, que son todas nocturnas y de luz cálida, pasan a ser la fuente de luz de la página. ========================================================================= */ /* Respaldos con medidas ajustadas. Mientras Karla y Bricolage bajan de Google Fonts, el texto se dibuja con Arial (o Roboto en Android) estirada al ancho y al alto de línea de la fuente web: cuando la web llega, las líneas no cambian de largo y la página no salta (CLS). Los porcentajes salen de comparar las métricas de cada fuente con las de Arial y Roboto. Cada una lleva su propio nombre: con el mismo nombre para las dos, el navegador se queda solo con la última (Roboto), y en iPhone y Mac, que no la tienen, no quedaba ningún respaldo ajustado. Primero va la de Android; donde no hay Roboto se salta a la de Arial. */ @font-face{ font-family:'Karla Fallback'; src:local('Arial'); size-adjust:102.4%;ascent-override:89.55%;descent-override:24.61%;line-gap-override:0%; } @font-face{ font-family:'Karla Fallback Android'; src:local('Roboto'); size-adjust:102.62%;ascent-override:89.35%;descent-override:24.56%;line-gap-override:0%; } @font-face{ font-family:'Bricolage Grotesque Fallback'; src:local('Arial'); size-adjust:105.43%;ascent-override:88.21%;descent-override:25.61%;line-gap-override:0%; } @font-face{ font-family:'Bricolage Grotesque Fallback Android'; src:local('Roboto'); size-adjust:105.66%;ascent-override:88.02%;descent-override:25.55%;line-gap-override:0%; } :root{ /* Color */ --tinta:#0E1A13; /* fondo */ --tinta-2:#132217; /* fondo alterno */ --musgo:#17281D; /* superficies elevadas */ --musgo-alto:#1E3324; /* superficie sobre superficie */ --linea:rgba(244,241,233,.14); --linea-fuerte:rgba(244,241,233,.28); --cal:#F4F1E9; /* texto principal */ --cal-med:rgba(244,241,233,.72); --cal-baja:rgba(244,241,233,.54); --brote:#8FC08A; /* verde vivo: señales, foco */ --fermento:#E271A0; /* magenta de remolacha: el acento */ --fermento-hondo:#C2456E; --miel:#F0B355; /* ámbar de la luz del estudio: datos */ /* Tipografía */ /* Bricolage Grotesque es una grotesca sans; el respaldo era Times New Roman, una serif. Mientras la fuente carga —y para quien bloquea Google Fonts— todos los títulos del sitio salían en otra familia y con otro carácter. Medido sobre el h1 de la portada: Times da 708 px donde Bricolage da 828 (-14,5%, un salto visible al cambiar); Helvetica Neue da 816 (-1,4%). */ --display:'Bricolage Grotesque','Bricolage Grotesque Fallback Android','Bricolage Grotesque Fallback','Helvetica Neue',Arial,sans-serif; --texto:'Karla','Karla Fallback Android','Karla Fallback',system-ui,sans-serif; --dato:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace; /* Medidas */ --max:1200px; --max-texto:68ch; --r:4px; --r-lg:6px; /* Escala tipográfica. Antes había 69 valores distintos de font-size declarados en el sitio, y once de ellos caían entre 13,6 y 15,7px: dos píxeles repartidos en once tamaños que nadie puede distinguir, pero que hacen que la página se lea como armada por acumulación. Son siete pasos, con razón pareja entre 1,09 y 1,16. Si hace falta un cuerpo nuevo, se agrega un paso acá y no un decimal suelto en una página. */ --t-dato:.75rem; /* 12px — letra de máquina de la comanda, rótulos */ --t-nota:.82rem; /* 13,1 — notas, pies de foto, etiquetas, letra chica */ --t-chico:.95rem; /* 15,2 — cuerpo secundario, listas densas */ --t-cuerpo:1.0625rem; /* 17 — el cuerpo del sitio */ --t-bajada:1.2rem; /* 19,2 — bajadas y entradas */ --t-alto:1.35rem; /* 21,6 — tesis del hero, remates */ --t-mayor:1.5rem; /* 24 — el escalón más grande que no es título */ --t-tesis:clamp(1.1rem,1.9vw,1.4rem); /* 22,4 — la tesis del hero, los remates y las citas cortas */ /* Títulos. Antes había once expresiones distintas para «el título de una página» y ocho para «el título de una sección»: nadie decidió que el de /sobre midiera 4rem y el de /programa 3,2. El resultado medido era que en /curso el h1 salía a 40px y sus h2 a 51,2 —el título de la página más chico que los subtítulos de abajo— y en /tapeo quedaban empatados. Cinco pasos, y la portada es la única que puede llevar el más grande. */ --th-portada:clamp(2.4rem,5.4vw,3.9rem); /* 62,4 máx. — sólo la portada */ --th-pagina:clamp(2.1rem,4.3vw,3.1rem); /* 49,6 — el título de una página */ --th-seccion:clamp(1.5rem,2.9vw,2.15rem);/* 34,4 — el título de una sección */ --th-sub:clamp(1.35rem,2.4vw,1.8rem); /* 28,8 — subtítulo dentro de un texto */ --th-bloque:clamp(1.2rem,2vw,1.5rem); /* 24 — el título de un bloque */ --nav-h:68px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* Los anclajes no quedan tapados por la barra pegada. */ [id]{scroll-margin-top:calc(var(--nav-h) + 1rem)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ background:var(--tinta); color:var(--cal-med); font-family:var(--texto); font-size:var(--t-cuerpo); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;height:auto;outline:1px solid rgba(244,241,233,.08);outline-offset:-1px} ul{list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ::selection{background:var(--fermento-hondo);color:#fff} :focus{outline:0} :focus-visible{outline:2px solid var(--brote);outline-offset:3px;border-radius:3px} /* --- Tipografía --------------------------------------------------------- */ h1,h2,h3{ font-family:var(--display); font-weight:500; font-variation-settings:'wdth' 100,'opsz' 24; color:var(--cal); line-height:1.02; letter-spacing:-.025em; text-wrap:balance; } h1{font-size:var(--th-pagina);letter-spacing:-.04em} h2{font-size:var(--th-seccion);letter-spacing:-.03em} h3{font-size:var(--th-bloque);letter-spacing:-.02em} p{max-width:var(--max-texto);text-wrap:pretty} li,blockquote{text-wrap:pretty} /* Sin color: el rosa es el estado «últimos lugares» y nada más. Pintando también las itálicas, «Clostridium botulinum» salía del mismo color que una alerta de cupo y el acento dejaba de querer decir algo. */ em{font-style:italic} strong{color:var(--cal);font-weight:600} /* El dato: fechas, precios, horarios, etiquetas. En versalitas monoespaciadas esto se leía como una etiqueta de sistema. Una fecha que invita a una cena se escribe como se dice. */ .dato{ font-family:var(--texto); font-size:var(--t-chico); letter-spacing:0; color:var(--miel); font-weight:600; } /* La señal: lo que sitúa a la sección antes del título. Estaba en versalitas monoespaciadas con una rayita al costado, que es el gesto con el que se reconoce una plantilla. Ahora es una voz: minúscula, la misma letra del texto, sin adornos. */ .senal{ display:block; font-family:var(--texto);font-size:var(--t-chico);font-weight:500; letter-spacing:0;color:var(--cal-baja); margin-bottom:.5rem; } /* --- Estructura --------------------------------------------------------- */ .env{max-width:var(--max);margin:0 auto;padding-inline:clamp(1.25rem,4vw,2.5rem)} .seccion{padding-block:clamp(4rem,9vw,7.5rem)} .seccion-sm{padding-block:clamp(2.5rem,5vw,4rem)} .borde-sup{border-top:1px solid var(--linea)} /* El contenido se acerca a su propio filete y se aleja del siguiente bloque: arriba menos aire que abajo. Con el mismo aire a los dos lados, cada filete quedaba flotando en el medio de 15rem de nada. */ .seccion.borde-sup{padding-top:clamp(2.75rem,6vw,5rem)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .saltar{position:absolute;left:-9999px} .saltar:focus{position:fixed;top:0;left:0;z-index:9999;background:var(--brote);color:var(--tinta);padding:.75rem 1.5rem;font-weight:600} /* --- Botones ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.6rem;border-radius:var(--r); font-family:var(--texto);font-size:var(--t-chico);font-weight:600;letter-spacing:.01em; transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s; min-height:48px; } /* En el teléfono no hay hover: al tocar el botón no pasaba nada hasta que cambiaba la página, y con WhatsApp esa espera se siente. El brillo baja apenas mientras el dedo está apoyado, y sirve igual con el movimiento reducido porque no es movimiento. */ .btn:active{filter:brightness(.92)} .btn-primario{background:var(--miel);color:#20140A} .btn-primario:hover{background:#F7C273} .btn-linea{border:1.5px solid var(--linea-fuerte);color:var(--cal)} .btn-linea:hover{border-color:var(--cal);background:rgba(244,241,233,.06)} .btn-claro{background:var(--cal);color:var(--tinta)} .btn-claro:hover{background:#fff} /* --- Navegación --------------------------------------------------------- */ .nav{ position:sticky;top:0;z-index:100;height:var(--nav-h); /* Opaca, no de vidrio esmerilado. La barra nunca se monta sobre el hero —sticky reserva su lugar en el flujo—, así que el desenfoque sólo se veía mientras algo pasaba por debajo al scrollear, y a cambio creaba un contenedor de posicionamiento que encerraba al menú del celular dentro de los 68px de la barra. Sólida es una cabecera impresa y no hay que apagarla en ningún estado. */ background:var(--tinta); border-bottom:1px solid transparent;transition:border-color .3s; } .nav.pegada{border-bottom-color:var(--linea)} .nav-caja{max-width:var(--max);margin:0 auto;height:100%;padding-inline:clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;justify-content:space-between;gap:2rem} .marca{display:flex;flex-direction:column;line-height:1;flex-shrink:0} .marca b{font-family:var(--display);font-size:var(--t-alto);font-weight:600;color:var(--cal);letter-spacing:-.02em} .marca span{font-family:var(--texto);font-size:var(--t-dato);letter-spacing:.01em;color:var(--cal-baja);margin-top:.2rem} .nav-links{display:flex;align-items:center;gap:1.25rem;flex:1} /* "Inicio" solo en el menú del celular. En la compu el logo de arriba a la izquierda ya lleva al home, pero acá el menú abierto ocupa toda la pantalla y lo tapa: sin este ítem no había forma de volver sin cerrar el menú. */ .solo-menu{display:none} .nav-links a{font-size:var(--t-nota);color:var(--cal-med);transition:color .2s;position:relative;padding-block:.35rem;white-space:nowrap} .nav-links a:hover,.nav-links a[aria-current]{color:var(--cal)} .nav-links a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brote)} /* Los ocho enlaces pesaban lo mismo: el curso de $12.200 se leía igual que la página de consultoría. Ahora los tres que se reservan quedan pegados a la marca, y los cuatro que se leen se van al otro extremo, más chicos. El margen automático abre el hueco cuando sobra lugar y se rinde a 2rem cuando no, así los dos grupos nunca se tocan. */ .nav-corte{margin-left:auto;padding-left:2rem} .nav-sec a{font-size:var(--t-nota);color:var(--cal-baja)} .nav-sec a:hover,.nav-sec a[aria-current]{color:var(--cal)} .nav-cta{background:var(--cal);color:var(--tinta)!important;padding:.5rem 1.1rem!important;border-radius:var(--r);font-weight:600;font-size:var(--t-nota)!important} .nav-cta:hover{background:#fff} /* El ☰ y la ✕ dibujados con el mismo filete de 1,5px del resto del sitio, en vez de los dos caracteres tipográficos, que venían con el peso y el ancho que les daba la fuente. Abrir son dos rayas; cerrar, las mismas cruzadas. */ .hamburguesa,.cerrar-menu{display:none;position:relative;font-size:0;color:transparent;min-width:44px;min-height:44px} .hamburguesa::before,.hamburguesa::after, .cerrar-menu::before,.cerrar-menu::after{content:"";position:absolute;left:50%;width:22px;height:1.5px;background:var(--cal);transition:background .2s} .hamburguesa::before{transform:translateX(-50%);top:calc(50% - 4px)} .hamburguesa::after{transform:translateX(-50%);top:calc(50% + 2.5px)} .cerrar-menu::before{top:50%;transform:translate(-50%,-50%) rotate(45deg)} .cerrar-menu::after{top:50%;transform:translate(-50%,-50%) rotate(-45deg)} @media (max-width:999px){ .nav-links{display:none} .hamburguesa{display:block} /* El menú deja de ser una lista centrada en el medio de la pantalla y pasa a ser el índice del sitio: alineado a la izquierda, una fila por línea separadas por filete, y con las cuatro de leer en cuerpo chico abajo. Arranca a la altura de la barra para que la ✕ caiga exactamente donde estaba el ☰ y el dedo no tenga que buscarla. */ .nav-links.abierto{display:flex;position:fixed;inset:0;background:var(--tinta);z-index:210;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:var(--nav-h) clamp(1.25rem,4vw,2.5rem) 1.5rem;overflow-y:auto} .nav-links.abierto .solo-menu{display:block} .nav-links.abierto li+li{border-top:1px solid var(--linea)} .nav-links.abierto a{display:flex;align-items:center;min-height:50px;font-family:var(--display);font-size:var(--t-mayor);color:var(--cal)} /* En columna, el margen automático que abre el hueco en la compu empuja el ítem contra el borde derecho y le come el filete: acá no corresponde. */ .nav-links.abierto .nav-corte{margin-left:0;padding-left:0;margin-top:.6rem} .nav-links.abierto .nav-sec a{font-family:var(--texto);font-size:var(--t-cuerpo);color:var(--cal-med);min-height:44px} /* El botón de reservar no es una fila más del índice: se despega, ocupa el ancho y es lo único lleno de la pantalla. */ .nav-links.abierto li:last-child{border-top:0;margin-top:1.25rem} .nav-links.abierto .nav-cta{justify-content:center;font-size:var(--t-cuerpo)!important;padding:.85rem 1.5rem!important;font-family:var(--texto)} body.menu-abierto .cerrar-menu{display:block;position:fixed;top:calc((var(--nav-h) - 44px) / 2);right:clamp(1.25rem,4vw,2.5rem);z-index:211} } /* --- Pie --------------------------------------------------------------- */ .pie{border-top:1px solid var(--linea);padding-block:clamp(3rem,6vw,5rem) 2rem;background:var(--tinta-2)} .pie-caja{max-width:var(--max);margin:0 auto;padding-inline:clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem} .pie h2{font-family:var(--texto);font-size:var(--t-nota);font-weight:600;letter-spacing:0;color:var(--cal-med);margin-bottom:.85rem} .pie li+li{margin-top:.3rem} .pie li a{font-size:var(--t-chico);color:var(--cal-med);display:inline-block;padding-block:.25rem;transition:color .2s} .pie li a:hover{color:var(--cal)} .pie .marca{margin-bottom:.2rem} .pie-lema{font-family:var(--display);font-size:var(--t-bajada);color:var(--cal);line-height:1.25;margin-block:.6rem 1rem;max-width:22ch} .pie-fin{max-width:var(--max);margin:2.5rem auto 0;padding-inline:clamp(1.25rem,4vw,2.5rem);padding-top:1.5rem;border-top:1px solid var(--linea);font-family:var(--texto);font-size:var(--t-nota);color:var(--cal-baja);letter-spacing:0} .pie-fin a{display:inline-block;padding-block:.35rem} /* La dirección del pie lleva a /contacto, donde está el mapa: cómo llegar es lo que más se busca de Clorofila. Sin subrayado no se veía que fuera un enlace, y el color es el mismo del texto de al lado. */ /* El enlace de la dirección ocupa su propio párrafo, así que no entra en la excepción de WCAG para enlaces dentro de una oración: medía 17px de alto contra los 24 que pide el criterio de tamaño mínimo. El padding lo lleva a 25 sin mover nada de lo que hay alrededor. */ .pie .dato a{color:inherit;text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:3px;display:inline-block;padding-block:4px} .pie .dato a:hover{text-decoration-color:var(--brote)} /* Un h2 seguido directo de un párrafo quedaba sin aire: en la portada, el título del curso arrancaba pegado a su texto —0px de separación, contra los 11 de las secciones que usan .bajada—, y en el celular se lee apretado. Los márgenes verticales entre hermanos colapsan, así que esto solo levanta los que están en cero y no toca los que ya tienen aire. */ h2 + p{margin-top:.55rem} @media (max-width:760px){.pie-caja{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}} /* --- Navegación entre páginas ------------------------------------------- Cada clic a otra página parpadeaba en blanco. Es un sitio de varias páginas estáticas, que es el caso para el que se hizo esto: el navegador funde una con la otra y la navegación deja de cortar. No es un efecto agregado, es lo que pasa al moverse; por eso respeta a quien pidió menos movimiento y los navegadores que no lo soportan siguen navegando como siempre. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } } /* --- Entradas ----------------------------------------------------------- Cada sección entraba con un fade y un desplazamiento de 18px: 126 elementos haciendo lo mismo. Cuando todo se mueve, el movimiento deja de significar algo y se nota el efecto en vez del contenido. Queda un solo momento, al abrir la página, y el resto del sitio está quieto. */ .sube{opacity:1;transform:none} .hero .sube{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} .hero .sube.vista{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .hero .sube{opacity:1;transform:none;transition:none} } /* ========================================================================= Piezas compartidas por las páginas de venta. Vivían duplicadas en tapeo, curso y pastas; acá se definen una sola vez. ========================================================================= */ /* --- Encabezados de sección --- */ /* El encabezado no tenía ancho: el h2 corría los 1200px del contenedor mientras su propio párrafo medía 360, y la medida de cada párrafo estaba puesta a mano en el HTML, uno por uno, con siete valores distintos entre 46ch y 58ch. Ahora el título y su texto comparten una sola columna: el título en medida de titular, el párrafo en medida de lectura, y los dos terminan en la misma línea vertical. */ .encabezado{margin-bottom:2.25rem} .encabezado h2{margin-top:.8rem;max-width:26ch} .encabezado p{margin-top:.9rem;color:var(--cal-med);max-width:54ch} .centrado{text-align:center} .centrado p,.centrado h2{margin-inline:auto} .centrado .senal{justify-content:center} .enlace-vivo{color:var(--brote);font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s;display:inline-block;padding-block:.3rem} .enlace-vivo:hover{border-bottom-color:var(--brote)} /* --- Hero de página de producto --- */ .hero-prod{position:relative;overflow:hidden;padding-block:clamp(1.75rem,3.2vw,2.6rem) clamp(3rem,6vw,5rem)} .hero-caja{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:start} .hero-prod h1{font-size:var(--th-pagina);margin-block:.7rem .6rem;max-width:13ch;line-height:1.03} .hero-tesis{font-family:var(--display);font-size:var(--t-tesis);color:var(--brote);letter-spacing:-.02em;line-height:1.22;margin-bottom:.8rem} .hero-prod .bajada{color:var(--cal-med);font-size:var(--t-chico);max-width:46ch;margin-bottom:1.25rem} .hero-foto{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/6;margin-bottom:1.25rem} /* En pantalla grande la foto llega hasta el borde derecho: no es una tarjeta dentro de la caja, es la luz de la página. */ @media (min-width:941px){.hero-col-foto .hero-foto{margin-right:calc(-1 * (max(0px, (100vw - var(--max)) / 2) + clamp(1.25rem,4vw,2.5rem)));border-top-right-radius:0;border-bottom-right-radius:0}} .hero-foto img{width:100%;height:100%;object-fit:cover} /* Sin align-items, los chips se estiran a lo alto de su línea del flex: en /talleres, "Un día" salía como un óvalo vertical de 69x136 y el de reseñas con 72 de alto, cuando la píldora mide 37. Se ve en el celular, donde los chips van en varias líneas. */ /* Se llamaba solo "destacado", que es además el nombre del bloque de cita destacada de los artículos (más abajo en este archivo): el chip heredaba su borde izquierdo, sus esquinas rectas, 1.4rem de padding y 2rem de margen, y salía como un rectángulo del doble de alto que sus vecinos. */ /* Apilado en el celular, el hero de las páginas que venden una fecha se ordena de corrido: foto, título, propuesta, ficha de reserva, sellos y recién ahí la bajada. Antes los sellos viajaban con la columna de la foto y se metían entre la foto y el título, y el gap pensado para separar las dos columnas se sumaba entre cada elemento. Entre las dos cosas empujaban la fecha, el precio y el botón abajo del pliegue: justo lo que viene a buscar quien abre el link desde una conversación. El home y /sobre quedan afuera, su hero no lleva ficha. */ @media (max-width:940px){ .hero-caja{grid-template-columns:1fr} .hero-col-foto{order:-1} .hero-foto{aspect-ratio:4/3;margin-bottom:1.25rem} .hero-prod .hero-caja,.hero-curso .hero-caja,.hero-tapeo .hero-caja{gap:0} .hero-prod .hero-caja >div,.hero-curso .hero-caja >div,.hero-tapeo .hero-caja >div{display:contents} /* En el celular la foto abría la página y empujaba todo: en un teléfono de 812px el título caía en 430 y el precio en 713, o sea justo en el borde de lo que se ve sin scrollear. Ahora primero se dice qué es y recién después cuánto sale, con la foto abajo: el título sube a 163 y el precio a 446. El orden es eyebrow, título, tesis, ficha de reserva, foto. */ .hero-prod .hero-caja .senal,.hero-curso .hero-caja .senal,.hero-tapeo .hero-caja .senal{order:1} .hero-prod .hero-caja h1,.hero-curso .hero-caja h1,.hero-tapeo .hero-caja h1{order:2} .hero-prod .hero-caja .hero-tesis,.hero-curso .hero-caja .hero-tesis,.hero-tapeo .hero-caja .hero-tesis{order:3} .hero-prod .hero-caja .comanda,.hero-curso .hero-caja .comanda,.hero-tapeo .hero-caja .comanda{order:4;margin-top:1.25rem} .hero-prod .hero-caja .hero-foto,.hero-curso .hero-caja .hero-foto,.hero-tapeo .hero-caja .hero-foto{order:5;margin-top:1.5rem} .hero-prod .hero-caja .bajada,.hero-curso .hero-caja .bajada,.hero-tapeo .hero-caja .bajada{order:7;margin-top:1.25rem} /* Sin esto la línea de credenciales de /curso queda en order 0 y se va arriba de todo: en el celular lo primero que veía quien llegaba era "Aprendés directamente con Leonardo Lemes — 25 años…", antes que la foto y que el título de la página. */ .hero-curso .hero-caja .hero-leo{order:8;margin-top:1.25rem} } /* --- LA COMANDA --- El panel de reserva es la comanda de la cocina: papel térmico, mono y borde dentado. Es un objeto que existe de verdad en este estudio. */ .comanda{position:relative;background:var(--musgo);border:1px solid var(--linea);border-radius:4px;padding:1.25rem 1.3rem 1.2rem;box-shadow:0 26px 60px rgba(0,0,0,.45)} .comanda::before,.comanda::after{content:"";position:absolute;left:0;right:0;height:7px;background:radial-gradient(circle at 5px 0, transparent 0 5px, var(--musgo) 5.5px) 0 0/10px 7px repeat-x} .comanda::before{top:-6px;transform:rotate(180deg)} .comanda::after{bottom:-6px} .comanda-cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.75rem;border-bottom:1px dashed var(--linea-fuerte)} .comanda-titulo{font-family:var(--dato);font-size:var(--t-dato);letter-spacing:.16em;text-transform:uppercase;color:var(--cal-baja)} .comanda-estado{font-family:var(--dato);font-size:var(--t-dato);letter-spacing:.1em;text-transform:uppercase;color:var(--brote)} [data-estado="ultimos"] .comanda-estado{color:var(--fermento)} [data-estado="agotado"] .comanda-estado,[data-estado="sin-fecha"] .comanda-estado{color:var(--cal-baja)} .comanda-datos{margin-block:.75rem;display:grid;gap:.05rem} .comanda-datos li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.32rem;font-family:var(--dato);font-size:var(--t-nota);line-height:1.5} .comanda-datos li strong{color:var(--cal-baja);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:var(--t-dato);white-space:nowrap} .comanda-datos li span{color:var(--cal);text-align:right} .comanda-datos li a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linea-fuerte)} .comanda-datos li a:hover{text-decoration-color:var(--brote)} .comanda-precio span{color:var(--miel)!important;font-size:var(--t-cuerpo)} .comanda-acciones{display:grid;gap:.5rem;margin-top:1rem} .comanda-acciones .btn{width:100%;padding-inline:1.1rem} .comanda-nota{font-size:var(--t-dato);color:var(--cal-baja);line-height:1.5;margin-top:.8rem} /* Fechas seleccionables dentro de la comanda. */ .fechas-bloque{border-top:1px dashed var(--linea-fuerte);padding-top:.85rem;margin-top:.3rem} .fechas-titulo{font-family:var(--texto);font-size:var(--t-chico);font-weight:600;letter-spacing:0;color:var(--cal-med);margin-bottom:.7rem} .fechas{display:grid;gap:.4rem} .fechas a{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--linea);border-radius:var(--r);padding:.6rem .85rem;transition:border-color .2s,background .2s,transform .2s var(--ease);min-height:48px;justify-content:center} .fechas a:hover{border-color:var(--brote);background:rgba(143,192,138,.07)} .fechas strong{font-family:var(--texto);font-size:var(--t-chico);color:var(--cal);font-weight:600} .fechas span{font-family:var(--texto);font-size:var(--t-nota);color:var(--cal-med)} /* --- Bloque de dos columnas con foto --- */ .par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:center} .par-foto{border-radius:var(--r-lg);overflow:hidden} @media (max-width:820px){.par{grid-template-columns:1fr}} /* --- Objeción --- */ .objecion{max-width:720px;margin-inline:auto;border:1px solid rgba(143,192,138,.32);background:var(--musgo);border-radius:var(--r-lg);padding:clamp(1.6rem,3.5vw,2.6rem)} .objecion h2{font-size:var(--th-seccion);margin-bottom:1rem} .objecion h2 .no{color:var(--brote)} .objecion p{color:var(--cal-med)} .objecion p+p{margin-top:.8rem} /* --- Qué incluye --- */ .incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:1.75rem} .incluye li{border-top:1px solid var(--linea);padding-top:1rem} .incluye strong{display:block;font-family:var(--display);font-size:var(--t-cuerpo);color:var(--cal);letter-spacing:-.015em;margin-bottom:.35rem} .incluye span{font-size:var(--t-chico);color:var(--cal-med)} /* --- Testimonios --- */ .prueba{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1rem} .voz{border-top:1px solid var(--linea);padding:1.25rem 0 0;display:flex;flex-direction:column} /* Ficha de quien enseña. Estaba escrita dos veces, idéntica, en /curso y en /sobre. Era una tarjeta con borde, radio y fondo; ahora cuelga de su filete como el resto de la página. El punteado de adentro se queda: es el mismo gesto que el de la comanda. */ .docente{border-top:1px solid var(--linea);padding:1.3rem 0 0} .docente-foto{width:88px;height:110px;border-radius:var(--r);overflow:hidden;margin-bottom:1rem} .docente-foto img{width:100%;height:100%;object-fit:cover;display:block} .docente-rol{font-family:var(--texto);font-size:var(--t-nota);color:var(--miel);margin-bottom:.4rem} .docente h3{font-size:var(--th-bloque);margin-bottom:.9rem} .docente p{font-size:var(--t-chico);color:var(--cal-med)} .docente-formacion{margin-top:1.2rem;border-top:1px dashed var(--linea-fuerte);padding-top:1rem} .docente-formacion h4{font-family:var(--texto);font-size:var(--t-nota);font-weight:500;color:var(--cal-baja);margin-bottom:.6rem} .docente-formacion li{font-size:var(--t-nota);color:var(--cal-med);padding-block:.22rem;display:flex;gap:.6rem} .docente-formacion li::before{content:"·";color:var(--brote)} .voz blockquote{font-family:var(--display);font-size:var(--t-cuerpo);line-height:1.35;color:var(--cal);letter-spacing:-.01em;margin-bottom:.9rem} /* El nombre al pie de la columna: si no, cada cita lo dejaba a una altura distinta según cuántos renglones ocupara la frase. */ .voz cite{margin-top:auto;font-style:normal;font-family:var(--texto);font-size:var(--t-chico);font-weight:600;letter-spacing:0;color:var(--cal-med)} /* --- Preguntas frecuentes --- */ .faq{max-width:760px;margin-inline:auto} .faq-item{border-bottom:1px solid var(--linea)} /* El acordeón lo hace
: la respuesta se puede buscar con Ctrl+F, se puede enlazar directo, y el navegador cierra la anterior al abrir otra por el name compartido. Antes el texto tenía alto cero y buscar en la página no encontraba nada de lo que dicen las respuestas. */ .faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;text-align:left;padding:1.15rem 0;font-size:var(--t-cuerpo);color:var(--cal);font-weight:500;min-height:52px;cursor:pointer;list-style:none} .faq-q::-webkit-details-marker{display:none} .faq-icon{font-family:var(--dato);color:var(--brote);font-size:var(--t-cuerpo);flex-shrink:0;transition:transform .25s var(--ease)} .faq-item[open] .faq-icon{transform:rotate(45deg)} .faq-a{font-size:var(--t-chico);color:var(--cal-med);padding-bottom:1.15rem} /* Si el JS no corre, el sitio tiene que seguir sirviendo. Sin pagina.js las respuestas quedaban en cero píxeles -el texto está en el HTML pero no se puede leer- y en el celular el menú no abría: cero enlaces, salvo los del pie. Estas reglas solo se aplican cuando falta la clase "js", así que no tocan nada del funcionamiento normal. */ /* Sin JavaScript, los bloques que entran al scrollear quedaban en opacity 0 para siempre: 28 en /curso, 19 en /tapeo, 18 en el inicio. La página cargaba y no se veía casi nada. Quien tenga el JS bloqueado los ve quietos, que es como se ven igual una vez que entraron. */ /* La respuesta arriba de todo. Los doce artículos arrancaban contextualizando y respondían recién a la mitad: quien busca "¿hay que remojar las legumbres?" —y quien le pregunta a una IA— se va antes de llegar. */ .respuesta-corta{background:var(--musgo-alto);border-left:3px solid var(--brote);border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.3rem;margin-bottom:1.8rem;color:var(--cal)} .respuesta-corta strong{color:var(--brote)} html:not(.js) .sube{opacity:1;transform:none} html:not(.js) .nav{height:auto} @media (max-width:999px){ html:not(.js) .nav-caja{flex-wrap:wrap;height:auto;padding-block:.7rem} html:not(.js) .nav-links{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;width:100%;padding-bottom:.3rem} /* Sin JS los ocho enlaces se acomodan en dos renglones: el margen automático que separa los grupos en la compu acá dejaría un ítem solo contra el borde. */ html:not(.js) .nav-corte{margin-left:0;padding-left:0} html:not(.js) .hamburguesa{display:none} } /* --- Cierre --- */ .cierre{background:var(--musgo);border-block:1px solid var(--linea)} .cierre-caja{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4.5vw,4rem);align-items:center} .cierre h2{margin-block:.8rem .9rem} .cierre .bajada{color:var(--cal-med);max-width:44ch} .cierre .comanda{background:var(--musgo-alto)} .cierre .comanda::before,.cierre .comanda::after{background:radial-gradient(circle at 5px 0, transparent 0 5px, var(--musgo-alto) 5.5px) 0 0/10px 7px repeat-x} .otras{margin-top:1.5rem;font-size:var(--t-nota);color:var(--cal-baja);line-height:2} @media (max-width:940px){.cierre-caja{grid-template-columns:1fr}} /* --- Barra fija de reserva (móvil) --- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:.5rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));background:var(--tinta);border-top:1px solid var(--linea);transform:translateY(105%);transition:transform .3s var(--ease),bottom .3s var(--ease)} /* Con el aviso de cookies abajo, los dos se apoyaban uno sobre el otro y el aviso tapaba el botón. Mientras el aviso está, la barra sube por encima. Sube con "bottom" y no con transform, que es lo que la anima al entrar. */ body:has(#cookie-banner.visible) .sticky-cta{bottom:6.25rem} .sticky-cta.visible{transform:none} .sticky-cta .cta-main{flex:1;display:flex;align-items:center;justify-content:center;background:var(--miel);color:#20140A;border-radius:var(--r);font-weight:600;font-size:var(--t-chico);min-height:48px;padding-inline:1rem} .sticky-cta .wa-btn{display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;border:1px solid var(--linea-fuerte);border-radius:var(--r);color:var(--cal);flex-shrink:0} @media (max-width:820px){ .sticky-cta{display:flex} main{padding-bottom:4.5rem} body:has(#cookie-banner.visible) main{padding-bottom:10.5rem} } [data-estado="sin-fecha"].sticky-cta{display:none} /* --- Aviso de cookies --- */ .cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:200;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;max-width:320px;background:var(--musgo-alto);border:1px solid var(--linea);color:var(--cal-med);border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.5);padding:1rem;display:none;flex-direction:column;gap:.7rem;font-size:var(--t-nota)} .cookie-banner.visible{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s} /* Con el menú abierto el aviso se retira. El menú declara z-index 210 y el aviso 200, pero .nav es sticky con z-index 100 y eso abre su propio contexto: el 210 del menú vale dentro de la barra, no contra el aviso. Resultado: en la primera visita —la de quien llega de Instagram— el toque sobre "Reservar" y "Contacto" lo recibía el aviso. Vuelve solo al cerrar el menú. */ body.menu-abierto .cookie-banner{display:none} /* En pantalla ancha el aviso caía justo encima de los botones del hero, que en este sitio van siempre en la columna izquierda: en 1280x720 —la resolución de laptop más común— los dos botones de la home no se podían tocar en la primera visita. Del lado derecho está la foto, no hay nada que tocar. */ @media (min-width:901px){.cookie-banner{left:auto;right:1.25rem}} /* El aviso estuvo un tiempo arriba, pegado debajo de la barra, porque abajo tapaba "Ver el curso". Medido el 14/9 en un teléfono de 393x852: arriba ocupa de 78 a 177 y ahí están la volanta (116-141) y el primer renglón del h1 (157-273) — o sea que el 68% que no toca el cartel no ve el título de la portada. Y los botones ya no están donde estaban: con el hero más alto quedan en 423-542, lejos del borde de abajo. Vuelve abajo, que además es donde la gente lo busca. */ @media (max-width:900px){ .cookie-banner{max-width:none} } /* Mientras el aviso está abajo, el pie crece lo que el aviso mide: si no, la última línea de la página queda atrapada debajo y no hay manera de leerla. En los navegadores sin :has() simplemente no crece, que es como estaba. */ body:has(#cookie-banner.visible) .pie{padding-bottom:5.75rem} .cookie-banner a{color:var(--cal);text-decoration:underline;display:inline-block;padding-block:.2rem} .cookie-banner-actions{display:flex;align-items:center;gap:1rem} #cookie-accept{background:var(--cal);color:var(--tinta);padding:.45rem 1rem;border-radius:var(--r);font-size:var(--t-nota);font-weight:600;min-height:36px} #cookie-decline{color:var(--cal-baja);text-decoration:underline;font-size:var(--t-nota);padding:.45rem .6rem;min-height:36px;display:inline-flex;align-items:center} /* Esta regla subía el aviso 5rem para esquivar la barra fija de abajo, pero arriba ya se le da "top" y "bottom:auto" en <=900px: con las dos juntas el aviso se estiraba de arriba hasta abajo y ocupaba el 81% de la pantalla en /tapeo, /curso, /pastas y las demás páginas con barra. La home no la tiene y por eso ahí se veía bien. En móvil el aviso va arriba y la barra abajo: no se pisan, así que no hay nada que esquivar. */ @media (max-width:480px){.cookie-banner{left:.75rem;right:.75rem;max-width:none}} /* Ocupaba 131px, el 20% de un teléfono de 667, apoyado sobre el hero y con el texto en dos líneas. Con una sola línea y los botones al lado cuando entran, baja a la mitad y deja de tapar la foto. */ .cookie-banner{padding:.85rem 1rem;gap:.55rem;display:flex} .cookie-banner p{line-height:1.45} /* A 400px el corte dejaba afuera al iPhone de 393, que es de los teléfonos más usados: ahí el aviso volvía a la versión apilada de 99px. Con el corte en 360 entran casi todos y queda en la mitad de alto. */ @media (min-width:360px){ .cookie-banner{flex-direction:row;align-items:center;justify-content:space-between;gap:.9rem} .cookie-banner-actions{flex-shrink:0;gap:.6rem} } /* --- Artículos --- */ /* Estas 34 reglas venían repetidas en un