/* Theme Name: Laboratorio Dental LG Theme URI: https://lglabdental.com/ Author: Cintia Aranda — Auren Studio Description: Tema a medida para Laboratorio Dental LG. Diseño propio, sin page builder. El contenido se edita desde "Home" con Secure Custom Fields. Version: 1.1.2 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lg-lab-dental */ /* ══════════════════════════════════════════════════════════════════ HOME V2 · PRUEBA DE SISTEMA — copia de lg_home_v2.html con los arreglos de coherencia aplicados. El original queda intacto para comparar. HOME V2 — hero asimétrico · Titulares alineados a la izquierda · Una sola imagen al costado · Banda mint full-bleed, sin caja redondeada Secciones: S01 hero · S01b datos · S02 servicios La otra variante sigue viva en lg_home_v1.html. Tokens espejo de lg_design_system.html. ══════════════════════════════════════════════════════════════════ */ :root{ --navy-900:#191964; --navy-800:#424280; --navy-700:#6A6A9A; --navy-600:#8C8CB2; --navy-300:#DFDFE9; --navy-200:#EFEFF4; --navy-100:#F8F8FA; /* tres pasos de teal, uno por tipo de uso: 600 superficies · 800 titulares sobre claro · 900 texto chico sobre claro */ --teal-600:#12B7BB; --teal-800:#0E8D90; --teal-900:#0C7679; --mint:#D6F1F1; --mint-100:#E3F7F7; --mint-300:#C6EAEA; --lavanda:#E0DFF5; --white:#FFFFFF; --text-strong:var(--navy-900); --text-body:var(--navy-800); --text-muted:var(--navy-700); --text-on-dark:var(--white); --text-on-teal:var(--navy-900); --surface:var(--white); --surface-page:var(--navy-100); --surface-mint:var(--mint); --tile-on-dark:rgba(255,255,255,.055);/* tile del bento sobre navy */ --surface-dark:var(--navy-900); --border:var(--navy-300); --accent:var(--teal-600); /* superficies: botones, rótulos */ --accent-on-light:var(--teal-800); /* teal como TEXTO sobre cualquier fondo claro */ --focus:var(--navy-900); --r-hero:32px; --r-card:18px; --r-md:12px; --r-sm:8px; --r-pill:100px; --f:'IBM Plex Sans',sans-serif; --page-w:1440px; --margin:100px; } /* El resaltado gris que Android/iOS pintan encima de lo que tocás. Va en el reset y no solo en : Safari en iPhone no siempre lo hereda. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0; -webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent} /* Quien pidió menos movimiento en su sistema no lo pidió de adorno: hay gente a la que el desplazamiento animado le da mareo. Se respeta en toda la web. */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } body{ font-family:var(--f);background:var(--surface-page);color:var(--text-strong); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img,svg{max-width:100%} img{height:auto} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)} .wrap{max-width:var(--page-w);margin:0 auto;padding:0 var(--margin)} /* ── tipografía ── */ /* Antetítulo: un solo componente para toda la landing. Antes convivían .eyebrow (13px navy-700) y .cad-label (12px teal) haciendo exactamente lo mismo. Ahora es uno con dos variantes de color. La marca geométrica es el gesto que se repite en las seis secciones: ata las formas de S05 al sistema y mete teal en la mitad clara de la página. */ .eyebrow{ display:flex;align-items:center;gap:11px; font-size:13px;font-weight:500;text-transform:uppercase; letter-spacing:2.2px;color:var(--text-muted);line-height:1.9; } /* La marca va en el teal del logo sobre fondos claros y oscuros, y en navy sobre la banda teal — siempre el color que no es el del fondo. */ .eyebrow::before{ content:"";flex:0 0 9px;width:9px;height:9px;border-radius:50%; background:var(--accent); } .eyebrow--on-dark{color:var(--navy-300)} .eyebrow--on-dark::before{background:var(--accent)} .eyebrow--sq::before{border-radius:2px} .eyebrow--tri::before{ border-radius:0;background:none; border-left:4.5px solid transparent;border-right:4.5px solid transparent; border-bottom:9px solid var(--accent);width:0;height:0; } .eyebrow--on-dark.eyebrow--tri::before{border-bottom-color:var(--accent)} .h1{font-size:clamp(32px,4.2vw,60px);font-weight:500;line-height:1.1;letter-spacing:-1.4px;text-wrap:balance} .h2{font-size:clamp(26px,3.2vw,46px);font-weight:500;line-height:1.16;letter-spacing:-1px;text-wrap:balance} /* paso grande del titular: lo usa CAD CAM por ser la sección principal. Antes era .cad-title, una excepción suelta fuera de la escala. */ .h2--lg{font-size:clamp(28px,3.6vw,52px);line-height:1.14;letter-spacing:-1.2px} /* dos escalas de subtítulo y se terminó: bloque y card */ .h3{font-size:clamp(22px,2.2vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.7px} .h4{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.3px} .lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--text-body)} /* ── botones ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 34px;border-radius:var(--r-pill); font-family:var(--f);font-size:17px;font-weight:500; border:1.5px solid transparent;cursor:pointer;white-space:nowrap; transition:background-color .18s,border-color .18s; } .btn--primary{background:var(--surface-dark);color:var(--text-on-dark)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .btn--primary:hover{background:#39397A} } /* Contorno en el mismo teal del botón principal, sin relleno. El fondo teal al 16% aparece recién al pasar el mouse — la misma píldora que el menú. ⚠ El borde en teal-600 da 2.08:1 contra el mint y no llega al 3:1 que pide WCAG 1.4.11. El teal-800 sí (3.39:1), pero es un verde distinto al del botón principal. Decisión de diseño de Auren. */ .btn--outline{background:transparent;border-color:var(--accent);color:var(--text-strong)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .btn--outline:hover{background:rgba(18,183,187,.16)} } .btn--md{height:48px;padding:0 26px;font-size:16px} /* ══ BANDA MINT — full-bleed, sin radio ══ Nav y hero llevan el mismo fondo por separado (no un wrapper común): así el
queda fuera de
sin romper la continuidad visual. */ .nav-band,.hero-band{background:var(--surface-mint)} /* ══ NAV ══ */ /* Logo a la izquierda, secciones centradas, CTA a la derecha. La grilla de tres columnas centra el menú respecto a la página y no respecto al hueco que dejan logo y botón — con flex quedaría corrido. Al hover cada sección aparece dentro de una píldora, con el radio de los botones. */ .nav{padding-top:16px;padding-bottom:14px} .nav-band{position:relative;z-index:10} /* botón hamburguesa: oculto en desktop, aparece cuando el menú se colapsa */ .nav-toggle{ display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer; -webkit-user-select:none;user-select:none; padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px; border-radius:var(--r-md); } .nav-toggle span{display:block;width:24px;height:2px;background:var(--text-strong);border-radius:2px; transition:transform .22s ease,opacity .18s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;min-height:60px} .nav-logo{display:inline-flex;align-items:center;justify-self:start} /* el enlace lo pone WordPress cuando hay logo propio, o el tema si no lo hay */ .nav-logo a{display:inline-flex;align-items:center;line-height:0} /* El isotipo lleva el nombre adentro del círculo: por debajo de ~90px ese texto no se lee y el logo pasa a ser una mancha. */ .nav-logo img{display:block;width:78px;height:78px} .nav-links{display:flex;gap:6px;justify-self:center;font-size:16px;color:var(--text-body)} /* borde transparente del mismo grosor en todos los estados: si el borde apareciera solo en hover, el texto se correría un pixel */ .nav-links a{padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid transparent;transition:background-color .18s,color .18s} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .nav-links a:hover{background:rgba(18,183,187,.16);color:var(--text-strong)} } .nav-inner>.btn{justify-self:end} /* el CTA de adentro del panel y su separador son sólo para el menú de mobile: en escritorio el CTA ya está a la derecha de la barra */ .nav-links .btn,.nav-links .nav-cta-sep{display:none} /* ══ S01 · HERO ASIMÉTRICO ══ */ .hero{ display:grid;grid-template-columns:1fr .82fr; gap:80px;align-items:center; padding-top:76px;padding-bottom:44px; } .hero-copy{text-align:left;max-width:620px} .hero-copy .eyebrow{margin-bottom:22px} .hero-copy .lead{margin-top:20px;max-width:520px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px} .hero-shot{margin:0} .hero-shot img{ display:block;width:100%;height:auto; /* La composición viene con fondo transparente y las esquinas ya redondeadas desde el archivo. Nada de object-fit, border-radius ni color de respaldo: cualquiera de los tres se vería como un rectángulo detrás del calado. */ } /* ══ S01b · FILA DE DATOS ══ Comparte la banda mint del hero: los datos son el pie del hero, no una sección aparte. Una sola línea, número y etiqueta al lado, separados por puntos. Los números bajan de 40px a 26px porque acá conviven con el h1 y a 40px le disputaban jerarquía. */ .stats-band{background:var(--surface-mint)} .stats{padding-bottom:76px} /* Grilla de cuatro columnas, no flex con wrap: el punto separador dependía de que la fila entrara en una sola línea y eso no se puede garantizar en ningún ancho. Al envolver, el punto quedaba colgado al inicio del renglón. */ .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 32px;align-items:baseline} .stat{display:flex;align-items:baseline;gap:10px;font-size:17px;line-height:1.45;color:var(--text-body)} .stat b{flex:none;font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1.1;color:var(--text-strong)} /* ══ S02 · SERVICIOS ══ Grilla 3×2 de cards. La primera lleva el rótulo "Digital": el flujo CAD CAM es el diferenciador central y no puede leerse al mismo nivel que placas y provisorios. */ .services-band{background:var(--surface)} .services{padding-top:104px;padding-bottom:112px} .sec-head{margin-bottom:54px} .sec-head .lead{margin-top:16px;max-width:560px} .sec-head .eyebrow{margin-bottom:18px} .faq-box .eyebrow{margin-bottom:16px} .cad-copy .eyebrow{margin-bottom:16px} /* frase acentuada dentro del titular Por ahora la distinción es solo tipográfica: itálica, mismo navy que el resto del titular. Hereda el color, así que no hay problema de contraste. Si más adelante se quiere en verde, el token es --teal-800 (#0E8D90): es el único paso que pasa 3:1 sobre cream, mint y blanco a la vez. */ .accent-phrase{color:inherit;font-style:italic} /* Cinco servicios en una grilla de seis columnas: cada card ocupa dos, así entran tres arriba y las dos de abajo quedan centradas sin hueco a un lado. */ .svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px} .svc-grid>.svc-card{grid-column:span 2} .svc-grid>.svc-card:nth-child(4){grid-column:2/span 2} .svc-grid>.svc-card:nth-child(5){grid-column:4/span 2} .svc-card{ background:var(--surface-mint); border-radius:var(--r-card);padding:16px; display:flex;flex-direction:column; transition:background-color .18s,transform .18s; } /* sin borde: el tinte de la card ya la separa del fondo cálido. El hover pasa a resolverse por fondo, no por borde. */ /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .svc-card:hover{background:var(--mint-300);transform:translateY(-2px)} } /* La card destacada va en navy, el mismo fondo de la sección CAD CAM: la card y la sección de la que habla comparten color. El rótulo "Digital" también es navy, así que se funde con la card — pero queda apoyado en el borde inferior de la foto, que es lo que lo sostiene. */ .svc-card--destacada{background:var(--surface-dark)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .svc-card--destacada:hover{background:#23236F} } .svc-card--destacada .svc-title{color:var(--text-on-dark)} .svc-card--destacada .svc-desc{color:var(--navy-300)} .svc-media{position:relative} .svc-media img{ display:block;width:100%;height:210px;object-fit:cover; border-radius:var(--r-md);background:var(--navy-200); } /* Rótulo de la card destacada: franja a lo ancho de la foto, apoyada en su borde inferior. Como píldora pisaba el motivo de la imagen y competía con el título; como franja funciona de pie de foto y no tapa nada. El radio inferior acompaña el de la imagen para que no sobresalga. */ /* Rótulo en el teal del logo con el texto en navy (6.24:1). Al pasar el mouse por la card entra un barrido mint desde la izquierda: el verde saturado pasa a verde suave y el texto no se mueve de color, así solo cambia una cosa. */ .svc-tag{ position:absolute;left:0;right:0;bottom:0;overflow:hidden; background:var(--accent); font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase; padding:11px 18px;text-align:center; border-bottom-left-radius:var(--r-md);border-bottom-right-radius:var(--r-md); } .svc-tag::before{ content:"";position:absolute;inset:0;background:var(--surface-mint); transform:translateX(-101%);transition:transform .34s cubic-bezier(.4,0,.2,1); } .svc-tag span{position:relative;z-index:1;color:var(--text-on-teal)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .svc-card:hover .svc-tag::before{transform:translateX(0)} } .svc-body{padding:22px 10px 12px} /* navy-800, no navy-700: sobre el mint el 700 daba 4.28:1 y sobre la lavanda de la card destacada 3.87:1, los dos por debajo del mínimo para 16px. */ .svc-desc{margin-top:10px;font-size:16px;line-height:1.55;color:var(--text-body)} /* ══ S03 · CAD CAM ══ La sección más importante del sitio. Banda navy full-bleed: es el único corte oscuro de la home, así que funciona como quiebre de atención. Sobre navy el teal del logo rinde 6.2:1, así que acá sí puede ser texto. */ .cad-band{background:var(--surface-dark);color:var(--text-on-dark)} .cad{padding-top:104px;padding-bottom:112px} /* Encabezado centrado: rompe el eje izquierdo que traen las otras secciones y le da un cambio de ritmo a las dos secciones más importantes. */ .cad-head{max-width:820px;margin-left:auto;margin-right:auto;text-align:center} .cad-head .eyebrow{justify-content:center} .cad-head .eyebrow{color:var(--accent);margin-bottom:22px} .cad-sub{margin:20px auto 0;font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--navy-300);max-width:560px} /* ── bento 2×2: Materiales y Soluciones como un solo módulo ── Imagen | contenido arriba, contenido | imagen abajo, con 24px de separación. Los bloques de texto son tiles, así que leen al mismo nivel que las fotos y el conjunto deja de parecer dos secciones apiladas. */ .cad-bento{ display:grid;grid-template-columns:1fr 1fr;gap:24px; margin-top:84px; } /* la imagen estira hasta igualar la altura del tile de su fila: el alto lo manda el contenido, no un valor fijo */ .cad-media{margin:0;min-height:320px} .cad-media img{ display:block;width:100%;height:100%;object-fit:cover; border-radius:var(--r-card);background:#23236F; } .cad-copy{ background:var(--tile-on-dark);border-radius:var(--r-card); padding:44px 42px;display:flex;flex-direction:column;justify-content:center; } .cad-copy p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--navy-300);max-width:460px} /* Los materiales y las soluciones van como texto corrido separado por puntos. Antes eran píldoras con borde: tenían la misma forma que los botones y el usuario intentaba hacerles clic. */ .cad-list{margin-top:24px;font-size:17px;line-height:1.75;color:var(--navy-300)} /* ── flujo de trabajo: cuatro cards con el número arriba ── Reemplaza a la línea de tiempo vertical. El número va en peso 400: al 600 competía con el título de la card en vez de ordenarlo. */ .flow-wrap{margin-top:80px} /* centrado, igual que el encabezado de la sección */ .flow-head{margin-bottom:52px;text-align:center} .flow-head .eyebrow{margin-bottom:16px;justify-content:center} .flow-head .h3{margin-left:auto;margin-right:auto} .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .flow-step{ background:var(--tile-on-dark);border-radius:var(--r-card); padding:34px 30px 36px;display:flex;flex-direction:column;min-height:340px; } .flow-num{ display:block;font-size:46px;font-weight:400;line-height:1; letter-spacing:-1.4px;color:var(--accent);margin-bottom:30px; } .flow-title{margin-bottom:10px} .flow-desc{font-size:16px;line-height:1.6;color:var(--navy-300)} /* La orden es lo que se manda junto con el caso: el enlace vive en el paso donde hace falta, no al final de la sección. */ .flow-dl{ display:inline-flex;align-items:center;gap:9px;margin-top:24px; font-size:15px;font-weight:500;color:var(--accent);text-decoration:none; transition:color .18s; } /* el subrayado va solo debajo del texto: la flecha queda limpia */ .flow-dl span{border-bottom:1.5px solid rgba(18,183,187,.45);padding-bottom:3px; transition:border-color .18s} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .flow-dl:hover{color:var(--mint)} .flow-dl:hover span{border-color:var(--mint)} } .flow-dl:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .flow-dl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} /* ── cierre ── Centrado bajo la grilla: el CTA cierra un bloque simétrico de cuatro columnas, no el titular, así que su eje es el centro. La nota de Vevi queda en una línea debajo, sin card, para no disputarle atención. */ .cad-foot{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center} /* CTA principal: teal pleno, sin borde, y al hover se pasa a navy. ⚠ Sin borde, el relleno teal da 2.47:1 contra el blanco y no llega al 3:1 que pide WCAG 1.4.11 para distinguir un control de su fondo. Decisión de diseño de Auren. */ .btn--accent{background:var(--accent);color:var(--text-on-teal)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .btn--accent:hover{background:var(--surface-dark);color:var(--text-on-dark)} } .cad-note{font-size:14px;line-height:1.5;color:var(--navy-300);opacity:.82} /* ══ S04 · QUIÉNES SOMOS ══ Split: dos fotos apiladas a la izquierda, historia a la derecha, y el párrafo 3 cruzando el ancho completo como cita. Es el único bloque de la home con tratamiento editorial — la itálica y el tamaño lo separan del resto sin necesidad de otro color de fondo. */ .about-band{background:var(--surface)} .about{padding-top:104px;padding-bottom:112px} /* stretch para que la columna de fotos termine a la misma altura que la card del destacado: el alto lo manda el texto y las fotos acompañan */ .about-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:stretch} .about-stack{display:grid;grid-template-rows:1fr 1fr;gap:20px} .about-stack figure{margin:0} .about-stack figure{min-height:0} .about-stack img{ display:block;width:100%;height:100%;min-height:240px;object-fit:cover; border-radius:var(--r-card);background:var(--navy-200); } .about-copy{display:flex;flex-direction:column} .about-copy .eyebrow{margin-bottom:20px} .about-copy p{margin-top:20px;font-size:17px;line-height:1.68;color:var(--text-body)} /* El destacado vive al pie de la columna de texto, no cruzando la sección. Card blanca con hairline: sin sombras, que no usamos en ninguna otra parte. El tamaño baja de 32px a 26px máx. porque la columna es la mitad de ancha, pero mantiene la itálica y el peso 400 que lo separan del cuerpo. */ /* Tercer párrafo: sube a 22px pero baja a peso 400 y entra en itálica. El contraste lo hace el estilo, no la densidad, así que cierra el texto sin competir con el titular ni parecer una cita aparte. El selector lleva el tag porque .about-copy p (0,1,1) le gana a una clase sola (0,1,0). */ .about-copy p.about-quote{ font-size:22px;font-weight:400;font-style:italic; line-height:1.5;letter-spacing:-.2px; } /* ══ S05 · ATENCIÓN Y CADETERÍA ══ Tres cards con superficies que ya estaban en el sistema: mint, navy-200 y lavanda. No se agregó ningún color nuevo. Las formas geométricas reemplazan a los íconos: la landing no usa iconografía en ninguna otra sección. */ /* Banda en mint, el mismo del hero: la página abre y cierra su mitad clara con el mismo verde. */ .care-band{background:var(--surface-mint)} .care{padding-top:104px;padding-bottom:112px} .care-head{max-width:820px;margin-left:auto;margin-right:auto;text-align:center} .care-head .eyebrow{justify-content:center} .care-head .eyebrow{margin-bottom:20px} .care-sub{margin:16px auto 0;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--text-body);max-width:560px} .care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px} /* Cards verticales: el asset arriba a la izquierda, alineado con el titular y la descripción, en su tamaño nativo de 56px. Sin caja propia: acompaña al texto en vez de ocupar un bloque aparte. */ .care-card{ border-radius:var(--r-card);padding:38px 34px 42px; display:flex;flex-direction:column;min-height:330px; } .care-media{margin-bottom:48px} .care-media img{display:block;width:56px;height:56px} .care-body{padding:0} /* Las tres cards en blanco: la distinción entre ellas la hace la forma, no el relleno. Antes el mint de los assets desaparecía sobre la card verde (1.0:1) y casi no se veía en las otras dos. */ .care-card--verde,.care-card--navy,.care-card--violeta{background:var(--surface)} /* Los assets traen su color propio (navy #191964 + mint #D6F1F1), así que no se colorean desde acá. */ .care-card h3{color:var(--text-strong)} /* text-wrap:pretty evita las viudas —esa palabra sola en el último renglón— moviendo una palabra de la línea anterior. Los navegadores que no lo soportan simplemente lo ignoran. */ .care-card p,.svc-desc,.flow-desc,.cad-copy p,.about-copy p,.faq-a p, .lead,.cad-sub,.care-sub,.ct-sub,.ft-dir,.ft-tag{text-wrap:pretty} .care-card p{margin-top:12px;font-size:16px;line-height:1.62;color:var(--text-body)} /* ══ S06 · PREGUNTAS FRECUENTES ══ Caja contenedora con el radio del hero, y cada pregunta como card apenas un paso más clara. Acordeón con
nativo: sin JavaScript, operable por teclado y anunciado por lectores de pantalla. ⚠ La Etapa 02 no define titular ni bajada para esta sección: va solo el rótulo, cualquier otra cosa sería copy sin aprobar. */ .faq-band{background:var(--surface)} .faq{padding-top:104px;padding-bottom:112px} /* sin caja contenedora: cada pregunta es su propia card sobre la banda mint */ .faq-list{display:grid;gap:12px;margin-top:44px} /* ⚠ Todos nuestros grises tienen casi la misma luminosidad que el mint: el navy-200 da 1.0:1 contra la banda y la card desaparecía. El blanco es el único que se recorta (1.15:1). */ /* Mismo tratamiento que el botón "Ver servicios": contorno sin relleno y teal al pasar el mouse. En reposo el borde es gris — con ocho contornos teal apilados el verde dejaría de ser acento y sería el color de la sección. El teal queda reservado para lo que está abierto o señalado. */ .faq-item{ background:transparent;border:1.5px solid var(--border); border-radius:var(--r-card);transition:background-color .18s,border-color .18s; } /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .faq-item:hover{background:rgba(18,183,187,.10);border-color:var(--accent)} } .faq-item[open]{background:rgba(18,183,187,.16);border-color:var(--accent)} .faq-item summary{ list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between; gap:28px;padding:20px 20px 20px 30px; } .faq-item summary::-webkit-details-marker{display:none} .faq-q{line-height:1.45} .faq-plus{ flex:0 0 44px;width:44px;height:44px;border-radius:50%; background:rgba(18,183,187,.16);color:var(--text-strong); display:flex;align-items:center;justify-content:center; transition:background-color .18s,color .18s; } /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .faq-item:hover .faq-plus{background:var(--surface);color:var(--accent-on-light)} } .faq-plus svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .faq-plus .ln-v{transform-origin:12px 12px;transition:transform .22s ease} .faq-item[open] .faq-plus .ln-v{transform:scaleY(0)} .faq-a{padding:0 84px 26px 30px;margin-top:-2px} /* La respuesta comparte el navy-900 de la pregunta y va a 18px. La jerarquía la sostiene solo el peso: 500 la pregunta, 400 la respuesta. En navy-800 y 17px quedaba demasiado apagada para el peso que tiene el contenido. */ .faq-a p{font-size:18px;line-height:1.6;color:var(--text-strong)} /* el enlace de descarga dentro de una respuesta: mismo navy del texto, y el subrayado es lo único que lo distingue */ /* Los enlaces de las respuestas se escriben desde el editor, así que no siempre traen la clase: se estilan por posición. */ .faq-link,.faq-a a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .faq-link:hover,.faq-a a:hover{text-decoration-thickness:2.5px} } /* cierre: cuatro secciones seguidas sin acción era mucho scroll sin salida, y esta es justo donde el odontólogo terminó de evaluar. */ .faq-cta{margin-top:36px;display:flex;justify-content:center} /* ══ S07 · CONTACTO ══ Banda teal como marco: todo el contenido vive dentro de la card blanca, así que no hay texto apoyado sobre el verde (donde el navy-800 no pasaría). Las dos columnas estiran juntas y las cards de datos se reparten el alto sobrante en partes iguales. */ .ct-band{background:var(--surface-dark);color:var(--text-on-dark)} .ct{padding-top:96px;padding-bottom:104px} .ct-cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:stretch} .ct-left{display:flex;flex-direction:column;padding:2px 4px} .ct-head{margin-bottom:32px;max-width:520px} .ct-head .eyebrow{margin-bottom:16px;color:var(--navy-300)} .ct-sub{margin-top:14px;font-size:18px;line-height:1.6;color:var(--navy-300)} /* Sin cards: los datos se apoyan sobre el blanco del box y se separan con líneas. Antes eran cinco cajas dentro de una card dentro de un box dentro de una banda — cuatro niveles para cinco datos. Las etiquetas van en teal-900: a 12px el teal del logo daría 2.47:1 y el mínimo para texto chico es 4.5. El 900 llega a 5.41. */ .ct-datos{list-style:none;display:grid;align-content:start} .ct-datos li{ display:grid;gap:5px;padding:18px 0;border-top:1px solid rgba(255,255,255,.18); font-size:17px;line-height:1.5;color:var(--navy-300); } .ct-datos li:first-child{border-top:0;padding-top:0} .ct-datos b{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)} /* Subrayados: los tres valores que son enlaces. Dirección y horario son dato, no acción, así que van sin subrayar. */ .ct-datos a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ct-datos a:hover{text-decoration-thickness:2px} } /* mismo tile translúcido que el bento de CAD CAM: las dos secciones oscuras de la página se construyen con la misma superficie */ .ct-tile{background:var(--tile-on-dark);border-radius:var(--r-card);padding:36px 34px 40px} .ct-form{display:grid;gap:22px} .ct-f{display:grid;gap:8px} .ct-f2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .ct-form label,.ct-form legend{font-size:16px;font-weight:500;color:var(--text-on-dark)} .ct-opt{font-weight:400;color:var(--navy-300)} .ct-form input,.ct-form select,.ct-form textarea{ font-family:var(--f);font-size:16px;color:var(--text-strong);background:var(--surface); border:0;border-radius:var(--r-md);padding:15px 16px;width:100%; } .ct-form textarea{resize:vertical} .ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:2px solid var(--accent);outline-offset:2px} /* flecha propia: la nativa se pega al filo y cambia de forma en cada navegador */ .ct-form select{ appearance:none;-webkit-appearance:none;padding-right:52px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A9A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 20px center;background-size:18px 18px; } .ct-form select:invalid{color:var(--text-muted)} .ct-form fieldset{border:0} .ct-form legend{margin-bottom:11px} .ct-radios{display:flex;gap:24px} .ct-rd{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:400;color:var(--text-on-dark)} .ct-rd input{width:auto;accent-color:var(--accent-on-light)} .ct-submit{width:100%;height:60px;font-size:17px;font-weight:600;margin-top:4px;padding:0} .ct-micro{font-size:14px;color:var(--navy-300);text-align:center;margin-top:-12px} /* Salto al contenido: fuera de pantalla hasta que el teclado lo enfoca. */ .skip{ position:absolute;left:16px;top:-60px;z-index:100; background:var(--surface-dark);color:var(--text-on-dark); padding:13px 22px;border-radius:var(--r-pill); font-size:16px;font-weight:500;text-decoration:none; transition:top .18s; } .skip:focus{top:16px;outline:2px solid var(--accent);outline-offset:3px} #main:focus{outline:none} /* Aviso para quien no es profesional. Oculto por defecto; aparece en lugar del resto del formulario y siempre deja volver atrás. */ .ct-campos{display:grid;gap:22px} .ct-campos[hidden]{display:none} .ct-bloqueo{ display:none;border-radius:var(--r-card); background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22); padding:24px 24px 22px; } .ct-bloqueo[data-on]{display:block} .ct-bloqueo:focus{outline:none} .ct-bloqueo h3{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--text-on-dark)} .ct-bloqueo p{margin:0;font-size:16px;line-height:1.55;color:var(--navy-300);text-wrap:pretty} .ct-volver{ margin-top:18px;min-height:44px;background:none;border:0;padding:0;cursor:pointer; font-family:var(--f);font-size:16px;font-weight:500;color:var(--accent); text-decoration:underline;text-underline-offset:4px;transition:color .18s; } /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ct-volver:hover{color:var(--mint)} } .ct-volver:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* confirmación: reemplaza al formulario en su lugar, no un cartel flotante */ .ct-exito{display:none;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:28px 8px 24px} .ct-exito[data-visible]{display:flex} .ct-exito:focus{outline:none} .ct-exito-ic{width:64px;height:64px;border-radius:50%;background:var(--surface-mint);display:flex;align-items:center;justify-content:center} .ct-exito-ic svg{width:28px;height:28px;fill:none;stroke:var(--accent-on-light);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ct-exito h3{font-size:24px;font-weight:500;letter-spacing:-.4px;color:var(--text-on-dark)} .ct-exito p{font-size:17px;line-height:1.55;color:var(--navy-300);max-width:360px} /* ══ S08 · FOOTER ══ Cinco columnas: marca, navegación, contacto, recursos y dirección. En blanco: el contacto de arriba es navy, así que el corte se da solo. Los rótulos van en teal-900 — el teal del logo a ese tamaño no llega al contraste mínimo para texto chico. */ .ft{background:var(--surface);color:var(--text-strong)} .ft-in{padding-top:72px;padding-bottom:30px} .ft-cols{display:grid;grid-template-columns:1.15fr 1fr 1.1fr 1.1fr 1.15fr;gap:40px} .ft-logo{display:block;width:78px;height:78px} .ft-tag{margin-top:18px;font-size:15px;line-height:1.6;color:var(--text-body)} .ft-lb{display:block;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-900);margin-bottom:18px} .ft-nav{display:grid;gap:11px;font-size:16px;color:var(--text-body)} .ft-ct{list-style:none;display:grid;gap:11px;font-size:16px;color:var(--text-body)} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ft-nav a:hover,.ft-ct a:hover{text-decoration:underline;text-underline-offset:3px} } .ft-dir{font-size:16px;line-height:1.65;color:var(--text-body)} /* La dirección abre Google Maps. Va subrayada desde el arranque y no solo al pasar el mouse: en un teléfono no hay hover, y si no se ve que es un enlace nadie lo toca. */ .ft-dir .ft-mapa{ color:inherit;text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(66,66,128,.45);transition:text-decoration-color .18s,color .18s; } @media (hover:hover){ .ft-dir .ft-mapa:hover{color:var(--accent-on-light);text-decoration-color:var(--accent-on-light)} } /* En el pie no va un botón: es un recurso más de la lista, no una acción principal. Ícono adelante y el texto subrayado, como el resto de los enlaces. Mismo color y mismo grosor de subrayado que los demás enlaces del pie: con el navy más oscuro y el trazo de 1.5px parecía en negrita al lado de ellos. */ .ft-dl{ display:inline-flex;align-items:flex-start;gap:9px;font-size:16px;font-weight:400; color:var(--text-body);transition:color .18s; } /* si el texto cae en dos renglones, la flecha se alinea con el primero */ .ft-dl svg{margin-top:4px} .ft-dl span{text-decoration:underline;text-underline-offset:3px} /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ft-dl:hover{color:var(--accent-on-light)} .ft-dl:hover span{text-decoration-color:var(--accent-on-light)} } .ft-dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ft-bar{ margin-top:60px;padding-top:26px;border-top:1px solid rgba(25,25,100,.18); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:14px;color:var(--text-muted); } /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ft-bar a:hover{text-decoration:underline;text-underline-offset:3px} } /* ── responsive ── */ @media(max-width:1180px){ :root{--margin:56px} .hero{gap:52px} .stats-strip{grid-template-columns:1fr 1fr;gap:24px 28px} /* de a dos por fila: las cuatro primeras llenan dos filas y la quinta queda centrada abajo, con el mismo criterio que en escritorio */ .svc-grid{grid-template-columns:repeat(4,1fr)} .svc-grid>.svc-card:nth-child(4){grid-column:auto/span 2} .svc-grid>.svc-card:nth-child(5){grid-column:2/span 2} .cad-bento{gap:20px} .cad-media{min-height:260px} .cad-copy{padding:36px 32px} .flow-grid{grid-template-columns:1fr 1fr} .about-split{gap:48px} .care-grid{gap:16px} .care-card{min-height:0} } @media(max-width:1024px){ :root{--margin:32px;--r-hero:24px;--r-card:14px} /* el menú pasa a panel desplegable y aparece la hamburguesa. El CTA del nav se oculta: repite el del hero, que está a dos dedos de distancia, y juntos se pisan. Queda dentro del panel. */ .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px} .nav-toggle{display:flex;order:3} .nav-inner>.btn{display:none} .nav-links{ display:none;order:4;width:100%; position:absolute;left:0;right:0;top:100%; background:var(--surface-mint); padding:8px var(--margin) 22px; box-shadow:0 14px 28px rgba(25,25,100,.10); } .nav-links[data-open]{display:grid;gap:2px} .nav-links a{ display:flex;align-items:center;min-height:52px; padding:0 16px;font-size:17px;border-radius:var(--r-md); } /* el CTA cierra el panel, separado de las secciones por una línea */ .nav-links .btn{ display:inline-flex; margin-top:14px;padding-top:0;justify-content:center; min-height:52px;font-size:17px; } .nav-links .nav-cta-sep{display:block;height:1px;background:rgba(25,25,100,.16);margin:10px 16px 4px} /* ── La barra se queda pegada, pero sin robar pantalla ── Se esconde al bajar y vuelve apenas hacés el gesto de subir: mientras se lee no ocupa nada, y está ahí en el momento en que querés cambiar de sección. Sin esto, desde el formulario había que scrollear la página entera para volver arriba. Quién la esconde y quién la trae es lg.js. */ .nav-band{ position:sticky;top:0; transition:top .28s cubic-bezier(.4,0,.2,1),box-shadow .2s ease; } /* Se esconde subiendo el punto donde se pega, NO con transform. Un transform sobre un elemento sticky es un problema conocido de Safari en iPhone: el navegador lo manda a una capa aparte y después no recalcula bien la posición pegada, así que la barra se iba y no volvía. Moviendo el top no se toca el modelo de capas y la animación es la misma. -140px es más que el alto de la barra: alcanza para que salga entera. */ .nav-band[data-oculta]{top:-140px} /* una línea apenas, para despegarla del contenido que le pasa por debajo */ .nav-band[data-fija]{box-shadow:0 1px 0 rgba(25,25,100,.12)} /* el salto de ancla no puede dejar el título tapado por la barra */ section[id]{scroll-margin-top:104px} /* Contacto llega distinto a propósito. Es el destino de "Consultá tu caso", y con el margen general se aterrizaba 91px por encima del titular: media pantalla de aire antes de lo que la persona vino a hacer. Con este número el titular queda apenas debajo de la barra. El antetítulo "CONTACTO" pasa por detrás, y está bien: ya sabés dónde estás, apretaste el botón. Si querés más o menos aire, es este número y nada más. */ /* El número sale de una cuenta, no del ojo: del borde de la sección al antetítulo hay 89px y la barra mide 108. Para que "CONTACTO" quede enteramente por detrás, la sección tiene que empezar como mucho a 19px. Con 18 queda tapado con un pelo de margen, y el titular cae 15px debajo de la barra — es todo el aire disponible sin que el antetítulo asome. */ #contacto{scroll-margin-top:18px} /* En una sola columna esta lista y el pie quedan a dos pantallas y repiten los mismos cinco datos. Arriba se dejan los de acción — WhatsApp, mail y el horario, que contesta "¿me responden hoy?" justo antes de escribir. La dirección y el Instagram siguen completos en el pie. */ /* El .ct-datos adelante no sobra: la regla de arriba es `.ct-datos li`, que pesa más que una clase sola y le ganaba a este display:none. */ .ct-datos .ct-dato--instagram,.ct-datos .ct-dato--direccion{display:none} /* El pie en celular: se va la navegación, no los contactos. La barra de arriba vuelve al subir y trae la hamburguesa con las mismas cinco secciones, así que el menú del pie es un duplicado que suma seis renglones. Los contactos en cambio se quedan completos: un bloque "Contacto rápido" con un solo enlace parece un error, no una decisión. */ .ft-bloque--nav{display:none} .hero{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:60px} .hero-copy{max-width:none} .stats{padding-bottom:60px} .services{padding-top:76px;padding-bottom:76px} .sec-head{margin-bottom:40px} .cad{padding-top:80px;padding-bottom:80px} .cad-bento{grid-template-columns:1fr;gap:16px;margin-top:60px} /* en una columna el orden pasa a foto → texto, foto → texto */ .cad-bento>*:nth-child(3){order:4} .cad-bento>*:nth-child(4){order:3} .cad-media{min-height:230px} .cad-copy{padding:32px 28px} .flow-wrap{margin-top:64px} .about{padding-top:76px;padding-bottom:80px} /* en una columna el texto va primero: es lo que sostiene la sección, las fotos acompañan */ /* en el teléfono el hueco lo ocupa una foto rectangular, no la composición calada: acá el radio sí lo pone el CSS */ .hero-shot img{border-radius:var(--r-hero)} .about-split{grid-template-columns:1fr;gap:36px} .about-copy{order:1} .about-stack{order:2} .about-stack{grid-template-columns:1fr 1fr;display:grid} .about-stack img{height:240px} .about-stack img{min-height:220px} .care{padding-top:76px;padding-bottom:80px} .care-grid{grid-template-columns:1fr;gap:16px;margin-top:44px} .faq{padding-top:76px;padding-bottom:80px} .ct{padding-top:64px;padding-bottom:72px} .ct-cols{grid-template-columns:1fr;gap:32px} .ft-cols{grid-template-columns:1fr 1fr;gap:36px} .ct-f2{grid-template-columns:1fr} .cad-foot{margin-top:44px} } @media(max-width:640px){ :root{--margin:20px;--r-hero:18px;--r-card:12px} .nav{padding-top:18px;padding-bottom:14px} .nav-logo img{width:62px;height:62px} /* con el logo más chico la barra mide menos, y el ancla también */ section[id]{scroll-margin-top:92px} /* misma cuenta con el logo chico: 77px hasta el antetítulo, barra de 94 */ #contacto{scroll-margin-top:16px} .hero{padding-top:40px;padding-bottom:46px;gap:34px} .hero-copy .eyebrow{font-size:13px;letter-spacing:1.6px;margin-bottom:18px} .h1{letter-spacing:-0.6px} .hero-actions{width:100%;margin-top:28px} .hero-actions .btn{flex:1 1 100%} .stats{padding-bottom:48px} .services{padding-top:58px;padding-bottom:58px} .svc-grid{grid-template-columns:1fr;gap:16px} .svc-grid>.svc-card, .svc-grid>.svc-card:nth-child(4), .svc-grid>.svc-card:nth-child(5){grid-column:auto} .svc-media img{height:190px} .svc-body{padding:18px 8px 8px} .svc-title{font-size:19px} .cad{padding-top:60px;padding-bottom:60px} .cad-media{min-height:200px} .cad-bento{margin-top:44px} .cad-copy{padding:28px 24px} .flow-wrap{margin-top:48px} .flow-grid{grid-template-columns:1fr;gap:16px} .flow-step{min-height:0;padding:28px 26px 30px} .flow-num{font-size:40px;margin-bottom:22px} .about{padding-top:58px;padding-bottom:62px} .about-stack{grid-template-columns:1fr} .about-stack img{height:220px} .about-copy p{font-size:16px} .about-stack{grid-template-rows:auto auto} .about-stack img{min-height:200px} .care{padding-top:58px;padding-bottom:62px} .care-card{padding:30px 26px 34px} .faq{padding-top:58px;padding-bottom:62px} .faq-list{margin-top:30px;gap:10px} .faq-item summary{padding:14px 14px 14px 22px;gap:16px} .faq-q{font-size:16px} .faq-a{padding:0 22px 20px 22px} .ct{padding-top:52px;padding-bottom:58px} .ct-tile{padding:26px 22px 30px} .ft-in{padding-top:52px} .ft-cols{grid-template-columns:1fr;gap:32px} .cad-foot{margin-top:38px;gap:16px} .cad-foot .btn{width:100%} } /* ══ TELÉFONO ══ 430px y menos. Todo lo que necesita un ajuste propio respecto del bloque de tablet. */ @media(max-width:430px){ /* — tipografía — El cuerpo sube un paso respecto de desktop. En un teléfono el texto se lee a 30cm y con el triple de densidad, pero la columna mide 350px: a 16px entran pocas palabras por línea y la lectura se vuelve entrecortada. */ .eyebrow{font-size:13px;letter-spacing:1.6px} .svc-tag{font-size:13px;letter-spacing:1.4px} .ct-datos b,.ft-lb{font-size:13px;letter-spacing:1.4px} .h1{line-height:1.14} .h4,.svc-title,.flow-title,.care-card h3{font-size:19px} /* bajadas de sección */ .lead,.cad-sub,.care-sub,.ct-sub{font-size:19px;line-height:1.55} /* cuerpo de texto */ .svc-desc,.flow-desc,.care-card p,.cad-copy p,.cad-list, .about-copy p,.ct-datos li,.ft-nav a,.ft-ct a,.ft-dir,.ft-tag{font-size:17px;line-height:1.6} .faq-q{font-size:18px} .faq-a p{font-size:18px;line-height:1.62} .about-copy p.about-quote{font-size:20px} /* etiquetas y notas al pie */ .ct-form label,.ct-form legend,.ct-rd{font-size:17px} .ct-micro,.cad-note,.ft-bar{font-size:15px} /* — fila de confianza — En una columna con el número al lado de la etiqueta, los cuatro datos se leían como una lista más. En dos columnas y con el número arriba, cada uno vuelve a ser un dato: el número se ve antes que el texto y ocupa el mismo alto que la versión anterior. */ .stats-strip{grid-template-columns:1fr 1fr;gap:30px 22px} .stat{display:block} .stat b{display:block;font-size:36px;letter-spacing:-1.4px;margin-bottom:6px} .stat{font-size:15px;line-height:1.4} /* — áreas táctiles de 44px — */ .ft-nav,.ft-ct{gap:0} .ft-nav a,.ft-ct a{display:flex;align-items:center;min-height:44px} .ct-datos a{display:inline-flex;align-items:center;min-height:44px} .ft-dl{min-height:44px} .ct-rd{min-height:44px;padding-right:8px} .ct-radios{gap:16px} .faq-item summary{min-height:64px} /* — el select no puede perder 52px de ancho en el ícono — */ .ct-form select{padding-right:44px;background-position:right 16px center} /* — espaciado — */ .about-quote{margin-top:22px} .cad-bento{gap:14px} .ft-in{padding-bottom:26px} .ft-bar{margin-top:40px;flex-direction:column;gap:8px} /* — el hero no necesita tanto aire con la pantalla al mínimo — */ .hero{padding-top:32px;padding-bottom:38px;gap:28px} } @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ══════════════════════════════════════════════════════════════════ FORMULARIO DE FLUENT FORMS El plugin resuelve el envío, la validación y el bloqueo condicional, pero trae su propio aspecto. Acá se lo lleva al del sistema: los campos van sobre la tarjeta oscura de contacto, con las mismas medidas, radios y colores que tenía la maqueta. ⚠ POR QUÉ TODOS LOS SELECTORES LLEVAN .frm-fluent-form ADELANTE El CSS del plugin se imprime DESPUÉS que el del tema, porque se encola recién cuando el shortcode se dibuja. Con dos reglas del mismo peso gana la última, o sea la del plugin. Eso hacía que el botón saliera con esquinas de 6px en vez de píldora y el textarea 28px más bajo. La solución no es pelear con !important sino pesar más: sumando .frm-fluent-form cada regla queda por encima de las .ff-default del plugin, y deja de importar el orden de carga. Si agregás una regla nueva acá, mantené el prefijo o te va a pasar lo mismo. ══════════════════════════════════════════════════════════════════ */ /* El aire entre campos va como margen y no como gap de grilla, a propósito: cuando un campo se pliega para desaparecer, el margen se puede animar junto con la altura y el hueco se cierra parejo. Con gap quedaba un salto de 22px al final del movimiento. */ .ct-tile form.frm-fluent-form{display:block} .ct-tile .frm-fluent-form .ff-el-group{margin:0 0 22px} .ct-tile .frm-fluent-form .ff-el-group:last-child{margin-bottom:0} .ct-tile .frm-fluent-form .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:22px} .ct-tile .frm-fluent-form .ff-t-cell{padding:0} .ct-tile .frm-fluent-form .ff-el-input--label label, .ct-tile .frm-fluent-form .ff-el-group>label, .ct-tile .frm-fluent-form legend{ font-family:var(--f);font-size:16px;font-weight:500; color:var(--text-on-dark);margin-bottom:8px;display:block; } .ct-tile .frm-fluent-form .ff-el-input--label.ff-el-is-required label:after{color:var(--accent)} .ct-tile .frm-fluent-form input[type=text], .ct-tile .frm-fluent-form input[type=email], .ct-tile .frm-fluent-form input[type=tel], .ct-tile .frm-fluent-form input[type=number], .ct-tile .frm-fluent-form select, .ct-tile .frm-fluent-form textarea{ font-family:var(--f);font-size:16px;line-height:1.5; color:var(--text-strong);background:var(--surface); border:0;border-radius:var(--r-md);padding:15px 16px;width:100%; box-shadow:none;height:auto; } .ct-tile .frm-fluent-form textarea{resize:vertical;min-height:118px} /* El anillo teal es para los campos donde se escribe, que son rectángulos. Antes esto decía input:focus a secas y agarraba también los radios: quedaba un cuadrado alrededor de un círculo, y encima pegado después del click, porque el radio conserva el foco. */ .ct-tile .frm-fluent-form input[type=text]:focus, .ct-tile .frm-fluent-form input[type=email]:focus, .ct-tile .frm-fluent-form input[type=tel]:focus, .ct-tile .frm-fluent-form input[type=number]:focus, .ct-tile .frm-fluent-form select:focus, .ct-tile .frm-fluent-form textarea:focus{ outline:2px solid var(--accent);outline-offset:2px;border:0;box-shadow:none; } /* Los radios no muestran nada al tocarlos con el dedo o el mouse, pero sí cuando se llega con el teclado: sin eso, quien navega con Tab no sabría dónde está parado. Y redondo, para que acompañe la forma del control. */ .ct-tile .frm-fluent-form input[type=radio]:focus{outline:none} .ct-tile .frm-fluent-form input[type=radio]:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:50%; } .ct-tile .frm-fluent-form select{ appearance:none;-webkit-appearance:none;padding-right:52px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A9A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 18px center;background-size:20px; } .ct-tile .frm-fluent-form .ff-el-form-check{display:inline-flex;align-items:center;gap:8px;margin:0 24px 0 0} .ct-tile .frm-fluent-form .ff-el-form-check-label{ font-family:var(--f);font-size:16px;font-weight:400;color:var(--text-on-dark);margin:0; } .ct-tile .frm-fluent-form .ff-el-form-check input{width:auto;accent-color:var(--accent-on-light)} /* El botón del diseño es una píldora a todo el ancho. El .ff-btn-lg del plugin lo dejaba en 6px de radio: por eso el prefijo. */ .ct-tile .frm-fluent-form .ff-btn-submit, .ct-tile .frm-fluent-form .ff_btn_style{ width:100%;height:60px;border:0;border-radius:var(--r-pill); background:var(--accent);color:var(--text-on-teal); font-family:var(--f);font-size:17px;font-weight:600;cursor:pointer; transition:background-color .18s,color .18s; } /* Solo con mouse: en una pantalla táctil el navegador aplica :hover al tocar y lo deja puesto hasta que tocás otra cosa, así que el color del hover quedaba pegado como una sombra rara. */ @media (hover:hover){ .ct-tile .frm-fluent-form .ff-btn-submit:hover, .ct-tile .frm-fluent-form .ff_btn_style:hover{ background:var(--surface-dark);color:var(--text-on-dark); } } .ct-tile .frm-fluent-form .ff-el-help-message, .ct-tile .frm-fluent-form .ff-description{ font-size:14px;color:var(--navy-300);margin-top:6px; } .ct-tile .frm-fluent-form .error.text-danger, .ct-tile .frm-fluent-form .ff-el-is-error .text-danger{ font-size:14px;color:#FFC9C9;margin-top:6px; } /* Mensaje de confirmación posterior al envío. Va con div adelante porque el formulario ya no está en pantalla y no se puede usar el mismo prefijo. El box-shadow también hay que apagarlo: el plugin le pone una sombra gris pensada para fondos claros, y sobre la tarjeta navy se veía como una mancha. */ .ct-tile div.ff-message-success{ background:transparent;border:0;box-shadow:none;color:var(--text-on-dark); text-align:center;padding:28px 8px 24px;font-size:17px;line-height:1.55; } .ct-tile div.ff-message-success h3{ font-size:24px;font-weight:500;letter-spacing:-.4px; color:var(--text-on-dark);margin-bottom:10px; } /* ── La tarjeta cuando el formulario ya se envió ── El mensaje es mucho más bajo que el formulario, así que quedaba pegado arriba con medio metro de vacío abajo. Con el alto congelado por lg.js, acá se lo centra. El atributo lo pone el JS al detectar el mensaje. */ .ct-tile[data-exito]{display:flex;flex-direction:column;justify-content:center} @media(max-width:640px){ .ct-tile .frm-fluent-form .ff-t-container{grid-template-columns:1fr} } @media(max-width:430px){ .ct-tile .frm-fluent-form .ff-el-input--label label, .ct-tile .frm-fluent-form .ff-el-group>label, .ct-tile .frm-fluent-form legend, .ct-tile .frm-fluent-form .ff-el-form-check-label{font-size:17px} }