en el sitio —todos
los demás llevan clase—, así que sin esto salían azules del navegador. */
.faq__body a{
color:var(--matcha);
text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--oliva);
transition:text-decoration-color .2s var(--ease);
}
.faq__body a:hover{ text-decoration-color:var(--matcha); }
/* ---------- 14. Cabecera de subpágina ---------- */
.pagehead{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem); }
.pagehead .lead{ margin-top:1.5rem; }
/* ---------- 15. CTA + formulario ---------- */
.cta{ background:var(--tinta-2); border-block:1px solid var(--tinta-3); }
.cta__inner{ text-align:center; }
/* --- Cierre de la home: contacto y preguntas en paralelo ---
Apilados en celular (contacto primero, como pediste) y en dos columnas de
960px para arriba: así el formulario sigue a la vista mientras se lee la
FAQ, y nadie tiene que volver para arriba para escribir. */
.cierre{ border-top:1px solid var(--tinta-3); }
.cierre__grid{ display:grid; gap:clamp(2.75rem,7vw,4.5rem); }
/* El contacto va en tarjeta: al lado de la FAQ, sin un borde que las separe,
las dos columnas se leen como una sola cosa. */
.cierre__card{
background:var(--tinta-2);
border:1px solid var(--tinta-3);
border-radius:14px;
padding:clamp(1.75rem,5vw,2.75rem) clamp(1.25rem,3.5vw,2rem);
}
.cta__title{ margin-bottom:1rem; }
.cta__sub{
color:var(--crema-mid); max-width:46ch;
margin-inline:auto; margin-bottom:2.75rem;
}
.form{ max-width:420px; margin-inline:auto; text-align:left; display:grid; gap:1.1rem; }
.field{ display:grid; gap:.45rem; }
.field label{
font-family:var(--display); font-weight:600;
font-size:.8125rem; letter-spacing:.01em;
color:var(--crema-mid);
}
.field .opt{ color:var(--crema-low); font-weight:400; }
.field input{
background:var(--tinta);
border:1px solid var(--tinta-3);
border-radius:8px;
padding:.85rem 1rem;
color:var(--crema);
font-size:1rem;
transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder{ color:var(--crema-low); }
.field input:hover{ border-color:var(--oliva); }
.field input:focus{ border-color:var(--matcha); outline:none; background:#0E1109; }
.field input[aria-invalid="true"]{ border-color:#D98A6A; }
.form__note{ min-height:1.25rem; font-size:.875rem; color:var(--matcha); }
.form__note.is-error{ color:#E3A588; }
.form__fine{ font-size:.8125rem; color:var(--crema-low); }
/* Separador entre el formulario y el contacto directo */
.alt{
display:flex; align-items:center; gap:1rem;
max-width:420px; margin:2.5rem auto 1.5rem;
}
.alt__rule{ flex:1; height:1px; background:var(--tinta-3); }
.alt__txt{ font-size:.8125rem; color:var(--crema-low); white-space:nowrap; }
.btn--wa{ gap:.6rem; max-width:420px; width:100%; padding-block:1.05rem; }
.btn__ico{ width:20px; height:20px; flex:none; }
.scribble{
font-family:var(--hand);
font-size:1.5rem; color:var(--oliva-alto);
margin-top:2.5rem;
transform:rotate(-2deg);
}
/* CTA reducido para las subpáginas: los dos botones y nada más. */
.cta--mini .cta__sub{ margin-bottom:2rem; }
.cta__acts{
display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
}
.cta__acts .btn{ width:100%; max-width:320px; }
/* ---------- 16. Footer ---------- */
.footer{ padding-block:2.75rem; border-top:1px solid var(--tinta-3); }
.footer__inner{
display:grid; gap:1.5rem;
}
.footer__nav{
display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
}
.footer__nav a{
font-family:var(--display); font-weight:600; font-size:.875rem;
color:var(--crema-mid); text-decoration:none;
}
.footer__nav a:hover{ color:var(--matcha); }
.footer__txt{ font-size:.8125rem; color:var(--crema-low); }
.footer .brand{ color:var(--crema-mid); }
.footer .brand__mark{ height:44px; width:109px; }
/* ---------- 17. Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
opacity:1; transform:none;
transition:opacity .6s var(--ease), transform .6s var(--ease);
}
/* ---------- 18. Breakpoints ---------- */
@media (min-width:720px){
.work{ grid-template-columns:repeat(2,1fr); }
.work__item{ align-content:start; }
.cta__acts .btn{ width:auto; }
.footer__inner{
grid-template-columns:auto 1fr auto;
align-items:center; gap:1rem 2.5rem;
}
}
@media (min-width:860px){
:root{ --nav-h: 96px; }
.burger{ display:none; }
.menu{
position:static; display:flex; gap:1.75rem; margin-inline:auto;
padding:0; background:none; border:0;
opacity:1; visibility:visible; transform:none;
}
.menu a{ font-size:.875rem; padding-block:0; border-bottom:0; }
.brand__mark{ height:60px; width:149px; }
}
@media (min-width:960px){
.hero__inner{ grid-template-columns:1.05fr .95fr; }
.feed__frame{ max-width:none; }
.bio{ grid-template-columns:.8fr 1fr; }
.work{ grid-template-columns:repeat(3,1fr); }
.svc{ grid-template-columns:repeat(3,1fr); gap:1px; }
.svc__item{ padding:clamp(1.75rem,3vw,2.25rem) clamp(1.5rem,2.5vw,2rem); }
.svc__item:first-child{ padding-left:0; }
.svc__item:last-child{ padding-right:0; }
.svcx__item{ grid-template-columns:.75fr 1.25fr; }
/* El desplegable cruza las dos columnas del bloque de servicio: en la columna
derecha sola, las tres tarjetas quedarían de unos 200px de ancho. */
.packs__wrap{ grid-column:1 / -1; margin-top:.75rem; }
/* Los tres packs en fila. Se comparan de un vistazo sólo si están al lado;
apilados hay que acordarse de lo que decía el de arriba. */
.packs{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
/* Contacto y preguntas, lado a lado. align-items:start para que la tarjeta
no se estire hasta el alto de la FAQ. */
.cierre__grid{ grid-template-columns:.85fr 1fr; align-items:start; }
.cierre__card{ text-align:left; }
.cierre__card .cta__sub,
.cierre__card .form,
.cierre__card .alt,
.cierre__card .btn--wa{ margin-inline:0; }
.cierre__card .form,
.cierre__card .alt,
.cierre__card .btn--wa{ max-width:none; }
}
/* ---------- 19. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.tile{ opacity:1; animation:none; }
.tile.is-out{ opacity:1; transform:none; }
.reveal{ opacity:1; transform:none; }
}
/* ============================================================
20. Cambios de agosto
Cinco ajustes sobre la home: prueba abajo del CTA (1a), franja de
trabajos (1b), la sección de Sol en claro (1c), los síntomas del
bloque oliva separados (1d) y el cierre más liviano (1e).
============================================================ */
/* --- 1a. Hero: más escala arriba y tres datos duros abajo del CTA --- */
.hero .h1{ font-size:clamp(2.6rem, 7.2vw, 5.4rem); }
/* Los tres datos duros del hero (.proof) salieron el 4 de septiembre a
pedido de Sol. La regla se borró con ellos: CSS que no pinta nada
engaña al que lo lee después. Está en styles.backup-2026-09-04-cambios-sol.css. */
/* --- 1b. Franja de trabajos ---
La fila entera se desliza con una animación de transform: no hay scroll
real, así que no se roba el gesto vertical en celular. Al pasar el mouse
se detiene para poder leer y clickear. */
.franja{ overflow:hidden; } /* el corte va acá, nunca en el body: rompe el sticky del nav en iOS */
.franja__head{
display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
gap:1.25rem; margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.franja__tit{ margin-bottom:0; max-width:22ch; }
.franja__todos{
font-family:var(--display); font-weight:700; font-size:.9375rem;
color:var(--matcha); text-decoration:none; white-space:nowrap;
}
.franja__todos span{ display:inline-block; transition:transform .25s var(--ease); }
.franja__todos:hover span{ transform:translateX(4px); }
.franja__viewport{ overflow:hidden; }
.franja__row{
display:flex; width:max-content;
animation:franja 46s linear infinite;
}
.franja__row:hover, .franja__row:focus-within{ animation-play-state:paused; }
@keyframes franja{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.franja__set{ display:flex; gap:14px; padding-right:14px; }
.franja__item{ width:clamp(180px, 22vw, 250px); flex:none; }
.franja__item a{
display:block; color:inherit; text-decoration:none;
}
.franja__item img{
width:100%; aspect-ratio:4/5; object-fit:cover;
border-radius:6px; background:var(--tinta-2);
filter:saturate(.9);
transition:transform .5s var(--ease);
}
.franja__item a:hover img{ transform:scale(1.03); }
.franja__kind{
display:block; margin-top:.8rem;
font-family:var(--display); font-weight:700;
font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--matcha);
}
.franja__name{
display:block; margin-top:.25rem;
font-family:var(--display); font-weight:600; font-size:.9375rem;
letter-spacing:-.015em; color:var(--crema);
}
/* --- 1c. Un tramo claro ---
La página era tinta de arriba a abajo y nada se sentía como un pico.
Este bloque invierte la paleta con los mismos tokens: crema de fondo,
tinta para el texto, oliva para lo secundario. */
.section--luz{ background:var(--crema); color:var(--tinta); }
.section--luz .eyebrow{ color:var(--oliva); }
.section--luz .h2{ color:var(--tinta); }
.section--luz .bio__txt{ color:#3C4231; }
.section--luz .bio__sign{
color:var(--oliva); border-top-color:rgba(18,21,14,.15);
}
.section--luz .bio__media{ background:#DCD8C6; }
.section--luz .bio__media img{ filter:none; }
/* --- 1d. El bloque oliva: primero los síntomas, después la conclusión --- */
.sintomas{
display:grid;
margin-bottom:clamp(2rem,4vw,2.75rem);
max-width:34ch;
}
.sintomas li{
padding-block:.85rem;
border-top:1px solid rgba(18,21,14,.22);
font-family:var(--display); font-weight:600;
font-size:clamp(.9375rem,1.6vw,1.0625rem);
letter-spacing:-.01em;
color:var(--tinta);
}
.sintomas li:last-child{ border-bottom:1px solid rgba(18,21,14,.22); }
/* --- 1e. Cierre: el puente a las otras seis preguntas --- */
.faq__mas{
margin-top:1.5rem;
font-size:.9375rem; color:var(--crema-mid);
}
.faq__mas a{
color:var(--matcha);
text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--oliva);
}
.faq__mas a:hover{ text-decoration-color:var(--matcha); }
@media (min-width:960px){
/* El feed se va por el borde derecho: deja de ser una tarjeta al lado del
titular y pasa a leerse como un feed que sigue fuera de la pantalla. */
.hero{ overflow:hidden; }
.hero__inner{ grid-template-columns:1.15fr .85fr; }
.feed{ margin-right:calc(-1 * clamp(3rem, 11vw, 9rem)); }
}
/* La fila que se desliza sola es lo primero que hay que apagar. */
@media (prefers-reduced-motion:reduce){
.franja__row{ animation:none; transform:none; }
}
/* ============================================================
21. Cambios de septiembre (revisión de Sol)
Saludo del hero, campo abierto del formulario y el ajuste de la
franja, que pasó de vitrina de branding a muestra de contenido.
============================================================ */
/* --- Saludo bajo el titular ---
En la manuscrita y a un tamaño chico: recibe sin pelearle al titular.
Va con el mismo giro que .scribble para que se lean como la misma voz. */
.hero__saludo{
font-family:var(--hand);
font-size:clamp(1.35rem, 3.4vw, 1.9rem);
line-height:1;
color:var(--matcha);
margin-top:1.1rem;
transform:rotate(-2deg);
transform-origin:left center;
}
/* --- Campo abierto del formulario --- */
.field__ayuda{
margin:0;
font-size:.8125rem; line-height:1.5;
color:var(--crema-low);
max-width:52ch;
}
.field textarea{
background:var(--tinta);
border:1px solid var(--tinta-3);
border-radius:8px;
padding:.85rem 1rem;
color:var(--crema);
font-family:inherit;
font-size:1rem;
line-height:1.55;
resize:vertical;
min-height:7.5rem;
transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea::placeholder{ color:var(--crema-low); }
.field textarea:hover{ border-color:var(--oliva); }
.field textarea:focus{ border-color:var(--matcha); outline:none; background:#0E1109; }
/* --- Aclaración al pie de un servicio --- */
.svc__nota{
margin-top:1.25rem;
color:var(--crema-mid);
font-size:.9375rem;
max-width:56ch;
}
/* --- Portfolio con una sola pieza ---
La grilla de tres columnas se pensó para nueve trabajos. Con uno solo, esa
grilla deja la tarjeta arrinconada arriba a la izquierda y dos columnas
vacías al lado. Acá la pieza se despliega en dos mitades, foto y texto,
ocupando el ancho completo. Si vuelven a entrar trabajos al portfolio, se
saca la clase --solo del y la grilla vuelve sola. */
.work--solo{ grid-template-columns:1fr; }
.work--solo .work__desc{ max-width:52ch; }
@media (min-width:720px){
.work--solo{ grid-template-columns:1fr; }
.work--solo .work__item{
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
gap:clamp(2rem,5vw,3.5rem);
align-items:center; align-content:center;
}
.work--solo .work__media img{ aspect-ratio:4/5; }
.work--solo .work__client{ font-size:clamp(1.6rem,3.4vw,2.4rem); }
}
@media (min-width:960px){
.work--solo{ grid-template-columns:1fr; }
}
/* Desde septiembre el servicio 02 tiene dos párrafos. Sin esto se leen como
uno solo y se pierde la pregunta que abre el segundo. */
.svc__desc + .svc__desc{ margin-top:1rem; }