/* ===================================================================== home.css — estilos page-scoped del home nuevo (Doco style library). Solo lo que los parciales de landings/principal/ds/ necesitan y que NO existe ya en los componentes del bundle: el drawer móvil (offcanvas de Bootstrap) y los dropdowns del nav. Reglas del sistema: selectores con clase (nunca elementos sueltos), valores vía var(--token) de tokens.css, breakpoints en 767.98px / 991.98px. Se enlaza SOLO desde páginas que extienden base_ds.html (en su block extra_css), después del bundle. ===================================================================== */ /* --- Contención de gutters de Bootstrap (root fix) --- Las filas .row.g-5 de docoweb usan gutters de 48px, que Bootstrap implementa con márgenes negativos de -24px en la fila. El .container del DS solo tiene 12px de padding lateral, así que esos -24px sobresalen 12px y provocan scroll horizontal en cualquier viewport donde el container toca los bordes (<1200px). En vez de bajar el gutter por fila (perdíamos la fidelidad de 48px en tablet), recortamos el pequeño desborde a nivel de sección: overflow-x: clip corta lo que sale por los lados SIN crear un scroll-container (no afecta position: sticky ni el scroll vertical, a diferencia de overflow: hidden). Así g-5 rinde 48px de gutter en TODOS los anchos ≥768px, igual que docoweb, y la página nunca hace scroll lateral. Se aplica a las tres bandas: cada sección y el footer son wrappers full-bleed, el recorte cae fuera del contenido. */ /* overflow-x: clip contiene los gutters negativos de g-5 (ver comentario largo abajo). El hero se incluye porque .section--hero NO es .home-section y también usa filas con gutter; sin clip volvería el scroll lateral. */ .home-section, .section--hero, .site-footer { overflow-x: clip; } /* --- Ritmo vertical del home. Override scoped: section.css queda intacto. ESCRITORIO: whitespace generoso (6rem/space-7) para que la página respire en un scroll ancho — un scroll de web pide más aire que una escala de deck, y como quitamos los hairlines entre secciones, el espacio es AHORA el único separador, así que tiene que hacer bien ese trabajo. MÓVIL: apretado (space-5) para no alargar el scroll en pantalla chica. OJO: home.css se carga DESPUÉS de section.css, así que estas reglas sin media query también ganarían en móvil y pisarían el ritmo de section.css. Por eso repetimos abajo el bloque móvil (space-5/6) para conservarlo. */ .home-section { padding-top: var(--space-7); padding-bottom: var(--space-7); } .section--hero { padding-top: var(--space-7); padding-bottom: var(--space-6); } @media (max-width: 767.98px) { .home-section { padding-top: var(--space-5); padding-bottom: var(--space-5); } .section--hero { padding-top: var(--space-6); padding-bottom: var(--space-5); } } /* ===================================================================== Capa de calidez de marca (BRAND_DOCOKIDS.md) — con moderación. La base sigue siendo editorial; esto es un toque suave, NO un rediseño. ===================================================================== */ /* --- Acento teal de marca (display negro + UNA frase clave en teal, en cada titular de sección). .ds-accent es el genérico para los h2; .ds-accent-real es el mismo teal pero reservado a la frase bandera "pediatra real" (hero + cta-band), que además NUNCA se parte de línea (  en el markup). */ .ds-accent, .ds-accent-real { color: var(--p-verde); } /* --- Insignia RECOMENDADO: override de marca — pill rosa (BRAND_DOCOKIDS.md); subir a docoweb después. NO se edita ds/components/pricing.css (componente compartido intacto); este override scoped documenta la decisión y es reversible. El borde teal de la tarjeta recomendada se conserva (on-brand). */ .pricing-card__eyebrow.ds-badge-recomendado { display: inline-block; background-color: var(--p-rosado); color: var(--paper-pure); padding: 0.25rem 0.6rem; border-radius: 999px; /* pill */ letter-spacing: 0.08em; /* un pelín menos que el eyebrow suelto, cabe en la pill */ } /* --- Anatomía de tarjeta de precio (BRAND_DOCOKIDS.md "Tarjeta de precio"). Overrides scoped en home.css; ds/components/pricing.css queda intacto. Hairline divisoria entre el bloque precio/lead y las features (como el deck). La lista trae margin/padding 0 del componente; aquí le ponemos el borde superior + un padding-top consistente para que lea como un divisor editorial limpio. Se ve igual en la tarjeta estándar y en la recomendada. */ .pricing-card__features { border-top: 1px solid var(--hairline); padding-top: var(--space-4); } /* Footer de la tarjeta en itálica (como el deck). En la recomendada, teal. */ .pricing-card__guarantee { font-style: italic; } .pricing-card--popular .pricing-card__guarantee { color: var(--p-verde); } /* --- Alinear el bloque CTA (botón + nota) al fondo de las 3 tarjetas. Las tarjetas ya son de igual altura (grid). El problema: la lista de features trae flex:1 en el componente, así absorbe TODO el espacio libre y el margin-top:auto del .pricing-card__cta se queda en 0 → el botón queda justo debajo de las features y, como cada tarjeta tiene distinto nº de features, los botones caen a alturas distintas. Solución scoped: quitamos el flex:1 de las features (que se dimensionen a su contenido) y devolvemos el empuje al bloque CTA con margin-top:auto → botón Y nota bajan juntos al fondo y las 3 tarjetas alinean botones entre sí y notas entre sí. */ .pricing-card__features { flex: 0 0 auto; } .pricing-card__cta { margin-top: auto; } /* Aire entre el botón y la nota "*Pago único" / "*Renovación…": sin esto la nota queda pegada al botón. Separación deliberada (~16px). */ .pricing-card__guarantee { margin-top: var(--space-3); } /* La nota "*Pago único" es 1 línea; "*Renovación… — cancela cuando quieras" son 2. Sin reservar altura, la tarjeta de pago único tiene un bloque CTA una línea más corto → su botón cae más abajo que los otros dos. Reservamos 2 líneas de la propia nota (line-height 1.5 × --fs-small, ×2) para que las 3 notas ocupen lo mismo y así los botones Y las notas queden alineados entre las 3 tarjetas. Derivado (no un px suelto): si cambia el tamaño/interlineado, sigue cuadrando. */ .pricing-card__guarantee { min-height: calc(2 * 1.5 * var(--fs-small)); } /* --- Marcador de features: "+" rosa (como el deck consumer de Nati) en vez del em-dash del componente. El "+" lee como "incluido/lo sumas" y amarra con el rol del rosa en la marca. Override scoped; pricing.css intacto. */ .pricing-card__features li::before { content: "+"; color: var(--p-rosado); font-weight: 700; } /* --- Banda de prueba (prueba de 6h): off-ramp para el indeciso, DEBAJO de los 3 planes. Jerarquía DELIBERADAMENTE menor que la grilla para no competir con el CTA ni reanclar barato: borde punteado, fondo apenas gris, botón atenuado y el precio en tono caption. El único acento fuerte sigue siendo "Empieza ya". */ .pricing-trial-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: 4px; background: var(--gris-claro); } .pricing-trial-band__lead { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-body); color: var(--gris-oscuro); margin: 0; } /* Precio en tono caption (gris, pequeño): NO precio-héroe, para no reanclar barato. */ .pricing-trial-band__meta { font-size: var(--fs-small); color: var(--gris-secundario); margin: var(--space-1) 0 0; } .pricing-trial-band__cta { flex: 0 0 auto; margin: 0; } /* Botón atenuado (gris), nunca teal. */ .pricing-trial-band .btn-outline { border-color: var(--hairline); color: var(--gris-secundario); } /* Hover: se MANTIENE outline (solo vira gris→teal). El .btn-outline base rellena el fondo teal con texto blanco; aquí lo dejamos transparente para que el texto siga legible (evita teal sobre teal) y para no competir con "Empieza ya". */ .pricing-trial-band .btn-outline:hover, .pricing-trial-band .btn-outline:focus, .pricing-trial-band .btn-outline:active { background-color: transparent; border-color: var(--p-verde); color: var(--p-verde); } @media (max-width: 575.98px) { .pricing-trial-band { flex-direction: column; align-items: stretch; text-align: center; } .pricing-trial-band .btn-outline { width: 100%; } } /* --- Planes: gap párrafo→tarjetas = 56px, igual que pediatras. Pediatras lo hereda del gutter g-5 (48px de padding de columna + 8px del mt-2); el pricing-grid es CSS grid y no tiene ese padding, así que el gap va explícito. */ .pricing-grid { margin-top: 3.5rem; } /* --- Gap título→contenido consistente (56px) en las secciones con grid CSS. Las secciones con fila Bootstrap (pasos g-4, testimonios g-4) ya dan 56px por el padding del gutter; los grids CSS (beneficios, FAQ) se quedaban en 32px. El h2 aporta 24px (mb-4) + estos 32px = 56px, igual que las filas. */ .value-props-grid, .faq { margin-top: 2rem; } /* --- Cierre (cta-band): sin borde superior. El deck separa bandas con whitespace, no con líneas ("hairlines de más"). El borde propio del componente cta-band.css se anula aquí (scoped, componente intacto). */ .cta-band { border-top: 0; } /* --- Bandas de prueba social (prensa bajo el hero + empresas junto a B2B). Son STRIPS quietos, no secciones: menos padding vertical que .home-section, sin h2 display (solo el kicker rosa las rotula). Los logos van en .logo-row / .logo (logos.css: grises que colorean al hover). overflow-x: clip para que la fila de logos NUNCA cause scroll lateral al envolver en móvil. */ .ds-proof-band { padding-top: var(--space-5); padding-bottom: var(--space-5); overflow-x: clip; } @media (max-width: 767.98px) { .ds-proof-band { padding-top: var(--space-4); padding-bottom: var(--space-4); } } /* Etiqueta "Con el apoyo de" sobre la fila de backers institucionales: caption quieto en gris (NO el kicker rosa de la banda), para distinguir los backers de la prensa. El margin-top separa la fila de backers de los logos de prensa. */ .ds-proof-band__label { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--gris); text-align: center; text-transform: uppercase; letter-spacing: 0.08em; margin: var(--space-5) 0 var(--space-3) 0; } /* --- Pediatras: bio INLINE recortada a altura pareja (decisión de panel: Copywriter/Rams/Marketing/Editorial). La bio vive en la tarjeta (ya no en un modal); line-clamp la recorta por LÍNEAS visuales reales — no por palabras — así las 3 tarjetas miden idéntico sin importar el largo de cada bio (que viene libre de la BD). min-height reserva el alto también para las bios cortas, para que los pies queden alineados. En el template va con |striptags porque description es RichText/HTML (truncar el HTML crudo rompería las etiquetas). */ .doctor__bio { line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(4 * 1.6em); } @media (max-width: 767.98px) { /* En móvil las tarjetas ya se apilan; suelta el clamp para leer la bio entera. */ .doctor__bio { -webkit-line-clamp: unset; overflow: visible; min-height: 0; } } /* --- Planes: estado vacío (sin precios para el país) --- Bloque full-width (fuera de .pricing-grid), texto a tamaño lead/body, con una salida real (WhatsApp / contacto) porque refrescar no trae precios. */ .ds-planes-empty { max-width: var(--measure-narrow); margin-top: var(--space-5); } .ds-planes-empty p { color: var(--gris-secundario); margin: 0 0 var(--space-3); } .ds-planes-empty .btn { margin-top: var(--space-2); } .ds-planes-empty__alt { margin-left: var(--space-3); } /* --- Planes: el aviso de renovación automática sube de --fs-caption (12px, la letra más chica) a --fs-small (14px). Un aviso de pago recurrente NO debe ir en la letra más chica: en 12px se lee como letra chica engañosa. */ .pricing-fine { font-size: var(--fs-small); } /* --- Planes: la nota fina (.pricing-fine) trae un link real ("cancelarla en cualquier momento"). Sin esto queda en #666 igual que el texto y no se lee como link. Subrayado + color de acción para que se note que es clickeable. */ .pricing-fine a { color: var(--gris-secundario); text-decoration: underline; text-underline-offset: 2px; } .pricing-fine a:hover, .pricing-fine a:focus { color: var(--p-verde); } /* --- .btn-link: el componente traía DOS subrayados (text-decoration: underline pegado al texto + un border-bottom hairline más abajo) = doble línea. Dejamos solo el hairline editorial y quitamos el text-decoration. (Bug del componente button.css de docoweb: subir el fix upstream.) */ .btn-link { text-decoration: none; } /* --- Hero CTAs: el flex estiraba el .btn-link a la altura del botón (47px), así que el hairline (border-bottom) quedaba pegado al fondo de la caja, ~27px DEBAJO del texto = subrayado despegado. Centrando los CTAs el link vuelve a su altura de contenido y la línea le queda pegada al texto. */ .hero-ctas { align-items: center; } /* --- Barra CTA fija: oculta cuando #planes está a la vista (ver el IntersectionObserver en index_ds.html). transform en vez de display para no pelear con la media query de sticky-cta.css que ya la esconde en desktop, y para poder animar el deslizamiento. */ @media (max-width: 767.98px) { .sticky-cta { transition: transform 200ms ease; } .sticky-cta--hidden { transform: translateY(100%); pointer-events: none; } } /* --- Nav responsivo: el nav de 6 ítems + login + CTA necesita ~1087px para caber en una fila; abajo de eso se amontona (links a 2 filas, "Empieza ya" partido). Colapsamos al drawer bajo 1200px (xl); nav.css solo lo oculta bajo 768px, aquí extendemos el corte. Las utilities d-xl-* del markup mueven login/dropdown a la hamburguesa en el mismo rango. */ @media (max-width: 1199.98px) { .site-nav .nav-links { display: none; } } /* --- Nav: botón hamburguesa (visible <1200px vía la utility d-xl-none) --- */ .ds-nav-toggle { display: inline-flex; align-items: center; background: none; border: 0; padding: var(--space-1); color: var(--gris-secundario); cursor: pointer; transition: color 150ms ease; } .ds-nav-toggle:hover, .ds-nav-toggle:focus { color: var(--p-verde); } /* --- Nav: saludo del usuario autenticado (desktop) --- Mismo look que .nav-login para que el cluster derecho se vea uniforme. */ .ds-nav-user-btn { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); color: var(--gris-secundario); cursor: pointer; transition: color 150ms ease; } .ds-nav-user-btn:hover, .ds-nav-user-btn:focus { color: var(--p-verde); } /* Avatar de inicial (círculo teal) del menú de cuenta: da anclaje visual de "estás dentro" sin foto que gestionar. Con nombre = inicial; sin nombre = ícono genérico de persona (el color no cambia en hover, solo el texto). */ .ds-nav-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-right: var(--space-2); background: var(--p-verde); color: var(--paper-pure); font-size: var(--fs-caption); font-weight: 500; line-height: 1; } /* --- Nav: toggle de los dropdowns (Soluciones/Recursos) con look de link --- Mismo tratamiento que .nav-links a y .ds-nav-user-btn: un