/* ============================================================ DISEÑO 4 — ZEN Aire, curvas y verdes apagados. Formas orgánicas en lugar de cajas, aparición suave al hacer scroll, todo redondeado. La calma como argumento de venta. ============================================================ */ :root{ --arena:#f3efe7; --arena2:#eae4d8; --salvia:#798770; --salvia-osc:#4e5a48; --arcilla:#b8846a; --tinta:#33372e; --suave:#606558; /* Dos tonos para TEXTO, y el motivo por el que existen aparte. --salvia y --arcilla se usan de dos maneras: como adorno (los puntos, los iconos, los bordes) y como color de letra. Como adorno andan bien; como letra chica sobre --arena quedaban en 3,15:1 y 2,80:1, debajo del 4,5:1 que pide WCAG AA para texto normal. El precio en USD era el peor caso, y es justo un dato que la gente entra a leer. Oscurecerlos en la variable original habría cambiado también los adornos, así que van estos dos, con el mismo tono y sólo más oscuros. Cumplen 4,5:1 contra --arena2, que es el fondo más oscuro donde se los usa, y --suave también contra el fondo de la grilla —arena con un 15% de salvia encima, rgb(225,224,214)—, que es más oscuro todavía: ahí `.serie` se quedaba en 4,33:1 con el resto ya corregido. Los `em` en itálica de los h1 y h2 siguen con --salvia: son texto grande, y ahí el mínimo es 3:1. --salvia bajó cuatro puntos de luminosidad —de #7d8b74 a #798770, imperceptible— porque en las secciones .tonal esos `em` caían a 2,85:1 contra --arena2 y no llegaban ni al 3:1. Así cumple en los dos fondos, y como también se usa en adornos, el cambio tenía que ser chico. */ --salvia-txt:#5e6958; --arcilla-txt:#8b5b42; /* Y en el pie pasa lo mismo al revés: ahí el fondo es --salvia-osc y la letra es --arena rebajada con alfa u `opacity`. Rebajarla de más la deja por debajo del mínimo igual que un color claro sobre fondo claro, y es más fácil que se escape porque el problema no está en el color sino en la transparencia. Sobre --salvia-osc, el alfa mínimo para llegar a 4,5:1 es 0,77; los tres casos que había —"Contacto" del pie en 0,6, el colofón en 0,7 y la letra chica del Pack Gold en 0,75— están ahora en 0,8. Si se agrega otro texto con alfa sobre ese fondo, ése es el piso. */ --serif:"Cormorant Garamond",Georgia,serif; --sans:"Nunito Sans",system-ui,sans-serif; --marco:clamp(1.2rem,5vw,5rem); } .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--arena);color:var(--tinta);font-family:var(--sans);font-weight:300; font-size:clamp(1.02rem,.42vw+.94rem,1.12rem);line-height:1.78;-webkit-font-smoothing:antialiased} img,video{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{max-width:1140px;margin:0 auto;padding:0 var(--marco)} h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.12;margin:0} /* aparición suave */ /* La aparición se activa sólo si hay JS: si no, todo quedaría en opacity:0 y la página se vería vacía. Por eso cuelga de .js en el . */ .js .rev{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease} .js .rev.visible{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none;transition:none}} /* ---------- nav flotante ---------- */ .barra{position:sticky;top:1rem;z-index:30;margin:1rem auto 0;max-width:1000px; padding:0 var(--marco)} .barra .caja{background:rgba(243,239,231,.97);backdrop-filter:blur(16px); border:1px solid rgba(125,139,116,.28);border-radius:999px; padding:.7rem 1.6rem;display:flex;justify-content:space-between; align-items:center;gap:1.2rem;flex-wrap:wrap; box-shadow:0 10px 34px -22px rgba(51,55,46,.5)} .marca{font-family:var(--serif);font-size:1.2rem;letter-spacing:.03em} .marca span{color:var(--salvia-txt);font-style:italic} nav{display:flex;gap:1.25rem;row-gap:1.5rem;flex-wrap:wrap;font-size:.78rem;letter-spacing:.06em} nav a{position:relative;text-decoration:none;color:var(--suave);transition:color .25s} nav a:hover,nav a[aria-current]{color:var(--salvia-osc)} /* Los 44px de área táctil del menú, que el diseño anterior tenía y este había perdido: con el line-height del body, cada link quedaba en unos 22px de alto, la mitad de lo que se puede tocar cómodo en un celular. Va como pseudo-elemento y no como min-height porque la barra es una píldora de alto ajustado: subirle el alto a los links la agrandaría 22px. Así el área crece y el dibujo queda igual. El row-gap de arriba sube a 1.5rem por esto mismo: el área sobresale 11px para cada lado, y con el gap de 1.25rem las dos filas del menú en celular se habrían pisado. */ nav a::after{content:"";position:absolute;left:0;right:0;top:50%; transform:translateY(-50%);height:44px} nav a:focus-visible{outline:2px solid var(--salvia-osc);outline-offset:4px;border-radius:4px} /* ---------- portada ---------- */ .portada{padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5rem);position:relative;overflow:hidden} .portada::before,.portada::after{content:"";position:absolute;border-radius:50%;filter:blur(10px);z-index:0} .portada::before{width:52vw;aspect-ratio:1.2;background:rgba(125,139,116,.16);top:-16vw;right:-14vw} .portada::after{width:34vw;aspect-ratio:1;background:rgba(184,132,106,.13);bottom:-16vw;left:-10vw} .portada .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr .8fr; gap:clamp(2rem,5vw,4.5rem);align-items:center} .portada h1{font-size:clamp(2.8rem,6.6vw,5rem)} .portada h1 em{font-style:italic;color:var(--salvia)} .lead{color:var(--suave);max-width:38ch;margin:1.6rem 0 2.4rem;font-size:1.1rem} .blob{border-radius:52% 48% 44% 56%/48% 42% 58% 52%;overflow:hidden; box-shadow:0 40px 80px -50px rgba(51,55,46,.65)} .blob img{width:100%} /* ---------- botones ---------- */ .btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.84rem; letter-spacing:.04em;text-decoration:none;padding:1rem 2.1rem;border-radius:999px; background:var(--salvia-osc);color:var(--arena); box-shadow:0 12px 26px -16px rgba(78,90,72,.9); transition:transform .25s,box-shadow .25s,background .25s} /* El hover aclara el fondo, y con --salvia el texto en --arena se quedaba en 3,15:1. --salvia-txt es apenas más oscuro, sigue siendo más claro que el fondo de reposo —o sea que el botón se sigue aclarando al pasar por encima— y el texto queda en 4,9:1. */ .btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(78,90,72,.95);background:var(--salvia-txt)} .btn:focus-visible{outline:2px solid var(--salvia-osc);outline-offset:3px} .btn.suave{background:transparent;color:var(--salvia-osc);border:1px solid var(--salvia);box-shadow:none} .btn.suave:hover{background:var(--salvia-txt);color:var(--arena)} /* ---------- secciones ---------- */ section{padding:clamp(3.5rem,8vw,7rem) 0} .tonal{background:var(--arena2);border-radius:clamp(28px,5vw,64px); margin:0 var(--marco);padding-left:0;padding-right:0} .tonal .wrap{max-width:1060px} .etq{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--salvia-txt); margin:0 0 1rem;font-weight:600} h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:1.3rem} h2 em{font-style:italic;color:var(--salvia)} .dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center} /* ---------- credenciales ---------- */ .credenciales{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem} .credenciales li{background:var(--arena);border-radius:999px;padding:.75rem 1.4rem; font-size:.95rem;display:flex;align-items:center;gap:.8rem} .tonal .credenciales li{background:var(--arena)} .credenciales li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--arcilla);flex:none} /* ---------- video ---------- */ .video-caja{position:relative;border-radius:clamp(24px,3.5vw,44px);overflow:hidden; box-shadow:0 44px 80px -54px rgba(51,55,46,.8)} .video-caja video{width:100%;background:#20231d;aspect-ratio:720/1280;object-fit:cover;} .sonido{position:absolute;right:1.1rem;bottom:1.1rem;width:46px;height:46px;border:0; border-radius:999px;background:rgba(243,239,231,.9);color:var(--salvia-osc); cursor:pointer;display:grid;place-items:center;transition:transform .2s} .sonido:hover{transform:scale(1.08)} /* Blanco y no --salvia-osc: este botón flota sobre el video, que es oscuro y además cambia de cuadro. Es el mismo criterio que tenía el diseño anterior. */ .sonido:focus-visible{outline:2px solid #fff;outline-offset:3px} .sonido svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2} .sonido .on{display:none}.sonido.is-on .on{display:block}.sonido.is-on .off{display:none} /* ---------- oferta ---------- */ .oferta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.8rem} .oferta article{background:var(--arena);border-radius:clamp(22px,2.6vw,34px);padding:2rem 1.6rem; display:flex;flex-direction:column; box-shadow:0 20px 44px -34px rgba(51,55,46,.6); transition:transform .3s,box-shadow .3s} .oferta article:hover{transform:translateY(-8px);box-shadow:0 30px 56px -32px rgba(51,55,46,.65)} .oferta .icono{width:44px;height:44px;border-radius:50%;background:var(--salvia);opacity:.22;margin-bottom:1.1rem} .oferta article:nth-child(2) .icono{background:var(--arcilla)} .oferta article:nth-child(4) .icono{background:var(--arcilla)} .oferta h3{font-size:1.7rem;margin-bottom:1rem} .oferta ul{list-style:none;padding:0;margin:0 0 1.9rem;flex:1;font-size:.94rem;color:var(--suave)} .oferta li{padding:.4rem 0} .oferta .btn{align-self:flex-start;padding:.7rem 1.5rem;font-size:.76rem} /* ---------- formación ---------- */ .fecha{background:var(--arena);border-radius:999px;padding:.9rem 1.6rem;display:inline-block; font-weight:600;color:var(--salvia-osc);margin:1rem 0 1.8rem; box-shadow:0 14px 30px -22px rgba(51,55,46,.7)} .blob2{border-radius:44% 56% 52% 48%/56% 48% 52% 44%;overflow:hidden; box-shadow:0 44px 84px -56px rgba(51,55,46,.8)} .blob2 img{width:100%} /* ---------- testimonios ---------- */ .citas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.8rem} .citas blockquote{margin:0;background:var(--arena);border-radius:clamp(22px,2.6vw,34px); padding:2.2rem;font-family:var(--serif);font-size:1.28rem;font-style:italic; line-height:1.5;color:var(--salvia-osc); box-shadow:0 20px 44px -36px rgba(51,55,46,.6)} .citas p{margin:0} .citas blockquote::after{content:"";display:block;width:38px;height:2px;border-radius:2px; background:var(--arcilla);margin-top:1.3rem;opacity:.6} /* ---------- pie ---------- */ footer{background:var(--salvia-osc);color:var(--arena); border-radius:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0 0; margin:clamp(2rem,5vw,4rem) var(--marco) 0;padding:clamp(3rem,7vw,5rem) 0 2.2rem} footer .wrap{max-width:1060px} footer .etq{color:rgba(243,239,231,.8)} .pie-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start} footer h2{font-size:1.8rem;margin-bottom:.9rem} .pie-foto{border-radius:clamp(22px,3vw,38px);overflow:hidden} .datos{list-style:none;padding:0;margin:0;line-height:2.2} .datos a{text-decoration:none;opacity:.85;transition:opacity .2s} .datos a:hover{opacity:1;text-decoration:underline} .redes{display:flex;gap:.7rem;margin-top:1.5rem} /* 44px y no 40: es el mínimo cómodo para tocar en un celular, y son los links de contacto del pie. */ .redes a{width:44px;height:44px;display:block;transition:transform .25s} .redes a:hover{transform:translateY(-4px)} .redes a:focus-visible{outline:2px solid var(--salvia-osc);outline-offset:3px;border-radius:50%} .redes svg{width:100%;height:100%} .colofon{margin-top:3.2rem;padding-top:1.5rem;border-top:1px solid rgba(243,239,231,.2); font-size:.76rem;letter-spacing:.1em;opacity:.8; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} @media(max-width:900px){ .portada .wrap,.dos,.pie-grid{grid-template-columns:1fr} .oferta,.citas{grid-template-columns:1fr 1fr} } @media(max-width:560px){.oferta,.citas{grid-template-columns:1fr}} /* ============================================================ PÁGINAS INTERIORES Mismo sistema que la home: arena, curvas y verdes apagados. ============================================================ */ .pagina{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1rem,2vw,1.5rem);position:relative;overflow:hidden} .pagina::before{content:"";position:absolute;width:46vw;aspect-ratio:1.2;border-radius:50%; background:rgba(125,139,116,.14);top:-18vw;right:-14vw;z-index:0} .pagina .wrap{position:relative;z-index:1} .pagina h1{font-size:clamp(2.1rem,4.8vw,3.5rem);margin-bottom:.6rem} .pagina h1 em{font-style:italic;color:var(--salvia)} /* cuerpo de texto de las interiores */ .contenido h3{font-family:var(--serif);font-weight:400;font-size:1.65rem; color:var(--salvia-osc);margin:2.3rem 0 .5rem} .contenido h3:first-child{margin-top:0} /* Las viñetas valen para las listas de texto, no para .precios ni .agenda: esas ya tienen su propia forma de ficha y les aparecía un punto suelto. */ .contenido ul:not(.precios):not(.agenda){list-style:none;padding:0;margin:1.1rem 0} .contenido ul:not(.precios):not(.agenda) > li{padding:.4rem 0 .4rem 1.5rem;position:relative} .contenido ul:not(.precios):not(.agenda) > li::before{content:"";position:absolute;left:.2rem; top:1.15em;width:6px;height:6px;border-radius:50%;background:var(--arcilla)} .contenido a{color:var(--salvia-osc);text-underline-offset:3px} /* '.contenido a' pisaba el color del botón por especificidad y el texto quedaba verde sobre verde: invisible. */ .contenido a.btn{color:var(--arena)} .contenido a.btn.suave{color:var(--salvia-osc)} .contenido strong,.contenido b{font-weight:600;color:var(--salvia-osc)} .foto-pagina{border-radius:clamp(24px,3.5vw,44px);overflow:hidden; box-shadow:0 44px 84px -56px rgba(51,55,46,.8)} .centrado{text-align:center} .sub-pagina{color:var(--suave);margin:0 0 2.5rem} /* ---------- grilla horaria ---------- */ .grilla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; border-radius:clamp(20px,2.6vw,32px);background:var(--arena); box-shadow:0 22px 46px -36px rgba(51,55,46,.6)} .grilla-scroll:focus-visible{outline:2px solid var(--salvia);outline-offset:3px} /* La tabla se desliza de costado igual, así que conviene darle aire: con 660px los nombres de clase se partían en cuatro renglones y no se leían. */ table.grilla{border-collapse:collapse;width:100%;min-width:860px} /* Marcos marcados: con líneas de 1px las celdas vacías y las ocupadas se confundían y costaba seguir la fila del horario. */ .grilla th,.grilla td{padding:1.05rem 1rem;text-align:left;vertical-align:top; border-bottom:2px solid rgba(125,139,116,.34); border-right:2px solid rgba(125,139,116,.34)} .grilla tr > *:last-child{border-right:0} .grilla thead th,.grilla thead td{font-family:var(--sans);font-weight:600;font-size:.76rem; letter-spacing:.16em;text-transform:uppercase;color:var(--salvia-txt); border-bottom:3px solid var(--salvia)} /* La esquina dice de qué país es la columna de horas ("Hora ARG"). Sin nowrap parte en dos renglones y se lee peor que el dato que viene a aclarar; el ancho no cambia, porque la columna ya la fija el "09:00 hs" de abajo. */ .grilla thead td{white-space:nowrap} .grilla tbody th{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--salvia-osc); white-space:nowrap;background:rgba(125,139,116,.12)} .grilla tbody tr:last-child > *{border-bottom:0} .grilla td.clase{font-family:var(--serif);font-size:1.2rem;color:var(--tinta); background:rgba(125,139,116,.15)} .grilla .serie{display:block;font-family:var(--sans);font-size:.78rem;color:var(--suave);margin-top:.2rem} .grilla-nota{color:var(--suave);margin:1.4rem 0 0} /* ---------- planes ---------- */ .precios{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.7rem} .precios li{background:var(--arena);border-radius:clamp(16px,2vw,26px);padding:1.1rem 1.6rem; display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap; box-shadow:0 16px 34px -30px rgba(51,55,46,.6)} .precios .que{font-family:var(--serif);font-size:1.25rem} .precios .que small{display:block;font-family:var(--sans);font-size:.86rem;color:var(--suave); margin-top:.25rem;max-width:52ch} .precios .cuanto{font-family:var(--sans);font-weight:600;white-space:nowrap;color:var(--salvia-osc)} .precios .cuanto b{display:block;font-weight:400;font-size:.84rem;color:var(--arcilla-txt)} .precios .destacado{background:var(--salvia-osc);color:var(--arena)} .precios .destacado .que small{color:rgba(243,239,231,.8)} .precios .destacado .cuanto{color:var(--arena)} .precios .destacado .cuanto b{color:rgba(243,239,231,.8)} /* ---------- agenda de formaciones ---------- */ .agenda{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.2rem; grid-template-columns:repeat(2,1fr)} .agenda li{background:var(--arena);border-radius:clamp(20px,2.6vw,32px);padding:2rem; box-shadow:0 20px 44px -36px rgba(51,55,46,.6)} .agenda h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:0 0 .3rem} .agenda .cuando{font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase; color:var(--salvia-txt);margin:0 0 1rem} .agenda p{margin:.6rem 0} .agenda .precio{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(125,139,116,.25); font-family:var(--sans);font-weight:600;color:var(--salvia-osc)} .agenda .precio b{font-weight:400;color:var(--arcilla-txt)} /* ---------- condiciones ---------- */ .condiciones{background:var(--arena);border-radius:clamp(22px,3vw,38px);padding:clamp(1.8rem,4vw,2.8rem); margin-top:2.5rem;box-shadow:0 20px 44px -36px rgba(51,55,46,.6)} .condiciones h2{font-size:1.9rem;margin-bottom:1rem} .condiciones ul{list-style:none;padding:0;margin:0} .condiciones li{padding:.45rem 0 .45rem 1.5rem;position:relative} .condiciones li::before{content:"";position:absolute;left:.2rem;top:1.15em;width:6px;height:6px; border-radius:50%;background:var(--arcilla)} .nota-precios{margin-top:1.4rem;font-size:.9rem;color:var(--suave)} /* De qué país es la hora. Existe porque el sitio se le muestra a gente de afuera —la pauta de España, 30-ago-2026— y "lunes 09:00" a secas se lee como la hora de quien lo lee. Es la misma corrección que se le hizo al catálogo que usa el bot, del lado del panel. */ .nota-zona{margin-top:1.2rem;font-size:.9rem;color:var(--suave)} /* ---------- logo suelto ---------- */ .marca-suelta{display:grid;place-items:center;margin:3rem 0 1rem} .marca-suelta img{width:132px;height:auto} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media(max-width:760px){ .agenda{grid-template-columns:1fr} .precios li{flex-direction:column;align-items:flex-start;gap:.5rem} } /* En celular conviene que el texto arranque antes que la foto; en escritorio la foto vuelve a la izquierda, como en el resto del sitio. */ @media(min-width:901px){ .dos.texto-primero{align-items:start} .dos.texto-primero > .foto-pagina{order:-1;position:sticky;top:6rem} } /* ---------- barra de menú en pantallas chicas ---------- La píldora envolvía los siete enlaces en dos o tres renglones y quedaba un bloque enorme flotando sobre el contenido. En celular se convierte en una barra fina: los enlaces van en una sola línea que se desliza de costado. */ @media(max-width:820px){ .barra{top:.5rem;padding:0 .7rem} .barra .caja{border-radius:18px;padding:.5rem .35rem;gap:0;flex-wrap:nowrap;align-items:center} .marca{display:none} nav{flex-wrap:nowrap;overflow-x:auto;gap:1.15rem;width:100%;padding:0 .9rem; scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 20px),transparent 100%)} nav::-webkit-scrollbar{display:none} nav a{white-space:nowrap;font-size:.82rem} nav a[aria-current]{font-weight:600} } @media(max-width:560px){ .grilla th,.grilla td{padding:.85rem .8rem} .grilla td.clase{font-size:1.08rem} }