/* ========================================================================== DomusCalc - hoja de estilos del sitio Sistema visual unico: la identidad aprobada. Todas las paginas ES y EN usan estas mismas reglas; la vertical activa se fija con data-v en y recolorea acento, chips, iconos y estados. 1. Base 11. Contenido editorial 2. Tokens 12. Tablas 3. Tipografia 13. Avisos y bloques de datos 4. Estructura 14. FAQ 5. Cabecera y navegacion 15. Publicidad 6. Botones y enlaces 16. Pie 7. Formularios y controles 17. Utilidades 8. Tarjeta de herramienta 18. Piezas propias del sitio 9. Resultado 19. Responsive <- al final siempre 10. Descubrimiento 20. Movimiento reducido e impresion ========================================================================== */ /* 0. Tipografias propias ------------------------------------------------- Las dos familias de la identidad v2 se sirven desde este mismo dominio. Son las variables originales (SIL Open Font License 1.1, ver assets/fonts/), no una imitacion: el diseno es identico al que servia Google Fonts, pero la IP del visitante ya no sale del sitio para pintar unas letras. Se generan con `python tools/make_fonts.py`, que comprueba los glifos. ------------------------------------------------------------------------ */ @font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; } /* 1. Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; } /* 2. Tokens -------------------------------------------------------------- */ :root { color-scheme: light; /* superficies: limpio y luminoso, con un neutro frío (nada de beige) */ --bg: #f3f5f8; --card: #ffffff; --card-2: #f8fafc; --line: #dde4eb; --line-2: #c8d2dc; --field: #7b8996; /* borde de control: 3,6:1 sobre blanco */ /* tinta */ --ink: #0f1720; --ink-2: #44515e; --ink-3: #5d6b79; /* marca */ --brand: #0c6b4e; --brand-700: #0a5842; --brand-tint: #e3f2eb; --ring: rgba(12, 107, 78, 0.22); /* estado */ --danger: #bf271e; --danger-tint: #fdeceb; --danger-ring: rgba(191, 39, 30, 0.2); /* vertical activa: la fija [data-v] en */ --v: #0c6b4e; --v-700: #0a5842; --v-tint: #e3f2eb; --v-2: #4c9a7e; --v-3: #82bba6; --v-4: #bcdcd0; /* escalón para la barra */ /* tipografía */ --display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.0625rem; --t-xl: 1.1875rem; --h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); --h2: clamp(1.25rem, 1.12rem + 0.62vw, 1.625rem); --h1: clamp(1.75rem, 1.46rem + 1.35vw, 2.625rem); --hero: clamp(1.875rem, 1.5rem + 1.9vw, 3rem); /* espacio */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s7: 2rem; --s8: 2.5rem; --s9: 3.5rem; --pad: clamp(1rem, 0.55rem + 1.9vw, 2rem); --gap: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem); --shell: 1180px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(15, 23, 32, 0.06), 0 1px 1px rgba(15, 23, 32, 0.04); --sh-2: 0 2px 4px rgba(15, 23, 32, 0.05), 0 6px 16px rgba(15, 23, 32, 0.06); } /* Cada vertical es reconocible, pero el verde de marca sigue mandando en la acción principal: misma casa, habitaciones distintas. */ [data-v="reformas"] { --v: #b2490f; --v-700: #8f3a0b; --v-tint: #fbeade; --v-2: #cd7539; --v-3: #e0a171; --v-4: #f0cdb0; } [data-v="cocina"] { --v: #a92a5d; --v-700: #8a2049; --v-tint: #fbe6ef; --v-2: #c25c85; --v-3: #d691ac; --v-4: #eec5d5; } [data-v="clima"] { --v: #0d6aa3; --v-700: #0a5382; --v-tint: #e3eff9; --v-2: #3d8dbd; --v-3: #6fb0d4; --v-4: #a8cfe6; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-lg)/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } /* 3. Tipografía ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.018em; } h1 { font-size: var(--h1); letter-spacing: -0.028em; } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } p { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } strong, b { font-weight: 600; } .num { font-variant-numeric: tabular-nums lining-nums; } .sub { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.55; } /* El chip, el H1 y el subtítulo no tenían separaciones propias: se apilaban con el interlineado que les tocara. Esta es la escala, y aguanta títulos de una, dos y tres líneas porque nace de los márgenes, no del alto del texto. */ .page-head { margin-top: var(--s5); } .page-head .chip-v { margin-bottom: 0.6rem; } .page-head h1 { max-width: 20ch; } .page-head .sub { margin-top: 0.65rem; max-width: 58ch; } .page-head + .tool { margin-top: var(--s6); } .page-head + * { margin-top: var(--s6); } .small { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; } /* 4. Estructura ---------------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); } .shell-tight { max-width: 900px; } .sec { padding-block: var(--gap); } .sec-tight { padding-block: 0 var(--gap); } .sec-head { margin-bottom: var(--s5); } .sec-head h2 { display: flex; align-items: center; gap: 0.6rem; } .sec-head h2::before { content: ""; width: 5px; height: 1.05em; border-radius: 3px; background: var(--v); flex: none; } .sec-head p { margin-top: 0.4rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; } .skip { position: absolute; left: 0.5rem; top: -5rem; z-index: 60; background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top 0.15s; } .skip:focus { top: 0.5rem; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* 5. Cabecera y navegación ---------------------------------------------- */ .hdr { position: sticky; top: 0; z-index: 40; background: var(--card); border-bottom: 1px solid var(--line); } .hdr-in { display: flex; align-items: center; gap: var(--s5); min-height: 62px; } .logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); } .logo-mk { width: 30px; height: 30px; flex: none; border-radius: 9px; } .logo-tx { font-family: var(--display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.03em; } .logo-tx i { font-style: normal; color: var(--brand); } .nav { margin-left: auto; display: flex; align-items: center; gap: var(--s6); } .nav-l { display: flex; align-items: center; gap: 0.35rem; } .nav-l a { display: block; padding: 0.45rem 0.7rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; } .nav-l a:hover { background: var(--bg); color: var(--ink); } .nav-l a[aria-current] { color: var(--ink); font-weight: 600; background: var(--v-tint); } .lang { display: flex; background: var(--bg); border-radius: var(--r-sm); padding: 2px; } .lang a { padding: 0.22rem 0.5rem; border-radius: 6px; text-decoration: none; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); } .lang a[aria-current] { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); } .burger { display: none; margin-left: auto; align-items: center; gap: 0.45rem; cursor: pointer; min-height: 44px; background: var(--card); border: 1.5px solid var(--field); border-radius: var(--r-sm); padding: 0.45rem 0.8rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); } .burger svg { width: 16px; height: 12px; stroke: currentColor; stroke-width: 2; } /* 6. Botones y enlaces --------------------------------------------------- */ a { color: var(--brand-700); text-underline-offset: 0.16em; } a:hover { color: var(--brand); } :where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.6rem 1.1rem; border: 1.5px solid transparent; border-radius: var(--r-sm); font: 600 0.9375rem/1.2 var(--ui); text-decoration: none; cursor: pointer; text-align: center; transition: background-color 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s; } .btn-1 { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--sh-1); } .btn-1:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .btn-1:active { box-shadow: none; } .btn-2 { background: var(--card); color: var(--ink); border-color: var(--field); } .btn-2:hover { border-color: var(--field); background: var(--card-2); color: var(--ink); } .btn-3 { background: transparent; color: var(--ink-2); border-color: transparent; padding-inline: 0.6rem; } .btn-3:hover { color: var(--ink); background: var(--bg); } .btn-lg { min-height: 52px; font-size: var(--t-md); padding-inline: 1.4rem; } .btn-full { width: 100%; } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } .link-go { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: var(--t-sm); text-decoration: none; } .link-go::after { content: "→"; transition: transform 0.16s ease; } .link-go:hover { text-decoration: underline; } .link-go:hover::after { transform: translateX(3px); } /* 7. Formularios y controles -------------------------------------------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: var(--s5); font-size: var(--t-sm); color: var(--ink-3); } .crumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--line-2); } .crumb-dots { display: none; color: var(--line-2); } .crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .chip-v { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: var(--r-pill); background: var(--v-tint); color: var(--v-700); font-size: var(--t-xs); font-weight: 600; text-decoration: none; letter-spacing: 0.01em; } .chip-v::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v); } .f-set { border: 0; padding: 0; margin: 0; min-width: 0; } .grid-f { display: grid; gap: var(--s4) var(--s4); } .f { min-width: 0; } .f-full { grid-column: 1 / -1; } .lbl { display: block; margin-bottom: 0.35rem; font: 600 var(--t-sm)/1.35 var(--ui); color: var(--ink-2); } .inp, .sel { width: 100%; min-height: 48px; background: var(--card); color: var(--ink); border: 1.5px solid var(--field); border-radius: var(--r-sm); padding: 0.55rem 0.8rem; font: 600 var(--t-lg)/1.35 var(--ui); font-variant-numeric: tabular-nums lining-nums; transition: border-color 0.14s, box-shadow 0.14s; } .inp::placeholder { color: var(--ink-3); font-weight: 400; } .inp:hover, .sel:hover { border-color: var(--ink-3); } .inp:focus, .sel:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .inp[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); } .inp[aria-invalid="true"]:focus { outline-color: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); } /* desplegable con su galón: se ve que es un control */ .sel-w { position: relative; } .sel { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer; } .sel-w::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* grupo valor + unidad: una sola pieza, con la unidad claramente pulsable */ .ug { display: flex; align-items: stretch; } .ug .inp { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right-width: 0; position: relative; z-index: 1; } .ug .sel-w { flex: none; } .ug .sel { border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--card-2); font-size: var(--t-md); font-weight: 600; color: var(--ink-2); padding-right: 2rem; padding-left: 0.75rem; min-width: 5.5rem; height: 100%; } .ug .sel-w::after { right: 0.7rem; } .ug .inp:focus { border-right-width: 1.5px; margin-right: -1.5px; } .ug:has(.inp:focus) .sel { border-left-color: var(--brand); } /* unidad fija (vatios) */ .ug .unit-fixed { display: flex; align-items: center; padding: 0 0.9rem; min-width: 3.6rem; border: 1.5px solid var(--field); border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--card-2); color: var(--ink-2); font-weight: 600; font-size: var(--t-md); } /* paso a paso para cantidades pequeñas */ .stp { display: flex; align-items: stretch; } .stp .inp { border-radius: 0; text-align: center; padding-inline: 0.4rem; } .stp button { flex: none; width: 46px; background: var(--card-2); border: 1.5px solid var(--field); color: var(--ink); font-size: 1.25rem; line-height: 1; cursor: pointer; } .stp button:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: 0; } .stp button:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 0; } .stp button:hover { background: var(--bg); } .help { display: block; margin-top: 0.35rem; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; } .err { display: block; margin-top: 0.35rem; font: 600 var(--t-sm)/1.4 var(--ui); color: var(--danger); } .err:empty { display: none; } .err:not(:empty)::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 0.35rem; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; vertical-align: -2px; } /* divulgación progresiva */ .more { margin-top: var(--s4); } .more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; border: 1.5px dashed var(--field); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); background: var(--card-2); } .more > summary::-webkit-details-marker { display: none; } .more > summary::before { content: ""; width: 0.5rem; height: 0.5rem; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.18s ease; } .more[open] > summary { border-style: solid; border-color: var(--field); border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--card-2); } .more[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); } .more > summary:hover { border-color: var(--field); color: var(--ink); } .more-body { border: 1.5px solid var(--field); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); padding: var(--s5) var(--s4) var(--s4); background: var(--card-2); } /* Tres acciones con tres pesos: calcular manda, el ejemplo acompaña y restablecer espera apagado hasta que haya algo que borrar. */ .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); } /* En dos columnas la columna del formulario mide unos 450 px. Con `flex: 1 1 12rem` el boton primario se comia el espacio y tiraba «Restablecer» a una segunda linea, solo y pegado a la derecha. Ahora el primario tiene un ancho minimo generoso pero no crece: los tres caben en una fila a cualquier ancho. */ .acts .btn-1 { flex: 0 1 auto; min-width: 10rem; } .acts .btn-2 { flex: 0 1 auto; } .acts .btn-3 { margin-left: auto; font-size: var(--t-sm); } .acts .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .acts .btn[disabled]:hover { border-color: var(--line); color: var(--ink-3); background: transparent; } /* 8. Tarjeta de herramienta --------------------------------------------- */ .tool { margin-top: var(--s5); } .tool-grid { display: grid; gap: var(--s5); align-items: start; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .panel-hd { display: flex; align-items: center; gap: 0.7rem; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .panel-hd h2 { font-family: var(--ui); font-size: var(--t-md); font-weight: 700; letter-spacing: -0.005em; } .panel-hd .btn-3 { margin-left: auto; font-size: var(--t-sm); min-height: 44px; } .ico { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--v-tint); display: grid; place-items: center; } .ico svg { width: 19px; height: 19px; stroke: var(--v-700); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .panel-bd { padding: var(--s5); } .noscript { margin-bottom: var(--s4); padding: 0.8rem 0.95rem; background: var(--v-tint); border-radius: var(--r-sm); font-size: var(--t-sm); line-height: 1.5; } .privacy { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; } .privacy svg { width: 15px; height: 15px; flex: none; margin-top: 0.2rem; stroke: currentColor; fill: none; stroke-width: 1.6; } /* 9. Resultado ----------------------------------------------------------- */ .out { overflow: hidden; } .out .panel-bd { padding: 0; } [data-result] { display: block; scroll-margin-top: 5rem; } /* El panel derecho vacío tiene que sostener la mirada frente a un formulario alto sin inventarse ni un número. Lo consigue con jerarquía —icono, título, explicación, tres pasos y el aviso— no con una cifra de mentira. */ .rs-empty, .result-placeholder { padding: var(--s6) var(--s5); color: var(--ink-3); font-size: var(--t-sm); line-height: 1.6; } .rs-empty { display: flex; flex-direction: column; gap: var(--s3); } .rs-empty b { color: var(--ink); font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .rs-empty > p { color: var(--ink-2); max-width: 42ch; } .rs-empty-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--v-tint); margin-bottom: 0.15rem; } .rs-empty-ico svg { width: 22px; height: 22px; stroke: var(--v-700); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rs-steps { counter-reset: paso; display: grid; gap: 0.55rem; margin-top: 0.15rem; } .rs-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 0.6rem; color: var(--ink-2); } .rs-steps li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); font: 700 var(--t-xs)/1 var(--ui); color: var(--ink-3); } .rs-empty-note { margin-top: 0.3rem; padding-top: var(--s4); border-top: 1px dashed var(--line); color: var(--ink-3); } /* Aviso de ejemplo cargado: discreto, encima del resultado, sin robarle sitio. */ .rs-flag { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem var(--s5); border-bottom: 1px solid var(--line); background: var(--v-tint); color: var(--v-700); font-size: var(--t-sm); font-weight: 600; border-radius: var(--r-lg) var(--r-lg) 0 0; } .rs-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v); flex: none; } .rs-head { padding: var(--s5); background: var(--v-tint); border-bottom: 1px solid var(--line); } .result-headline { font-size: var(--t-sm); font-weight: 600; color: var(--v-700); } .result-primary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.2rem; } .result-value { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: lining-nums; } .result-unit { font-size: var(--t-xl); font-weight: 700; color: var(--v-700); } .rs-alts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s3); } .rs-alt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.24rem 0.65rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } [data-result] > .result-hint { padding: 0 var(--s5) var(--s4); font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; } .rs-body { padding: var(--s5); display: grid; gap: var(--s5); } .result-buy { display: grid; gap: 0.15rem; padding: var(--s4); border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line); border-left: 4px solid var(--v); } .result-buy-label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .result-buy-value { font: 700 var(--t-xl)/1.25 var(--ui); font-variant-numeric: tabular-nums; } .result-buy .result-hint { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; } /* la barra de aportaciones: de un vistazo se ve qué manda */ .rs-bar-t { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 0.55rem; } .rs-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; background: var(--line); } .rs-bar span { display: block; min-width: 3px; } .rs-legend { display: grid; gap: 0.4rem; margin-top: var(--s3); } .rs-legend li { display: grid; grid-template-columns: 11px 1fr auto auto; align-items: center; gap: 0.55rem; font-size: var(--t-sm); } .rs-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; } .rs-legend .l { color: var(--ink-2); min-width: 0; } .rs-legend .w { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .rs-legend .p { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 3.1rem; text-align: right; } /* desglose completo, plegado para no abrumar */ .rs-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-sm); font-weight: 600; color: var(--brand-700); } .rs-detail > summary::-webkit-details-marker { display: none; } .rs-detail > summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.18s ease; } .rs-detail[open] > summary::after { transform: rotate(-135deg) translateY(0); } .result-rows { margin-top: var(--s3); border-top: 1px solid var(--line); } .result-rows li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .r-label { color: var(--ink-2); } .r-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .result-rows li:last-child { border-bottom: 0; } .result-notes { display: grid; gap: 0.45rem; } .result-notes li { position: relative; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; } .result-notes li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--v-3); } .result-links { display: flex; flex-wrap: wrap; gap: var(--s2); } .result-links .btn, [data-share] { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0.45rem 0.9rem; border: 1.5px solid var(--field); border-radius: var(--r-sm); background: var(--card); color: var(--ink); text-decoration: none; font: 600 var(--t-sm)/1.2 var(--ui); cursor: pointer; } .result-links .btn:hover, [data-share]:hover { border-color: var(--field); background: var(--card-2); } .result-error { padding: var(--s5); } .result-error > p { font-weight: 700; color: var(--danger); display: flex; align-items: center; gap: 0.45rem; } .result-error > p::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 13px; flex: none; } .result-error ul { margin-top: var(--s3); display: grid; gap: 0.35rem; padding: var(--s3) var(--s4); background: var(--danger-tint); border-radius: var(--r-sm); } .result-error li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } .rs-share { padding: 0 var(--s5) var(--s5); } [data-result].result-flash { animation: rs-in 0.3s ease both; } @keyframes rs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* capacidad frente a consumo: la confusión más común del sector */ .vs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: var(--s5); } .vs > * { min-width: 0; } .vs > div { background: var(--card); padding: var(--s5); } .vs h3 { display: flex; align-items: center; gap: 0.5rem; } .vs h3 small { font-family: var(--ui); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .vs .u { margin-top: 0.45rem; font-size: var(--t-sm); font-weight: 600; color: var(--v-700); font-variant-numeric: tabular-nums; } .vs p { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; } .vs-x { background: var(--card-2) !important; display: grid; place-items: center; font-weight: 700; color: var(--ink-3); padding: var(--s3) !important; } /* 10. Descubrimiento --------------------------------------------------------------- */ .hero { padding-top: var(--s7); padding-bottom: var(--s6); } .hero h1 { font-size: var(--hero); max-width: 17ch; } .hero .sub { margin-top: var(--s3); max-width: 56ch; } .search { margin-top: var(--s5); max-width: 620px; } .search-w { position: relative; } .search-w svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; stroke: var(--ink-3); fill: none; stroke-width: 2; pointer-events: none; } .search input { width: 100%; min-height: 54px; padding: 0.7rem 1rem 0.7rem 2.9rem; background: var(--card); border: 1.5px solid var(--field); border-radius: var(--r); font: 500 var(--t-lg)/1.3 var(--ui); color: var(--ink); box-shadow: var(--sh-1); } .search input::placeholder { color: var(--ink-3); font-weight: 400; } .search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s3); } .filters button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.3rem 0.95rem; border-radius: var(--r-pill); cursor: pointer; border: 1.5px solid var(--field); background: var(--card); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; } .filters button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink-3)); } .filters button:hover { border-color: var(--field); color: var(--ink); } .filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .filters button[data-f="all"]::before { display: none; } .hits { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-3); } /* tarjeta de herramienta */ .tools { display: grid; gap: var(--s3); } .tcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.9rem; align-items: start; padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; box-shadow: var(--sh-1); transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s; } .tcard:hover { border-color: var(--v); box-shadow: var(--sh-2); transform: translateY(-1px); } .tcard .ico { grid-row: span 2; } .tcard b { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .tcard span { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; } .tcard:hover b { color: var(--v-700); } /* entrada a las tres verticales */ .verts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .vert { display: grid; gap: 0.3rem; padding: var(--s5); border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: inherit; box-shadow: var(--sh-1); position: relative; overflow: hidden; transition: border-color 0.14s, box-shadow 0.14s; } .vert::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--v); } .vert .ico { width: 40px; height: 40px; border-radius: 11px; margin-bottom: var(--s2); } .vert .ico svg { width: 22px; height: 22px; } .vert b { font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .vert p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } .vert .n { margin-top: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--v-700); } .vert:hover { border-color: var(--v); box-shadow: var(--sh-2); } /* lista completa por grupos */ .group + .group { margin-top: var(--s6); } .group-h { display: flex; align-items: center; gap: 0.55rem; margin-bottom: var(--s3); } .group-h h3 { font-family: var(--ui); font-size: var(--t-sm); font-weight: 700; } .group-h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v); } .group-h .c { margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .links { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .links a { display: block; padding: 0.7rem 0.9rem; background: var(--card); text-decoration: none; color: var(--ink); font-size: var(--t-sm); } .links a:hover { background: var(--v-tint); color: var(--v-700); font-weight: 600; } .empty { padding: var(--s5); background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--ink-2); font-size: var(--t-sm); } /* confianza */ .trust { display: grid; gap: var(--s5); } .trust > div { display: grid; gap: 0.3rem; } .trust h3 { font-family: var(--ui); font-size: var(--t-md); font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .trust h3 svg { width: 18px; height: 18px; flex: none; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .trust p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; } /* 11. Contenido editorial --------------------------------------------------------------- */ .art-hd { padding-top: var(--s5); } .art-hd h1 { margin-top: var(--s3); max-width: 20ch; } .art-hd .sub { margin-top: var(--s3); max-width: 60ch; } /* Un «·» al principio de una linea es un punto huerfano. Aqui el separador va pegado por detras de cada dato y dentro de su misma caja, asi que cuando la linea se parte el punto se va con el dato al que pertenece. */ .art-meta, .meta-trust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0; font-size: var(--t-sm); color: var(--ink-3); } .art-meta { margin-top: var(--s4); } .meta-trust { margin-top: var(--s4); } .art-meta > span, .meta-trust > span { white-space: nowrap; } .art-meta > span:not(:last-child)::after, .meta-trust > span:not(:last-child)::after { content: "·"; margin: 0 0.62rem; color: var(--line-2); } .meta-trust time { color: inherit; } .art-grid { display: grid; gap: var(--gap); align-items: start; } .art-grid > * { min-width: 0; } /* una tabla ancha no debe estirar la rejilla */ .answer { margin-top: var(--s5); padding: var(--s5); border-radius: var(--r); background: var(--v-tint); border: 1px solid var(--line); } .answer b { display: block; font-size: var(--t-sm); color: var(--v-700); margin-bottom: 0.45rem; } .answer p { font-size: var(--t-xl); line-height: 1.5; } .toc { position: sticky; top: 78px; } /* En una columna el índice cae justo debajo de la respuesta corta y sus bordes se juntaban hasta parecer una sola tarjeta partida. */ .art-grid { margin-top: var(--s6); } .toc-in { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); box-shadow: var(--sh-1); } .toc-in > b { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: var(--s3); } .toc ol { display: grid; gap: 0.1rem; } .toc a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; } .toc a:hover { background: var(--bg); color: var(--ink); } .toc a[aria-current] { color: var(--v-700); font-weight: 600; background: var(--v-tint); border-left-color: var(--v); } .prose { max-width: 68ch; } .prose > * + * { margin-top: var(--s4); } .prose h2 { margin-top: var(--s8); scroll-margin-top: 5rem; } .prose h3 { margin-top: var(--s6); } .prose h2 + *, .prose h3 + * { margin-top: var(--s3); } .prose p { line-height: 1.68; } .prose ul, .prose ol { display: grid; gap: 0.5rem; } .prose ul > li { position: relative; padding-left: 1.4rem; line-height: 1.6; } .prose ul > li::before { content: ""; position: absolute; left: 0.25rem; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--v-3); } .prose ol { counter-reset: n; } .prose ol > li { position: relative; padding-left: 2.1rem; line-height: 1.6; counter-increment: n; } .prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 0.15em; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--v-tint); color: var(--v-700); display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; } .prose a { font-weight: 500; } /* bloque de datos: cifras sueltas que rompen el gris del texto */ .figs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .figs div { background: var(--card); padding: var(--s4); display: grid; gap: 0.15rem; } .figs .k { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--v-700); font-variant-numeric: tabular-nums; } .figs .d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; } /* llamada a la calculadora dentro del texto */ .cta { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; padding: var(--s5); border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); } .cta .ico { width: 42px; height: 42px; border-radius: 12px; } .cta .ico svg { width: 23px; height: 23px; } .cta-b { flex: 1 1 15rem; min-width: 0; } .cta-b b { display: block; font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .cta-b span { display: block; margin-top: 0.15rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; } /* 12. Tablas ------------------------------------------------------------- */ .tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } .tbl { width: 100%; font-size: var(--t-sm); } .tbl th, .tbl td { padding: 0.7rem 0.9rem; text-align: left; } .tbl thead th { background: var(--card-2); font-weight: 700; color: var(--ink-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .tbl tbody tr + tr { border-top: 1px solid var(--line); } .tbl tbody th { font-weight: 600; } .tbl .n { text-align: right; font-variant-numeric: tabular-nums; } .tbl tbody tr:hover { background: var(--card-2); } .tcap { margin-top: var(--s2); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; } /* 13. Avisos y bloques de datos ----------------------------------------- */ .note { display: flex; gap: 0.75rem; padding: var(--s4); border-radius: var(--r); background: var(--v-tint); } .note svg { width: 19px; height: 19px; flex: none; margin-top: 0.15rem; stroke: var(--v-700); fill: none; stroke-width: 2; stroke-linecap: round; } /* El aviso destacado se lee al tamano del texto, no al de un pie de foto: es lo mas importante de la pagina donde aparece. */ .note b { display: block; font-size: var(--t-lg); margin-bottom: 0.4rem; } .note p { font-size: var(--t-md); line-height: 1.65; color: var(--ink-2); } .note p + p { margin-top: 0.7rem; } .note-warn { background: var(--card); border: 1px solid var(--line-2); border-left: 3px solid var(--ink); padding: var(--s5); } .note-warn svg { stroke: var(--ink); } /* 14. FAQ ---------------------------------------------------------------- */ .faq { display: grid; gap: var(--s2); } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } .faq details[open] { border-color: var(--line-2); } .faq summary { list-style: none; cursor: pointer; display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--s4); font-size: var(--t-md); font-weight: 600; line-height: 1.45; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; margin-left: auto; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.4rem; border-right: 2px solid var(--v); border-bottom: 2px solid var(--v); transform: rotate(45deg); transition: transform 0.18s ease; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq summary:hover { color: var(--v-700); } .faq-b { padding: 0 var(--s4) var(--s4); } .faq-b p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.68; } .faq-b p + p { margin-top: 0.6rem; } /* 13 bis. Recorridos de la portada --------------------------------------- Tres trabajos reales con sus pasos en orden. No son paginas nuevas: ordenan herramientas y guias que ya existian sueltas en el catalogo. */ .paths { display: grid; gap: var(--s5); margin-top: var(--s5); } .path { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); border-top: 3px solid var(--v); padding: var(--s5); box-shadow: var(--sh-1); } .path h3 { font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .path > p { margin-top: 0.35rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; } .path-s { display: grid; gap: 0.35rem; margin-top: var(--s4); } .path-s a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); text-decoration: none; min-height: 44px; } .path-s a:hover { background: var(--v-tint); } .pa-n { font: 700 var(--t-xs)/1.6 var(--ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--v-700); white-space: nowrap; } .pa-t b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--ink); } .pa-t span { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; margin-top: 0.1rem; } /* De donde sale cada numero: la nota corta bajo el resultado. */ .datanote { margin-top: var(--s5); padding: var(--s4) var(--s5); background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; } .datanote b { color: var(--ink); } .datanote a { color: var(--v-700); font-weight: 600; } /* 14 bis. Siguiente paso ------------------------------------------------- Una sola recomendación, y se dice por qué. Va antes que la lista de relacionadas, que ofrece cuatro opciones equivalentes sin jerarquía. */ .nextstep { margin-top: var(--gap); } .nextstep-k { font: 700 var(--t-xs)/1 var(--ui); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: var(--s3); } .nextstep-b { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--v); border-radius: var(--r); padding: var(--s5); box-shadow: var(--sh-1); } .nextstep-b > .ico { width: 44px; height: 44px; } .nextstep-x b { display: block; font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .nextstep-x p { margin-top: 0.3rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 62ch; } .nextstep .btn { grid-column: 2; justify-self: start; } /* 15. Publicidad --------------------------------------------------------- */ /* El hueco reserva su altura para que el dia que entre un anuncio no empuje nada (CLS = 0), pero mientras no haya nada servido no dibuja ninguna tarjeta: solo la etiqueta que la ley pide, pequena y en gris. El marco punteado de desarrollo se enciende anadiendo ?qa=ads a la direccion. */ .ad { margin-top: var(--s7); margin-bottom: var(--s2); min-height: 116px; /* movil: banner 320x100 + etiqueta */ display: grid; place-items: center; align-content: center; gap: 0.35rem; border-radius: var(--r); } .ad-l { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--line-2); } [data-qa-ads] .ad { border: 1px dashed var(--line-2); background: var(--card-2); } [data-qa-ads] .ad::after { content: attr(data-ad); font-size: var(--t-xs); color: var(--ink-3); } /* 16. Pie ---------------------------------------------------------------- */ .ftr { margin-top: var(--gap); background: var(--card); border-top: 1px solid var(--line); padding-block: var(--s8); } .ftr-grid { display: grid; gap: var(--s6); } .ftr-a p { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; max-width: 32ch; } .ftr-c h2 { font-family: var(--ui); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } .ftr-c ul { margin-top: var(--s3); display: grid; gap: 0.45rem; } .ftr-c a { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; } .ftr-c a:hover { color: var(--brand-700); text-decoration: underline; } .ftr-bot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between; margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); } /* 17. Utilidades --------------------------------------------------------- */ .mt2 { margin-top: var(--s2); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); } /* 18. Piezas propias del sitio ------------------------------------------ */ /* Lo que el prototipo no necesitaba pero las 204 paginas si: formulas, pasos, filas repetibles, casillas, tabla de ingredientes, portada y 404. Todo con los mismos tokens: nada nuevo, solo mas piezas del sistema. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* bloque de formula: el metodo de calculo, en monoespaciada */ .formula { font: 500 0.875rem/1.85 var(--mono); background: var(--card-2); border: 1px solid var(--line); border-left: 4px solid var(--v); border-radius: 0 var(--r) var(--r) 0; padding: var(--s4) var(--s5); overflow-x: auto; white-space: pre; color: var(--ink); margin-top: var(--s4); } /* pasos numerados de "como se usa" */ .steps { counter-reset: st; display: grid; gap: 0.6rem; margin-top: var(--s4); } .steps li { position: relative; padding-left: 2.1rem; line-height: 1.6; counter-increment: st; } .steps li::before { content: counter(st); position: absolute; left: 0; top: 0.1em; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--v-tint); color: var(--v-700); display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; } /* tablas dentro del contenido: mismo aspecto que .tw/.tbl */ /* Una tabla que se desplaza sin avisar es una tabla a medio leer. El aviso es texto (lo lee un lector de pantalla) y el degradado es decoración. */ .tw-hint { display: none; align-items: center; gap: 0.4rem; margin-top: var(--s4); font-size: var(--t-xs); color: var(--ink-3); } .tw-hint::after { content: "\2192"; } .table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-top: var(--s4); } .tw-hint + .table-wrap { margin-top: 0.4rem; } .table-wrap table { width: 100%; font-size: var(--t-sm); border-collapse: collapse; } .table-wrap th, .table-wrap td { padding: 0.7rem 0.9rem; text-align: left; } .table-wrap thead th { background: var(--card-2); font-weight: 700; color: var(--ink-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .table-wrap tbody tr + tr { border-top: 1px solid var(--line); } .table-wrap tbody tr:hover { background: var(--card-2); } .table-wrap .n, .tbl .n { text-align: right; font-variant-numeric: tabular-nums; } .table-wrap caption { caption-side: bottom; padding: var(--s3) 0.9rem; font-size: var(--t-xs); color: var(--ink-3); text-align: left; line-height: 1.5; } /* aviso corto dentro del contenido */ .callout { margin-top: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r); background: var(--v-tint); border: 1px solid var(--line); font-size: var(--t-md); line-height: 1.6; } .callout strong { color: var(--v-700); } .callout a { font-weight: 600; } /* casilla de verificacion */ .chk { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0; } .chk input { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 22px; height: 22px; border: 1.5px solid var(--field); border-radius: 6px; background: var(--card); cursor: pointer; display: grid; place-items: center; } .chk input::after { content: ""; width: 11px; height: 6px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 0.12s ease; } .chk input:checked { background: var(--brand); border-color: var(--brand); } .chk input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } .chk input:hover { border-color: var(--ink-3); } .chk input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .chk label { cursor: pointer; font-size: var(--t-md); line-height: 1.4; padding-top: 0.1rem; } /* filas repetibles: escalador de recetas, porcentaje panadero */ /* `contain: paint` ademas del overflow: sin el, una tabla con min-width dentro de un contenedor con scroll sigue estirando el ancho del documento en Chrome y aparece desplazamiento horizontal en 320 px. */ .rows-wrap { overflow-x: auto; contain: paint; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } .rows-table { width: 100%; font-size: var(--t-sm); border-collapse: collapse; min-width: 22rem; } .rows-table th { padding: 0.55rem 0.5rem; text-align: left; background: var(--card-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .rows-table td { padding: 0.35rem 0.35rem; vertical-align: middle; } .rows-table tr + tr td { border-top: 1px solid var(--line); } /* 44 px tambien dentro de la tabla de filas: apretarlos a 42 para ganar dos pixeles de alto los sacaba del minimo tactil. */ .rows-table .inp, .rows-table .sel { min-height: 44px; font-size: var(--t-md); padding: 0.4rem 0.55rem; } .rows-table .sel { padding-right: 1.9rem; } .rows-table td:last-child { width: 48px; text-align: center; } .row-del { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid transparent; background: transparent; color: var(--ink-3); font-size: 1.15rem; line-height: 1; cursor: pointer; } .row-del:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-tint); } .row-add { margin-top: var(--s3); } /* hub de vertical */ .hub-lead { display: grid; gap: var(--s5); } .hub-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); } /* indice de ingredientes */ .ing-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-3); } /* rutas y valores dentro del texto */ code { font: 500 0.9em/1.5 var(--mono); background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.35em; overflow-wrap: anywhere; word-break: break-word; } /* portada raiz: selector de idioma */ .pick { min-height: 100svh; display: grid; place-items: center; padding: var(--s7) var(--pad); } .pick-in { width: 100%; max-width: 30rem; text-align: center; } .pick .logo { justify-content: center; } .pick h1 { margin-top: var(--s5); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); } .pick p { margin-top: var(--s3); color: var(--ink-2); } .pick-links { display: grid; gap: var(--s3); margin-top: var(--s6); } .pick-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); text-decoration: none; color: inherit; transition: border-color 0.14s, box-shadow 0.14s; } .pick-links a:hover { border-color: var(--brand); box-shadow: var(--sh-2); } .pick-links b { font-family: var(--display); font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } .pick-links span { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 0.1rem; } .pick-links em { font-style: normal; font-size: 1.15rem; color: var(--brand); } .pick-note { margin-top: var(--s6); text-align: left; display: grid; gap: var(--s3); } .pick-note p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; } .pick-foot { padding: var(--s5) var(--pad) var(--s6); text-align: center; font-size: var(--t-xs); color: var(--ink-3); } .pick-foot p { margin: 0; } /* 404 */ .nf { padding-block: var(--s9) var(--gap); text-align: center; } .nf-code { font: 700 var(--t-sm)/1 var(--ui); letter-spacing: 0.16em; color: var(--brand-700); } .nf h1 { margin-top: var(--s3); } /* `.nf p` centraba tambien el parrafo de dentro de cada tarjeta de area, que asi quedaba con una sangria distinta a la de su titulo. */ .nf > p { margin-top: var(--s3); color: var(--ink-2); max-width: 46ch; margin-inline: auto; } .nf .verts { margin-top: var(--s7); text-align: left; } /* 19. Responsive --------------------------------------------------------- */ @media (min-width: 22.5rem) { /* 360 px */ .grid-f { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 30rem) { /* 480 px */ .verts { gap: var(--s3); } .vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 48rem) { /* 768 px */ .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } .links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); } .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } .ftr-grid { grid-template-columns: 1.5fr repeat(3, 1fr); } .rs-body { gap: var(--s6); } } /* Datos a la izquierda, resultado a la derecha. Sin excepciones y en las 96 páginas: es el mismo arquetipo. Entra a 960 px porque es donde el panel del resultado deja de estrangularse (44 % de 960 son 21 rem, justo su mínimo) y porque a 768 px un formulario de seis campos con desplegables de unidad ya no cabe en 55 % sin partir cada etiqueta en tres líneas. `align-items: start` en `.tool-grid` hace que los dos paneles empiecen a la misma altura; el derecho se queda pegado al hacer scroll. */ @media (min-width: 60rem) { /* 960 px */ .tool-grid { grid-template-columns: minmax(0, 1.28fr) minmax(21rem, 1fr); gap: var(--s5); } .out { position: sticky; top: 86px; } .rs-empty { padding: var(--s7) var(--s6); gap: var(--s4); min-height: 22rem; } .nextstep-b { grid-template-columns: 44px minmax(0, 1fr) auto; } .nextstep .btn { grid-column: 3; justify-self: end; } .ad { min-height: 132px; margin-top: var(--gap); } /* 728x90 + etiqueta */ } @media (min-width: 64rem) { /* 1024 px */ .hdr-in { min-height: 70px; } .tool-grid { gap: var(--s6); } .links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } .art-grid { grid-template-columns: minmax(0, 1fr) 15rem; } .art-aside { order: 2; } } @media (max-width: 63.99rem) { .toc { position: static; } .art-aside { margin-bottom: var(--s6); } } /* Por debajo de 960 px hay una sola columna: formulario, botón, nota de privacidad y resultado, en ese orden y sin nada en medio. */ @media (max-width: 59.99rem) { .tool-grid { gap: var(--s4); } .out { margin-top: 0; } .tw-hint { display: flex; } } @media (max-width: 47.99rem) { .burger { display: inline-flex; } .hdr-in { position: relative; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--s4); background: var(--card); border-bottom: 1px solid var(--line); padding: var(--s4) var(--pad) var(--s5); box-shadow: var(--sh-2); } .nav[data-open="1"] { display: flex; } .nav-l { flex-direction: column; align-items: stretch; gap: 0.15rem; } .nav-l a { padding: 0.7rem 0.75rem; font-size: var(--t-md); } .lang { align-self: flex-start; } .toc-in { background: var(--card-2); } /* la herramienta tiene que empezar pronto y el botón quedar a mano */ .crumbs { padding-top: var(--s4); } .panel-hd { padding: 0.8rem var(--s4); } .panel-bd { padding: var(--s4); } .acts { margin-top: var(--s4); } .hero { padding-top: var(--s5); } } /* El panel avanzado vuelve a una columna cuando los desplegables no caben. */ @media (max-width: 29.99rem) { .more-body .grid-f { grid-template-columns: minmax(0, 1fr); } /* Cuatro filtros en fila dejaban «Climatización» solo en la segunda línea. Cuadrícula 2 × 2 deliberada: dos arriba, dos abajo, todos del mismo ancho y todos por encima de 44 px. */ .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } .filters button { min-height: 44px; justify-content: center; } /* Migas: los niveles intermedios se recortan de la vista pero siguen en el árbol de accesibilidad, y una elipsis decorativa ocupa su sitio. `Inicio › … › Página actual`, sin perder un solo nivel del schema. */ .crumb-mid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .crumb-mid + li::before { display: none; } .crumb-dots { display: inline; } /* La cabecera de la calculadora, más apretada pero con la misma escala. */ .page-head h1 { max-width: none; } .acts .btn-3 { margin-left: 0; } /* "Muy caluroso" tiene que caber en media columna de 375 px */ .sel { font-size: var(--t-md); padding-left: 0.65rem; padding-right: 2rem; } .sel-w::after { right: 0.75rem; } /* Tres columnas en 375 px obligaban a recortar «Climatización» y a esconder la descripción. Por debajo de 480 px las tarjetas pasan a horizontales: icono a la izquierda, texto a la derecha, ancho completo. Caben las tres, se lee todo y el objetivo táctil crece en vez de encoger. */ .verts { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .vert { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: var(--s4); row-gap: 0.15rem; padding: var(--s4) var(--s4) var(--s4) var(--s5); text-align: left; } .vert::before { inset: 0 auto 0 0; width: 4px; height: auto; } .vert .ico { grid-row: 1 / span 2; width: 44px; height: 44px; margin-bottom: 0; } .vert b { font-size: var(--t-lg); line-height: 1.2; } .vert p { grid-column: 2; font-size: var(--t-sm); } .vert .n { grid-column: 2; margin-top: 0.15rem; font-size: var(--t-sm); } /* tarjeta de herramienta en vertical: el texto respira en dos columnas */ .tcard { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } .tcard .ico { grid-row: auto; margin-bottom: 0.45rem; } .tcard span { font-size: var(--t-xs); line-height: 1.4; } } /* Teléfonos estrechos (menos de 360 px). */ @media (max-width: 22.49rem) { .grid-f { grid-template-columns: minmax(0, 1fr); } .tools { grid-template-columns: minmax(0, 1fr); } .result-rows li { flex-direction: column; gap: 0.1rem; } .r-value { text-align: left; } .rs-legend li { grid-template-columns: 11px 1fr auto; } .rs-legend .p { display: none; } .acts { flex-direction: column; align-items: stretch; } .acts .btn { width: 100%; margin-left: 0; } .rs-empty { padding: var(--s5) var(--s4); } .nextstep-b { grid-template-columns: minmax(0, 1fr); } .nextstep-b > .ico { display: none; } .nextstep .btn { grid-column: 1; justify-self: stretch; text-align: center; } } /* 20. Movimiento reducido e impresión ----------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media print { .hdr, .ftr, .ad, .search, .filters, .skip, .toc { display: none !important; } body { background: #fff; } .panel, .vs, .tw, .faq details { box-shadow: none; border-color: #999; } .rs-head { background: #fff; } }