/* =========================================================================== Alicia Cartagena · estilos. Un solo archivo: cambiar un color es cambiar una línea. Estructura del sistema de Juan (patrones/sistema-hm.md). Su marca (Alicia, 7-oct-2026): «Rojo y gualda», fondo blanco, y tres letras con tres papeles. Contrastes WCAG calculados (el motor los vuelve a medir): --rojo #C60B1E principal, títulos, logo · 5,9 sobre --fondo · 5,4 sobre --fondo-alt --gualda #FFC400 resaltar, niveles, el «¿» · NUNCA texto sobre blanco (tinta sobre gualda 10,9 · granate sobre gualda 6,0) --granate #8E0A18 correcciones y notas a mano: solo pequeños detalles · 9,2 --tinta #2A1417 texto y fondos oscuros · 16,8 --tinta-2 #64524F texto secundario · 7,1 sobre --fondo · 6,6 sobre --fondo-alt blanco sobre --rojo 6,1 · gualda sobre --rojo 3,8: solo en letra grande Sus «degradados» (10-oct-2026): el mismo color, más suave. Fondos, nunca letra. --gualda-suave #FFEDB3 granate encima 8,2 · rojo encima 5,2 --rojo-suave #F88792 granate encima 4,0: solo en letra grande --blanco-suave #DDD2BB granate encima 6,3 · rojo encima 4,0: el rojo, no --granate-suave #F8A0A9 granate encima 4,8 · --tinta-suave #D6A9AF granate 4,6 Letras (alojadas en assets/fuentes, sin pedir nada a Google al abrir): Bricolage Grotesque ExtraBold, títulos · Figtree, textos · Caveat, notas a mano =========================================================================== */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fuentes/bricolage-800.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("assets/fuentes/figtree.woff2") format("woff2"); } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fuentes/caveat-600.woff2") format("woff2"); } :root { --rojo: #C60B1E; --rojo-hondo: #8E0A18; --granate: #8E0A18; --rojo-velo: #FDECEE; --gualda: #FFC400; --gualda-velo: #FFF3C4; --blanco-suave: #DDD2BB; --tinta-suave: #D6A9AF; --rojo-suave: #F88792; --gualda-suave: #FFEDB3; --granate-suave: #F8A0A9; --oro: var(--gualda); --fondo: #FCFBF9; --fondo-alt: #F6F2EC; --blanco: #FFFFFF; --tinta: #2A1417; --tinta-2: #64524F; --linea: #EADFD7; --t-s: 1rem; --t: 1.125rem; --t-l: 1.3rem; --t-xl: 1.6rem; --h1: clamp(2rem, 5.2vw, 3.3rem); --h2: clamp(1.6rem, 3.6vw, 2.3rem); --h3: 1.3rem; --e1: .4rem; --e2: .8rem; --e3: 1.2rem; --e4: 2rem; --e5: 3.2rem; --e6: 5rem; --barra: 64px; --radio: 16px; --sombra: 0 1px 2px rgb(42 20 23 / .06), 0 12px 30px -16px rgb(42 20 23 / .28); --titulo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mano: "Caveat", "Segoe Print", "Bradley Hand", cursive; } *, *::before, *::after { box-sizing: border-box; } /* Sin scroll suave: al entrar por un ancla desde otra página se llega al momento. */ html { scroll-padding-top: calc(var(--barra) + 1.4rem); } body { margin: 0; font: var(--t)/1.65 var(--texto); color: var(--tinta); background: var(--fondo); } img, svg, video { max-width: 100%; height: auto; } figure { margin: 0; } blockquote { margin: 0 0 var(--e3); } .tabla { overflow-x: auto; margin: 0 0 var(--e3); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); } .tabla table { margin: 0; box-shadow: none; } .tabla tbody td:first-child { font-weight: 700; color: var(--tinta); } table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e3); background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); } caption { caption-side: bottom; text-align: left; padding-top: var(--e2); } th, td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); } th { font-size: var(--t-s); color: var(--tinta-2); background: var(--fondo-alt); } tbody tr:last-child td { border-bottom: 0; } .solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } a { color: var(--rojo); text-underline-offset: .15em; } :where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; } :where(p, li, td) a:where([href^="https://wa.me"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } h1, h2, h3 { font-family: var(--titulo); font-weight: 800; line-height: 1.12; text-wrap: balance; color: var(--tinta); letter-spacing: -.015em; } h1, h2 { color: var(--rojo); } h1 { font-size: var(--h1); margin: 0 0 var(--e3); } h2 { font-size: var(--h2); margin: 0 0 var(--e3); } h3 { font-size: var(--h3); margin: var(--e4) 0 var(--e1); } p { margin: 0 0 var(--e3); } .contenedor { width: min(100% - 2.2rem, 70rem); margin-inline: auto; } .estrecho { max-width: 44rem; } /* El texto estrecho arranca en el mismo borde que el resto (sin zigzag de ejes). */ .contenedor.estrecho { margin-inline: max(1.1rem, calc((100% - 70rem) / 2)) auto; } /* Un titular después de un bloque de texto necesita aire encima. */ :where(p, ul, ol, table, .precios, .datos-lista) + h2 { margin-top: var(--e5); } .seccion { padding: var(--e5) 0; } .seccion--alt { background: var(--fondo-alt); } /* El cierre de cada página. Alicia (10-oct): rojo suave, letras granate y menos alto. Granate sobre rojo suave = 4,0: solo en letra grande (el título y esta frase, en negrita a 1,2 rem, cuentan como grandes). */ .seccion--rojo { background: var(--rojo-suave); color: var(--granate); border-bottom: 5px solid var(--oro); } .seccion.seccion--rojo { padding: var(--e4) 0; } .seccion--rojo a:not(.boton) { color: var(--granate); } .seccion--rojo h2 { color: var(--granate); } .seccion--rojo p { color: var(--granate); font-weight: 700; font-size: 1.2rem; } .antetitulo { margin: 0 0 var(--e2); color: var(--rojo); font-weight: 700; font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; } .entradilla { font-size: var(--t-l); color: var(--tinta-2); max-width: 38rem; } td a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .micro { margin: var(--e2) 0 0; color: var(--tinta-2); font-size: var(--t-s); } .nota { color: var(--tinta-2); font-size: var(--t-s); } /* --- barra fija --- */ .salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--blanco); } .salto:focus { left: 1rem; } /* Alicia (8-oct): cabecera gualda. El menú, en granate (5,96 sobre gualda); en blanco con borde granate, como en sus anuncios, daría 1,6 y en letra pequeña se emborrona. */ /* Alicia (10-oct): fondo gualda suave (el menú granate da 8,2). */ .barra { position: sticky; top: 0; z-index: 50; background: var(--gualda-suave); border-top: 4px solid var(--rojo); border-bottom: 1px solid rgb(142 10 24 / .25); } .barra__in { display: flex; align-items: center; gap: var(--e3); min-height: var(--barra); } .barra__marca { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; color: var(--granate); text-decoration: none; font-family: var(--titulo); font-weight: 800; font-size: 1.15rem; line-height: 1.1; } .barra__marca small { display: block; font: 600 .85rem/1.2 var(--texto); color: var(--tinta); } .barra__a { display: grid; grid-auto-flow: column; place-items: center; place-content: center; width: 46px; height: 40px; border-radius: 10px; background: var(--rojo); color: #fff; font-family: var(--titulo); font-weight: 800; font-size: 1.2rem; letter-spacing: -.04em; } .barra__q { color: var(--gualda); } .barra .solo-escritorio { display: none; } .nav-escritorio { display: none; gap: .1rem; } .nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; white-space: nowrap; color: var(--granate); font-weight: 700; text-decoration: none; border-radius: 8px; } .nav-escritorio a:hover { background: rgb(255 255 255 / .5); } .nav-escritorio a[aria-current="page"] { color: var(--granate); text-decoration: underline 3px; text-underline-offset: .4em; } .nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid var(--granate); color: var(--granate); border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; } .nav-movil summary::-webkit-details-marker { display: none; } .nav-movil nav { position: absolute; left: 0; right: 0; top: calc(var(--barra) + 4px); max-height: calc(100vh - var(--barra) - 66px); max-height: calc(100dvh - var(--barra) - 66px); /* cabecera y barra fija de abajo */ overflow-y: auto; overscroll-behavior: contain; display: grid; background: var(--blanco); border-bottom: 1px solid var(--linea); padding: var(--e1) 1.1rem var(--e3); box-shadow: var(--sombra); } .nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); } .nav-movil nav a[aria-current="page"] { color: var(--rojo); font-weight: 700; } /* --- botones: píldora --- */ .boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: .6rem 1.4rem; border-radius: 999px; background: var(--rojo); color: #fff; font-weight: 700; text-decoration: none; border: 2px solid var(--rojo); box-shadow: 0 8px 18px -10px rgb(198 11 30 / .55); } .boton:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); } .boton--sec { background: var(--blanco); color: var(--rojo); box-shadow: none; } .boton--sec:hover { background: var(--rojo-velo); color: var(--rojo-hondo); } /* Su botón gualda con borde granate. Las letras, granate (5,96): blancas sobre gualda darían 1,6. */ .seccion--rojo .boton { background: var(--gualda); color: var(--granate); border-color: var(--granate); box-shadow: 0 8px 18px -10px rgb(42 20 23 / .6); } .seccion--rojo .boton:hover { background: #FFD84D; color: var(--granate); border-color: var(--granate); } .boton, .micro { text-wrap: balance; } .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); } /* --- portada --- */ .hero { padding: var(--e5) 0 var(--e6); background: var(--fondo); } .hero__rej { display: grid; gap: var(--e4); align-items: center; } .hero__foto { position: relative; max-width: 22rem; margin-inline: auto; } .hero__foto img { display: block; width: 100%; border-radius: 28px 28px 120px 28px; box-shadow: var(--sombra); aspect-ratio: 4 / 5; object-fit: cover; } .hero__foto figcaption { position: absolute; left: -.6rem; bottom: 1.2rem; background: var(--blanco); border-radius: 12px; padding: .55rem .9rem; box-shadow: var(--sombra); font-size: var(--t-s); line-height: 1.3; } .hero__foto figcaption b { display: block; font-family: var(--titulo); color: var(--rojo); font-size: 1.1rem; } .hero-int { padding: var(--e5) 0 var(--e4); background: var(--fondo); border-bottom: 1px solid var(--linea); } .migas { font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e2); } .migas a { color: var(--tinta-2); } /* --- cifras --- */ .cifras { display: grid; gap: var(--e2); grid-template-columns: repeat(2, 1fr); list-style: none; margin: calc(-1 * var(--e5)) 0 0; padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); position: relative; } .cifras li { display: grid; gap: .1rem; padding: var(--e2); } .cifras b { font-family: var(--titulo); font-size: var(--t-xl); color: var(--rojo); line-height: 1.1; } .cifras li > span { font-size: var(--t-s); color: var(--tinta-2); line-height: 1.35; } .cifras__fuente { margin: var(--e2) 0 0; font-size: var(--t-s); color: var(--tinta-2); } /* --- tarjetas y triaje --- */ .rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .tarjeta { position: relative; display: flex; flex-direction: column; padding: var(--e4) var(--e3) var(--e3); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); color: var(--tinta); } .tarjeta h3 { margin: 0 0 var(--e1); } .tarjeta h3 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rojo); text-decoration: none; } .tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radio); } .tarjeta h3 a:focus-visible { outline: none; } .tarjeta:has(a:focus-visible) { outline: 3px solid var(--rojo-hondo); outline-offset: 2px; } .tarjeta p { margin: 0; color: var(--tinta-2); } .tarjeta .mas { display: inline-block; margin-top: auto; padding-top: var(--e2); color: var(--rojo); font-weight: 700; } /* --- pasos --- */ .pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } /* Alicia: los pasos, letras granate (9-oct) sobre gualda suave y todo en negrita (10-oct, 8,2). */ .pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .8rem; align-items: start; padding: var(--e3); background: var(--gualda-suave); color: var(--granate); border-radius: var(--radio); box-shadow: var(--sombra); } .pasos li::before { content: counter(paso); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rojo); color: #fff; font: 700 1.2rem/1 var(--titulo); } .pasos h3 { margin: .35rem 0 var(--e1); color: var(--granate); } .pasos p { grid-column: 2; margin: 0; color: var(--granate); font-weight: 700; } /* El rojo sobre gualda se queda en 3,8: los enlaces de los pasos, en granate. */ .pasos a { color: var(--granate); font-weight: 700; } /* --- quién es --- */ .quien { display: grid; gap: var(--e4); align-items: center; } .quien img { display: block; width: 100%; max-width: 20rem; border-radius: var(--radio); box-shadow: var(--sombra); } .datos-lista { list-style: none; padding: 0; margin: 0 0 var(--e3); display: grid; gap: var(--e2); } .datos-lista li { padding-left: 1.6rem; position: relative; } .datos-lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--rojo); } /* --- opiniones --- */ .opis { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .opi { display: flex; flex-direction: column; margin: 0; padding: var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); } .opi blockquote { margin: 0 0 var(--e2); font-family: var(--titulo); font-size: 1.15rem; } .opi blockquote p { margin: 0; } .opi .trad { font-size: var(--t-s); color: var(--tinta-2); margin: 0 0 var(--e2); } .opi figcaption { margin-top: auto; font-size: var(--t-s); color: var(--tinta-2); } .opi figcaption b { color: var(--tinta); } /* --- precios --- */ .precios { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .precio { padding: var(--e4) var(--e3) var(--e3); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); display: grid; gap: var(--e1); align-content: start; } .precio h3 { margin: 0; } .precio .cifra { font: 700 var(--t-xl)/1.1 var(--titulo); color: var(--rojo); } .precio p { margin: 0; color: var(--tinta-2); } .precio--destacado { border: 2px solid var(--oro); } .cinta { justify-self: start; font-size: .9rem; font-weight: 700; color: var(--tinta); background: var(--gualda); border-radius: 999px; padding: .15rem .7rem; } /* --- preguntas --- */ .respuesta { font-size: var(--t-l); } .faq details { border-bottom: 1px solid var(--linea); padding: var(--e1) 0; } .faq summary { min-height: 48px; display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 700; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; margin-left: auto; font: 700 1.4rem/1 var(--titulo); color: var(--rojo); } .faq details[open] summary::after { content: "−"; } .faq details p { color: var(--tinta-2); } /* --- banda de botón a mitad de página --- */ .banda { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra); border-left: 6px solid var(--rojo); } .banda__titulo { font: 700 var(--t-xl)/1.2 var(--titulo); margin: 0; } .banda .acciones { margin-top: 0; } /* --- vídeo --- */ .video { max-width: 26rem; } .video video { display: block; width: 100%; border-radius: var(--radio); background: var(--tinta); box-shadow: var(--sombra); } /* --- avisos de marca y fuentes --- */ /* --- pestillo (solo en la maqueta) --- */ .pestillo { outline: 2px dashed var(--oro); outline-offset: 8px; border-radius: 6px; margin: var(--e3) 0; } .pestillo__nota { display: inline-block; margin: 0 0 var(--e2); padding: .2rem .7rem; border-radius: 999px; background: var(--gualda-velo); color: var(--tinta); font-size: .9rem; font-weight: 700; } /* --- test de nivel --- */ .test { min-height: 30rem; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: var(--e4) var(--e3); } .test__progreso { display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t-s); color: var(--tinta-2); margin-bottom: var(--e2); } .test__barra { height: 8px; background: var(--fondo-alt); border-radius: 999px; overflow: hidden; margin-bottom: var(--e4); } .test__barra span { display: block; height: 100%; width: 0; background: var(--rojo); transition: width .25s; } .test__pregunta { font: 700 var(--t-xl)/1.3 var(--titulo); margin: 0 0 var(--e3); } .test__pregunta:focus { outline: none; } .test__opciones { display: grid; gap: var(--e2); } .test__opcion { display: flex; align-items: center; min-height: 54px; width: 100%; padding: .6rem 1.1rem; border: 2px solid var(--linea); border-radius: 14px; background: var(--fondo); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; } .test__opcion:hover { border-color: var(--rojo); background: var(--rojo-velo); } .test__opcion small { display: block; color: var(--tinta-2); font-size: var(--t-s); } .test__resultado h2 { color: var(--rojo); } .test__nivel { font: 700 clamp(2.4rem, 8vw, 3.6rem)/1 var(--titulo); color: var(--rojo); margin: 0 0 var(--e2); } .test__objetivo { border-left: 4px solid var(--rojo); padding: var(--e2) var(--e3); background: var(--blanco, #fff); font-weight: 600; margin: var(--e3) 0; } .test__compartir { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--e2); color: var(--rojo); font-weight: 600; } .test__volver { margin-top: var(--e3); background: none; border: 0; color: var(--rojo); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; } /* --- legal --- */ .legal h2 { font-size: var(--t-xl); margin-top: var(--e4); } /* --- pie --- */ /* Alicia (8-oct): pie blanco con letra negra, en dos líneas (quién y cómo localizarla; las páginas). */ /* Alicia (10-oct): fondo blanco suave, letras en rojo y todo en negrita. Va en granate, su rojo oscuro: el rojo sobre este fondo da 4,0 y el mínimo es 4,5. */ .pie { padding: var(--e4) 0 calc(var(--e3) + 64px); background: var(--blanco-suave); color: var(--granate); font-size: var(--t-s); font-weight: 700; border-top: 1px solid rgb(142 10 24 / .25); } .pie p { margin: 0 0 var(--e1); } .pie a { color: var(--granate); } .pie__quien { margin: 0 0 var(--e1) !important; } .pie__enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.1rem; } .pie__enlaces a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .pie__marca { margin-top: var(--e2) !important; padding-top: var(--e2); border-top: 1px solid rgb(142 10 24 / .25); color: var(--granate); font-size: .85rem; } .pie__demo { color: var(--granate); font-size: .85rem; } /* --- barra fija del móvil --- */ .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--rojo); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); padding-bottom: env(safe-area-inset-bottom, 0); } .barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 .6rem; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 1rem; } .barra-movil a:first-child { flex: 1.5; } .barra-movil a + a { border-left: 1px solid rgb(255 255 255 / .35); } .cookies-abierto .barra-movil { display: none; } /* --- firma de Alicia (páginas interiores) y su cara en el móvil --- */ .test__resultado .firma { margin: 0 0 var(--e2); } .firma { display: flex; align-items: center; gap: .7rem; margin: var(--e3) 0 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.35; } .firma img, .hero__cara img { display: block; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--blanco), var(--sombra); } .firma b { color: var(--tinta); } .hero__ante { display: block; font-family: var(--texto); line-height: 1.5; letter-spacing: .06em; } .hero__titular { display: block; } .firma picture { flex: none; } .hero__cara img { width: 60px; height: 60px; } .hero-int + .seccion { padding-top: var(--e4); } /* En el test, la pregunta y sus respuestas, cuanto antes. */ .hero-int--corto { padding: var(--e4) 0 var(--e2); } .hero-int--corto .entradilla { margin-bottom: 0; } @media (max-width: 599px) { /* Las tres respuestas de la primera pregunta tienen que asomar sobre la barra. */ .hero-int--corto { padding-top: var(--e3); } .hero-int--corto h1 { font-size: 1.65rem; margin-bottom: var(--e2); } .hero-int--corto .entradilla { font-size: var(--t); } .hero-int--corto .migas { margin-bottom: var(--e1); } } @media (max-width: 599px) and (max-height: 700px) { /* Móvil pequeño: lo de «10 preguntas» ya lo dice la tarjeta del test. */ .hero-int--corto .migas, .hero-int--corto .entradilla { display: none; } .hero-int--corto + .seccion .test { padding: var(--e3) var(--e3); } .test__opcion { min-height: 48px; padding-block: .45rem; } .test__progreso { margin-bottom: var(--e1); } .test__barra { margin-bottom: var(--e3); } .test__pregunta { font-size: 1.3rem; margin-bottom: var(--e2); } } .hero-int--corto + .seccion { padding-top: var(--e2); } .hero-int--corto + .seccion .test { padding-top: var(--e3); } .hero-int blockquote { margin: var(--e3) 0 var(--e1); padding-left: var(--e3); border-left: 4px solid var(--oro); font: italic 400 1.35rem/1.4 var(--titulo); color: var(--tinta); } .hero-int blockquote p { margin: 0; } /* --- cita grande en lugar de repetir la foto --- */ .cita-grande { align-self: stretch; display: grid; align-content: center; padding: var(--e4); background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra), inset 0 4px 0 var(--oro); } .cita-grande blockquote { margin: 0 0 var(--e2); font: italic 400 clamp(1.4rem, 3vw, 1.8rem)/1.35 var(--titulo); color: var(--tinta); } .cita-grande blockquote p { margin: 0; } .cita-grande figcaption { font-size: var(--t-s); color: var(--tinta-2); } .quien__foto-movil img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; border-radius: var(--radio); box-shadow: var(--sombra); } /* --- el test, en banda encima de las tarjetas --- */ .banda--test { margin-bottom: var(--e3); border-left-color: var(--oro); } .banda--test p { margin: 0; } .banda--test .banda__titulo { margin-bottom: var(--e1); } /* --- el simulacro: una sola tarjeta, sin estirarse --- */ #simulacro .precios { grid-template-columns: minmax(0, 22rem); margin-bottom: var(--e3); } /* --- legales: el WhatsApp en una línea de texto no rompe el renglón --- */ .legal li a[href^="https://wa.me"], .entradilla a[href^="https://wa.me"] { display: inline; padding-block: .7rem; } @media (max-width: 400px) { th, td { padding: .5rem .55rem; font-size: .95rem; } td { overflow-wrap: anywhere; } .tabla { box-shadow: var(--sombra), inset -14px 0 10px -12px rgb(42 20 23 / .18); } } @media (max-width: 599px) { /* Portada en el móvil: sin repetir lo que ya se lee y con su cara arriba. */ .hero__foto { display: none; } .hero { padding-top: var(--e3); } /* Su cara a la izquierda del antetítulo; el titular, debajo. */ .hero__cara { float: left; margin: 0 .8rem .3rem 0; } .hero__ante { display: flex; align-items: center; min-height: 60px; font-size: .85rem; letter-spacing: .03em; } .hero__titular { clear: left; } .hero .entradilla { font-size: 1.15rem; } .rejilla--4 .tarjeta { border-left: 4px solid var(--oro); } .rejilla--4 .tarjeta h3 { margin: 0; } .rejilla--4 .tarjeta { padding: var(--e2) var(--e3); } .rejilla--4 .tarjeta p, .rejilla--4 .tarjeta .mas { display: none; } .rejilla--4 .tarjeta h3 a { align-items: flex-start; } .rejilla--4 .tarjeta h3 a::before { content: "→"; flex: none; margin-right: .6rem; } .rejilla--4 { gap: var(--e2); } .seccion--valoracion .pasos p { display: none; } .seccion--valoracion .pasos li { padding: var(--e3); } .acciones .boton { width: 100%; } .hero-int .entradilla { font-size: 1.15rem; } .hero-int .micro { margin-top: var(--e1); } .hero-int .firma { margin-top: var(--e2); } /* La cinta va encima del borde (DIS-13, fuera de la rejilla): el precio, en su línea. */ .hero-int .precio { padding: var(--e4) var(--e3) var(--e3); } .cita-grande { padding: var(--e3); } } @media (min-width: 600px) { .hero__cara, .quien__foto-movil { display: none; } } @media (min-width: 600px) and (max-width: 899px) { .hero__rej { grid-template-columns: 1fr 14rem; } } @media (min-width: 700px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } .banda--test { grid-template-columns: 1fr auto; align-items: center; } } @media (min-width: 1100px) { /* Los dos botones de la portada, en fila: valoración y test se leen juntos. */ .hero .hero__rej { grid-template-columns: 1.75fr 1fr; } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 899px) { /* «Sobre mí» en el móvil: primero quién es y el botón; la foto, debajo. */ .hero-int .quien picture { order: 2; } .hero-int .quien img { width: 100%; max-width: 30rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 48%; } } @media (min-width: 600px) { .cifras { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { /* Preguntas frecuentes: el titular a la izquierda y las preguntas a la derecha. */ .contenedor.estrecho.faq { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 15rem 1fr; column-gap: var(--e5); align-items: start; } .faq > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--barra) + 2rem); } .faq > details { grid-column: 2; } .hero__rej { grid-template-columns: 1.5fr 1fr; } .hero__foto { justify-self: end; margin-inline: 0; max-width: 23rem; } /* El cierre rojo a todo el ancho: texto a la izquierda, botón a la derecha. */ .seccion--rojo .contenedor.estrecho { max-width: none; margin-inline: auto; display: grid; grid-template-columns: 1fr auto; column-gap: var(--e5); align-items: center; } .seccion--rojo .contenedor > :not(.acciones) { grid-column: 1; } .seccion--rojo .acciones { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .seccion--rojo p { margin: 0; } .quien { grid-template-columns: 20rem 1fr; } .seccion { padding: var(--e6) 0; } } @media (min-width: 1280px) { /* un solo punto de ruptura para la cabecera de escritorio: con 7 enlaces no cabe antes (y en Mac la letra es más ancha) */ .nav-escritorio { display: flex; } .nav-movil, .barra-movil { display: none; } .barra .solo-escritorio { display: inline-flex; flex: none; white-space: nowrap; min-height: 44px; padding: .3rem 1rem; } .pie { padding-bottom: var(--e4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media print { .barra, .barra-movil, .nav-movil, .salto { display: none !important; } /* Alicia revisa la web imprimiéndola en PDF: que salgan sus colores de verdad (sin esto el navegador quita los fondos y todo parece gris). */ html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Alicia (10-oct): que cada título salga en la misma hoja que lo que le sigue. */ h1, h2, h3, .antetitulo, .banda__titulo { break-after: avoid-page; } .tarjeta, .pasos li, .banda, .error-frecuente, .precio, .cita-grande, .opi, .faq details { break-inside: avoid; } } /* Optimización 1-oct-2026: ruta de la nacionalidad, saltos y precio en cabecera */ .hero-int .precios { grid-template-columns: minmax(0, 22rem); margin: var(--e3) 0; } .precio .precio__nombre { font: 700 1.2rem/1.2 var(--titulo); color: var(--tinta); } @media (min-width: 600px) and (max-width: 1099px) { .hero .acciones { flex-direction: column; align-items: stretch; max-width: 26rem; } } @media (max-width: 359px) { th, td { padding: .45rem .4rem; font-size: .88rem; } } /* Migas: un