/* CazaFacturas — sistema de diseño (utilidad fiscal, mobile-first). Marca indigo #5457CD; semáforo fiscal rojo/ámbar/verde como en la app. Tema: por defecto sigue al sistema (prefers-color-scheme). El atributo data-theme en lo fuerza: "light" gana sobre un sistema oscuro y "dark" gana sobre un sistema claro. Lo escribe un script inline en el , antes del primer paint, para que no haya destello blanco. Escalas únicas: radios (--r-sm/--r-md/--r-lg/--r-pill), sombras (--sombra-1/2/3) y espaciado en múltiplos de 4px. Nada de valores sueltos. Medida de lectura: --medida, calibrada en 70 caracteres. */ :root { color-scheme: light dark; /* Lienzo y tinta */ --paper: #ffffff; --paper-0: rgba(255, 255, 255, 0); --surface: #f6f7fb; --ink: #14161f; --ink-2: #4b5063; /* Filete general. El anterior (#e4e6ef) daba 1.25:1 y las filas de tabla no se veían terminar. */ --line: #d7dae8; /* Separadores que sí tienen que leerse: cabecera de tabla, borde de FAQ. */ --line-fuerte: #b9bed4; /* Borde de controles de formulario: 3:1 contra --paper (WCAG 1.4.11). */ --field-line: #767d95; /* Marca */ --brand: #5457cd; --brand-ink: #3f42a8; --brand-soft: #ecedfb; /* Texto que va encima de --brand (botones, viñetas numeradas). */ --btn-ink: #ffffff; /* Semáforo fiscal. Cada par ronda 6:1 sobre su propio fondo. */ --chip-rojo-bg: #fdeaea; --chip-rojo-ink: #a3212a; --chip-ambar-bg: #fcf1dc; --chip-ambar-ink: #7a4d04; --chip-verde-bg: #ddf2e8; --chip-verde-ink: #0a6743; --codigo-bg: #edeff7; --phone: #14161f; /* Radios */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* Sombras: neutras, nunca teñidas de marca. */ --sombra-1: 0 1px 2px rgba(20, 22, 31, .06); --sombra-2: 0 2px 4px rgba(20, 22, 31, .05), 0 10px 24px rgba(20, 22, 31, .08); --sombra-3: 0 18px 44px rgba(20, 22, 31, .18); /* Medidas */ --medida: 40rem; --max: 1080px; --nav-alto: 62px; /* Fraunces trae ejes variables: SOFT y WONK le dan carácter de más, así que los dejamos en 0 y nos quedamos con el eje óptico, que es el que hace que el titular a 48px y el H3 a 19px tengan el mismo peso aparente. */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Salida exponencial: entra rápido y frena. Nada de rebote. */ --sal: 260ms cubic-bezier(.16, 1, .3, 1); } /* Un solo bloque de tokens oscuros, aplicado por las dos vías: sistema oscuro sin elección explícita, y oscuro forzado con el botón. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0f1117; --paper-0: rgba(15, 17, 23, 0); --surface: #161a24; --ink: #eef0f6; --ink-2: #a9afc2; --line: #2b3140; --line-fuerte: #414960; --field-line: #767f9b; --brand: #8b8ef0; --brand-ink: #a9abf5; --brand-soft: #1c1f36; --btn-ink: #14161f; --chip-rojo-bg: #35181b; --chip-rojo-ink: #ffa1a4; --chip-ambar-bg: #332614; --chip-ambar-ink: #f2ba52; --chip-verde-bg: #12281f; --chip-verde-ink: #56d9a3; --codigo-bg: #1d2230; --phone: #262b38; --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 2px 4px rgba(0, 0, 0, .38), 0 10px 24px rgba(0, 0, 0, .46); --sombra-3: 0 18px 44px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { --paper: #0f1117; --paper-0: rgba(15, 17, 23, 0); --surface: #161a24; --ink: #eef0f6; --ink-2: #a9afc2; --line: #2b3140; --line-fuerte: #414960; --field-line: #767f9b; --brand: #8b8ef0; --brand-ink: #a9abf5; --brand-soft: #1c1f36; --btn-ink: #14161f; --chip-rojo-bg: #35181b; --chip-rojo-ink: #ffa1a4; --chip-ambar-bg: #332614; --chip-ambar-ink: #f2ba52; --chip-verde-bg: #12281f; --chip-verde-ink: #56d9a3; --codigo-bg: #1d2230; --phone: #262b38; --sombra-1: 0 1px 2px rgba(0, 0, 0, .4); --sombra-2: 0 2px 4px rgba(0, 0, 0, .38), 0 10px 24px rgba(0, 0, 0, .46); --sombra-3: 0 18px 44px rgba(0, 0, 0, .6); } /* Scrollbars y controles nativos siguen al tema elegido. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---- Tipografía -------------------------------------------------------- */ /* Escala 1.25 truncada en pantalla chica. El salto h2 → h3 → cuerpo tiene que leerse sin comparar: h2 duplica al cuerpo, h3 lo supera en 15% pero además cambia de familia y de color. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; /* SOFT y WONK apagados: el carácter lo pone el eje óptico, no la rareza. */ font-variation-settings: "SOFT" 0, "WONK" 0; } h1 { font-size: clamp(2rem, 5.4vw, 3rem); line-height: 1.08; margin: 0 0 .35em; } h2 { font-size: clamp(1.45rem, 3.4vw, 1.95rem); line-height: 1.18; margin: 2.4rem 0 .55rem; } h3 { font-size: clamp(1.1rem, 1.6vw, 1.2rem); line-height: 1.3; margin: 1.9rem 0 .35rem; letter-spacing: -.01em; } /* Los anclajes internos y el salto al contenido no pueden quedar debajo del nav pegajoso. */ h1, h2, h3, #contenido, [id] { scroll-margin-top: calc(var(--nav-alto) + 16px); } p { margin: 0 0 1rem; color: var(--ink-2); } strong, b { color: var(--ink); font-weight: 700; } /* Dinero, folios y fechas van en cifras de ancho fijo: en las tablas de plazos y en las comparativas de precios, las columnas alinean por dígito. */ table, .cifra, .chip, time, td, th { font-variant-numeric: tabular-nums; } a { color: var(--brand-ink); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Sobre relleno de marca un anillo de marca no se ve: se usa la tinta. */ .btn:focus-visible, .chip:focus-visible { outline-color: var(--ink); outline-offset: 3px; } code { font-family: var(--font-mono); font-size: .88em; background: var(--codigo-bg); color: var(--ink); padding: .12em .38em; border-radius: 6px; word-break: break-word; } /* Un bloque de código no tenía estilo: `white-space: pre` sin recorte y una dirección de 66 caracteres sin espacios dejaban la página en 686px de ancho dentro de una pantalla de 390. Parte por donde sea, igual que las celdas del directorio de portales, y con scroll propio por si algún día entra una línea que no se puede partir. */ pre { margin: 1.4em 0; padding: 14px 16px; background: var(--codigo-bg); border: 1px solid var(--line); border-radius: var(--r-sm); max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; } pre code { background: none; padding: 0; border-radius: 0; font-size: .92em; } /* ---- Contenedores ------------------------------------------------------ */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; } /* Salto de teclado: fuera de pantalla hasta que recibe foco. */ .saltar { position: absolute; left: 12px; top: -100px; z-index: 60; background: var(--brand); color: var(--btn-ink); font-weight: 700; padding: 12px 18px; border-radius: var(--r-sm); box-shadow: var(--sombra-3); transition: top var(--sal); } .saltar:focus { top: 12px; text-decoration: none; } /* Ritmo entre bloques de la home. Sin esto las secciones se pegan y la página se lee como un solo chorro. */ main > section + section, main > .cta-app { margin-top: clamp(48px, 7vw, 84px); } main > .cta-app { width: min(var(--max), 100% - 40px); margin-inline: auto; } /* ---- Prosa: el muro de texto de las guías ------------------------------ */ /* Caja = medida + relleno lateral. Antes eran 720px de texto, unos 90 caracteres; ahora ~70, que es la banda legible. */ .prose { max-width: calc(var(--medida) + 40px); padding-top: clamp(20px, 3vw, 34px); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.68; overflow-wrap: break-word; } .prose p { margin: 0 0 1.15em; } /* El h2 abre sección: filete arriba, mucho aire antes y poco después, para que quede pegado al texto que introduce y separado del anterior. */ .prose > h2 { margin: 2.9rem 0 .6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink); } .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose > h3 { margin: 2rem 0 .4rem; color: var(--ink); } .prose > h1 + p, .prose > .actualizado + p { font-size: 1.08em; color: var(--ink-2); } .prose ol { list-style: none; counter-reset: p; padding: 0; margin: 1.2em 0; } .prose ol > li { counter-increment: p; position: relative; padding: 0 0 1em 48px; color: var(--ink-2); } .prose ol > li::before { content: counter(p); position: absolute; left: 0; top: .1em; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--btn-ink); display: grid; place-items: center; font-size: .92rem; font-weight: 800; font-family: var(--font-display); } .prose ul { color: var(--ink-2); padding-left: 1.35em; margin: 1.2em 0; } .prose ul > li { padding-left: .25em; } .prose ul > li::marker { color: var(--brand); } .prose li + li { margin-top: .5em; } blockquote { margin: 1.6em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--brand); color: var(--ink-2); } blockquote p { margin: 0 0 .7em; } blockquote p:last-child { margin-bottom: 0; font-size: .92em; } /* ---- Botones ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--brand); color: var(--btn-ink); font-weight: 700; padding: 13px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; min-height: 44px; font-size: 1rem; box-shadow: var(--sombra-1); transition: background var(--sal), box-shadow var(--sal), transform var(--sal); } .btn:hover { background: var(--brand-ink); text-decoration: none; box-shadow: var(--sombra-2); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: var(--sombra-1); } /* La secundaria no compite: mismo tamaño, borde suave y sin relleno. */ .btn.ghost { background: transparent; color: var(--brand-ink); border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: none; } .btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); transform: none; box-shadow: none; } /* ---- Nav --------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); } .nav .row { display: flex; align-items: center; justify-content: space-between; height: var(--nav-alto); } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; } /* El logotipo también es un enlace: sin esto su caja mide 29px de alto. */ .nav .brand { display: inline-flex; align-items: center; min-height: 44px; } .brand b { color: var(--brand); } .nav-links { display: flex; gap: 22px; align-items: center; } .nav-links a { color: var(--ink-2); font-weight: 600; font-size: .95rem; } /* El CTA del nav es un .btn: sin esto, `.nav-links a` le gana en especificidad y el texto queda gris sobre indigo. */ .nav-links a.btn { color: var(--btn-ink); } .nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink); min-width: 44px; min-height: 44px; cursor: pointer; border-radius: var(--r-pill); } /* Un solo glifo a la vez: abierto muestra la cruz, cerrado las barras. */ .nav-toggle .i-cerrar, .nav-toggle[aria-expanded="true"] .i-menu { display: none; } .nav-toggle[aria-expanded="true"] .i-cerrar { display: inline; } /* Botón de tema: ciclo sistema → claro → oscuro. Cada estado muestra un solo icono, elegido por CSS, así el script no toca el SVG. */ .theme-toggle { display: inline-grid; place-items: center; background: none; border: 0; padding: 0; color: var(--ink-2); min-width: 44px; min-height: 44px; cursor: pointer; border-radius: var(--r-pill); } .theme-toggle:hover { color: var(--brand-ink); background: var(--brand-soft); } .theme-toggle svg { display: none; width: 21px; height: 21px; } :root:not([data-theme]) .theme-toggle .i-auto { display: block; } :root[data-theme="light"] .theme-toggle .i-sol { display: block; } :root[data-theme="dark"] .theme-toggle .i-luna { display: block; } .nav-acciones { display: flex; align-items: center; gap: 8px; } @media (max-width: 820px) { .nav-toggle { display: block; } /* El panel flota sobre la página: necesita sombra propia, si no el contenido de abajo parece parte del menú. Cerrado se oculta con `visibility`, no solo con el `transform`: un elemento desplazado sigue siendo visible para el navegador, así que los cinco enlaces se quedaban en el orden de tabulación y el lector de pantalla los leía mientras el botón anunciaba "contraído". Con `visibility: hidden` el menú cerrado deja de existir para el teclado y para la accesibilidad, que es lo que dice `aria-expanded="false"`. El -100% (antes -120%) es lo que mide el propio panel: con 120% el borde inferior volvía a entrar por arriba y se veía una franja de 4.78px encima de la barra. */ .nav-links { position: fixed; inset: var(--nav-alto) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line-fuerte); box-shadow: var(--sombra-3); padding: 4px 20px 20px; /* En horizontal el panel no cabe entero: se desplaza él, no la página. */ max-height: calc(100vh - var(--nav-alto)); max-height: calc(100dvh - var(--nav-alto)); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateY(-100%); transition: transform var(--sal), visibility var(--sal); } .nav-links.open { visibility: visible; transform: translateY(0); } /* Abierto atrapa el foco, así que la página de atrás tampoco se arrastra. */ :root.menu-abierto, :root.menu-abierto body { overflow: hidden; } .nav-links a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 1.02rem; } /* El panel ya trae el filete del nav encima: un segundo filete pegado se lee como raya doble. */ .nav-links a:first-child { border-top: 0; } /* En el menú desplegado el CTA es una píldora, no una fila con borde. */ .nav-links a.btn { justify-content: center; margin: 16px 0 0; border-top: 0; padding: 13px 22px; } } /* ---- Home -------------------------------------------------------------- */ .hero { padding: clamp(40px, 8vw, 84px) 0 clamp(24px, 4vw, 40px); } .hero h1 { max-width: 15ch; } .hero .lead { font-size: clamp(1.08rem, 2.5vw, 1.3rem); color: var(--ink-2); max-width: 46ch; } /* La fila de CTA respira y envuelve limpio en móvil. */ .hero p:has(> .btn) { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .hero .btn { font-size: 1.04rem; padding: 15px 26px; } .hero .aviso { max-width: 52ch; margin-top: 20px; } .lead { font-size: clamp(1.05rem, 2.5vw, 1.25rem); color: var(--ink-2); } .eyebrow { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 16px; } /* ---- Tarjetas ---------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; box-shadow: var(--sombra-1); } .card > :last-child { margin-bottom: 0; } /* Suelta dentro del artículo (la ficha del portal) la tarjeta necesita aire propio; dentro de una .grid el hueco ya lo pone el gap. */ .prose > .card { margin: 1.6em 0; } .card h3 { margin-top: .6rem; } .card h3:first-child { margin-top: 0; } a.card { display: flex; align-items: center; color: var(--ink); font-weight: 600; min-height: 84px; transition: border-color var(--sal), box-shadow var(--sal), transform var(--sal); } a.card:hover { text-decoration: none; border-color: var(--line-fuerte); box-shadow: var(--sombra-2); transform: translateY(-2px); } .grid { display: grid; gap: 16px; } @media (min-width: 720px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } /* ---- Chips del semáforo ------------------------------------------------ */ /* Un solo componente. El punto de color hace que se lean como estado y no como etiqueta suelta, y el filete los despega del fondo de la tarjeta. */ .chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; line-height: 1.35; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip.rojo { background: var(--chip-rojo-bg); color: var(--chip-rojo-ink); } .chip.ambar { background: var(--chip-ambar-bg); color: var(--chip-ambar-ink); } .chip.verde { background: var(--chip-verde-bg); color: var(--chip-verde-ink); } /* Algunas páginas lo usan como párrafo suelto encima de un plazo. */ p.chip { margin-bottom: .6rem; } /* ---- Tablas ------------------------------------------------------------ */ /* Cada tabla vive en su propio contenedor con scroll. Antes el scroll estaba en .prose entera, así que el artículo completo se arrastraba de lado y la tabla se cortaba contra el borde sin avisar. */ .tabla-wrap { overflow-x: auto; margin: 1.8em 0; /* Sombras de borde que se apagan solas al llegar al extremo: las dos primeras capas son "local" y tapan a las dos de abajo. */ background: linear-gradient(to right, var(--paper) 40%, var(--paper-0)) left / 34px 100% no-repeat local, linear-gradient(to left, var(--paper) 40%, var(--paper-0)) right / 34px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(20, 22, 31, .17), var(--paper-0)) left / 13px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(20, 22, 31, .17), var(--paper-0)) right / 13px 100% no-repeat scroll; } /* Mínimo de 44rem: por debajo de eso las columnas se estrangulan y cada celda cae en una palabra por renglón, así que mejor que aparezca el scroll con su degradado. */ table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .96em; } th, td { text-align: left; padding: 12px 14px; vertical-align: top; } thead th { font-family: var(--font-display); font-size: .88rem; line-height: 1.3; color: var(--ink); border-bottom: 2px solid var(--line-fuerte); } tbody td { border-bottom: 1px solid var(--line); color: var(--ink-2); } tbody tr:last-child td { border-bottom: 0; } tbody td:first-child { color: var(--ink); font-weight: 600; } tbody tr:hover td { background: var(--surface); } /* En pantalla ancha la tabla se sale de la medida de lectura: el texto se queda en 70 caracteres y los datos aprovechan el ancho del sitio. */ @media (min-width: 1000px) { .prose > .tabla-wrap { width: min(var(--max), 100vw - 48px); margin-left: 50%; transform: translateX(-50%); } } /* Debajo de 700px una tabla de 7 columnas no es una tabla: es una fila por tarjeta, con el rótulo de la columna al lado del dato. */ @media (max-width: 699px) { .tabla-wrap { overflow-x: visible; background: none; } .tabla-wrap table, .tabla-wrap tbody, .tabla-wrap tr, .tabla-wrap td { display: block; min-width: 0; } .tabla-wrap thead { display: none; } .tabla-wrap tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sombra-1); padding: 14px 16px; margin-bottom: 12px; } .tabla-wrap tbody tr:hover td { background: none; } /* `anywhere` y no `break-word`: en una celda de rejilla solo el primero reduce el tamaño mínimo, y el directorio de portales trae URLs de 34 caracteres sin un solo espacio. */ .tabla-wrap td { padding: 7px 0; border-bottom: 0; display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 2px 14px; overflow-wrap: anywhere; } .tabla-wrap td::before { content: attr(data-col); font-family: var(--font-display); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); line-height: 1.5; padding-top: .12em; } .tabla-wrap td:not([data-col]) { display: block; } /* La primera celda titula la tarjeta. */ .tabla-wrap tbody td:first-child { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); padding: 0 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .tabla-wrap tbody td:first-child::before { content: none; } .tabla-wrap tbody tr:last-child td { border-bottom: 0; } .tabla-wrap tbody tr:last-child td:first-child { border-bottom: 1px solid var(--line); } } /* ---- FAQ --------------------------------------------------------------- */ /* Antes eran
pelados: la única señal de estado era el color del título. Ahora abierto y cerrado cambian fondo, borde y chevron. */ details.faq { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); margin-bottom: 8px; transition: border-color var(--sal), background var(--sal); } details.faq:hover { border-color: var(--line-fuerte); } details.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 10px 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: translateY(-3px) rotate(45deg); transition: transform var(--sal); } details.faq[open] { background: var(--surface); border-color: var(--line-fuerte); } details.faq[open] summary { color: var(--brand-ink); } details.faq[open] summary::after { transform: translateY(1px) rotate(225deg); } details.faq > :not(summary) { margin: 0 16px 14px; } /* ---- Migas ------------------------------------------------------------- */ /* Alineadas con la medida del artículo: antes flotaban 140px a la izquierda del h1 y parecían de otra página. El relleno lleva los 20px laterales a mano: la regla es posterior a `.wrap` y con la misma especificidad, así que un `padding: 14px 0 0` le ganaba y la ruta quedaba pegada al borde de la pantalla (x=0 contra los 20px del h1). Cada miga es una fila de 44px: a 16px de alto eran el objetivo táctil más chico del sitio y están pegadas unas a otras. */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--ink-2); padding: 2px 20px 0; max-width: calc(var(--medida) + 40px); } .crumbs a, .crumbs > span { display: inline-flex; align-items: center; min-height: 44px; } .crumbs a { color: var(--ink-2); } .crumbs .sep { color: var(--line-fuerte); padding: 0 7px; } /* ---- CTA de la app ----------------------------------------------------- */ .cta-app { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-radius: var(--r-md); padding: 28px; text-align: center; margin: 44px 0; } .cta-app h3 { margin-top: 0; color: var(--brand-ink); } /* Texto centrado: sin tope se estira a 100 caracteres y deja de leerse. */ .cta-app p { max-width: 52ch; margin-inline: auto; } .store-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .store-badges a { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-sm); } /* Alto fijo y ancho automático: el badge nunca se deforma ni se recorta. */ .store-badges img { display: block; height: 48px; width: auto; max-width: 100%; } .cta-app .bajo-badges { margin: 16px 0 0; } /* ---- Maqueta del teléfono ---------------------------------------------- */ .phone { width: 260px; max-width: 78vw; margin: 0 auto; background: var(--phone); border-radius: 34px; padding: 12px; box-shadow: var(--sombra-3); } .phone .screen { background: var(--paper); border-radius: var(--r-lg); padding: 18px; } .bar { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--brand); } /* ---- Pie --------------------------------------------------------------- */ .site-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 72px; padding: 44px 0; color: var(--ink-2); font-size: .9rem; } .site-footer .cols { display: grid; gap: 28px; } @media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1.7fr 1fr 1fr 1fr; } } .site-footer strong { display: block; color: var(--ink); margin-bottom: 4px; } /* Objetivo táctil de 44px: antes eran filas de 31px. */ .site-footer .cols a { color: var(--ink-2); display: flex; align-items: center; min-height: 44px; } .site-footer .brand { min-height: 0; margin-bottom: 8px; } .aviso { font-size: .8rem; color: var(--ink-2); margin-top: 12px; line-height: 1.55; } .actualizado { font-size: .82rem; color: var(--ink-2); margin: 0 0 24px; } .pie-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 24px 0 0; font-size: .85rem; } .pie-legal a { display: inline-flex; align-items: center; min-height: 44px; } /* ---- Formularios ------------------------------------------------------- */ input, select, textarea, button { font-family: inherit; } /* El borde llega marcado en el `style` de las páginas, así que la corrección de contraste (1.25:1 → 3:1, WCAG 1.4.11) necesita ganarle al inline. */ input, select, textarea { border-color: var(--field-line) !important; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; } @media (max-width: 768px) { input, select, textarea { font-size: 16px; } } /* El widget de Turnstile no baja de 300px de ancho (lo fija Cloudflare en su iframe), y los formularios del sitio son rejillas dentro de una `.card`: a 320px de pantalla quedan 240px de hueco, el ancho mínimo del widget estira la columna y la tarjeta se sale de la pantalla (scrollWidth 341 contra 320). Con el hueco acotado y con scroll propio, el que se arrastra es el widget y no la página. */ /* El alto mínimo reserva la caja del widget administrado: así el formulario no salta cuando el script de Cloudflare termina de cargar. */ .turnstile-hueco { min-height: 65px; margin: 2px 0; overflow-x: auto; } /* Y antes de recortarlo se le presta el relleno lateral de la tarjeta: a 360px el hueco interior mide 278px y con los 40px del relleno llega a 318, así el widget entra completo en el teléfono más común de gama baja. */ @media (max-width: 400px) { .card > .turnstile-hueco { margin-inline: -20px; } } /* Ningún hijo de una rejilla de formulario impone su ancho mínimo a la caja. */ form.card { grid-template-columns: minmax(0, 1fr); }