/** * guiadelcuidador.es — estilos de estructura, componentes y bloques. * * Dirección editorial: cuaderno de fichas de un cuidador, no panel de SaaS. * - Serif de sistema (Georgia/Charter) para titulares: da voz de guía escrita * por una persona, no de landing genérica. Cuerpo en sans de sistema. * - Sin webfonts de terceros: rendimiento CWV + nada que cargar aparte. * - Cuerpo a 1.125rem/1.65: el lector tiene 45-60 años y a menudo lee desde * el móvil en un pasillo de hospital. La legibilidad es el diseño. * - Paleta: papel hueso + tinta casi negra con sesgo cálido + terracota * quemado como acento único. Nada de gradientes ni sombras flotantes: * los bloques se separan con línea, no con halo. * - Los "para quién sí/no" usan verde/rojo apagados de forma semántica, * nunca decorativa — no cuentan como el acento del sitio. */ /* * --gdc-escala-fuente no se declara en .gdc a propósito: la pone gdc.js * como estilo inline en (desde localStorage, o 1 por defecto). Si * .gdc también la declarase, taparía siempre el valor de y los * botones A-/A+ del header dejarían de tener efecto. Cada var(...) que la * usa lleva ", 1" de fallback por si el JS no llegó a ejecutarse. */ .gdc { --gdc-papel: #F7F3EA; --gdc-papel-marca: #EFE7D3; --gdc-tinta: #2B2620; --gdc-tinta-suave: #6B6355; --gdc-acento: #A34A2E; --gdc-acento-osc: #7D3821; --gdc-acento-claro: #F1DDD1; --gdc-linea: #DDD3BC; --gdc-si: #3D6B4F; --gdc-no: #8B3A3A; --gdc-radio: 0.35rem; --gdc-serif: Charter, "Iowan Old Style", "Georgia", "Times New Roman", serif; --gdc-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gdc-escala-fuente-fallback: 1; background: var(--gdc-papel); color: var(--gdc-tinta); font-family: var(--gdc-sans); font-size: calc(1.125rem * var(--gdc-escala-fuente, 1)); line-height: 1.65; -webkit-font-smoothing: antialiased; } .gdc-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; } .gdc-wrap--estrecho { max-width: 42rem; } .gdc h1, .gdc h2, .gdc h3 { font-family: var(--gdc-serif); line-height: 1.18; letter-spacing: -0.01em; font-weight: 700; } .gdc a { color: var(--gdc-acento); text-underline-offset: 0.15em; } .gdc a:focus-visible { outline: 3px solid var(--gdc-acento); outline-offset: 2px; } /* ---------- Etiqueta de sección ---------- */ /* Rótulo de archivador, no "kicker" de landing: mayúsculas espaciadas sobre una regla, como el lomo de una carpeta de fichas. */ .gdc-rotulo { font-family: var(--gdc-sans); font-size: calc(0.78rem * var(--gdc-escala-fuente, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gdc-tinta-suave); margin: 0 0 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--gdc-linea); } /* ---------- Botones ---------- */ .gdc-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; border-radius: var(--gdc-radio); font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .gdc-btn--principal, .gdc a.gdc-btn--principal { background-color: var(--gdc-acento); color: var(--gdc-papel); border-color: var(--gdc-acento); } .gdc-btn--principal:hover, .gdc a.gdc-btn--principal:hover { background-color: var(--gdc-acento-osc); border-color: var(--gdc-acento-osc); color: var(--gdc-papel); } .gdc-btn--principal:active { background-color: var(--gdc-tinta); border-color: var(--gdc-tinta); } /* ---------- Hero ---------- */ /* Sin gradiente decorativo: la separación viene de una regla y del papel marcado, como una página abierta de cuaderno. */ .gdc-hero { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--gdc-linea); } .gdc-hero__grid { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 860px) { .gdc-hero__grid { grid-template-columns: 1fr 0.85fr; gap: 3rem; align-items: center; } } .gdc-hero__titulo { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0 0 1rem; max-width: 18ch; } .gdc-hero__subtitulo { font-size: calc(1.2rem * var(--gdc-escala-fuente, 1)); color: var(--gdc-tinta-suave); max-width: 42ch; margin: 0 0 2rem; } .gdc-hero__imagen { border: 1px solid var(--gdc-linea); aspect-ratio: 4 / 3; background: var(--gdc-papel-marca); } .gdc-hero__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 859px) { .gdc-hero__imagen { aspect-ratio: 16 / 10; order: -1; } } /* ---------- Secciones ---------- */ .gdc-seccion { padding: 3.5rem 0; border-bottom: 1px solid var(--gdc-linea); } .gdc-seccion:last-of-type { border-bottom: none; } .gdc-seccion h2 { font-size: calc(1.65rem * var(--gdc-escala-fuente, 1)); margin: 0 0 1.5rem; max-width: 26ch; } .gdc-seccion--confianza { background: var(--gdc-papel-marca); } .gdc-seccion__mas { margin-top: 1.5rem; font-weight: 700; } .gdc-seccion__mas a { text-decoration: underline; text-decoration-color: var(--gdc-acento-claro); text-underline-offset: 0.2em; } .gdc-seccion__mas a:hover { text-decoration-color: var(--gdc-acento); } .gdc-confianza { display: flex; gap: 1.5rem; align-items: flex-start; } .gdc-confianza__foto { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--gdc-linea); } .gdc-confianza__cuerpo h2 { margin-top: 0; } /* ---------- Grid y tarjetas ---------- */ .gdc-grid { display: grid; gap: 0; } @media (min-width: 640px) { .gdc-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .gdc-grid--3 { grid-template-columns: repeat(3, 1fr); } } /* * Tarjetas sin sombra ni radio grande: comparten un borde de 1px con las * vecinas (margen negativo de 1px) como fichero de índice, no cartas * flotantes con halo. El acento aparece solo en el título al hover. */ .gdc-tarjeta, .gdc a.gdc-tarjeta { display: flex; flex-direction: column; background: transparent; border: 1px solid var(--gdc-linea); margin: -1px 0 0 -1px; text-decoration: none; color: var(--gdc-tinta); transition: background-color 0.15s ease; } .gdc-tarjeta:hover { background-color: var(--gdc-papel-marca); } .gdc-tarjeta__imagen { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gdc-papel-marca); border-bottom: 1px solid var(--gdc-linea); } .gdc-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15); } .gdc-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem; flex: 1; } .gdc-tarjeta__titulo { font-size: calc(1.2rem * var(--gdc-escala-fuente, 1)); margin: 0; } .gdc-tarjeta:hover .gdc-tarjeta__titulo { color: var(--gdc-acento); } .gdc-tarjeta__texto { margin: 0; color: var(--gdc-tinta-suave); font-size: calc(1rem * var(--gdc-escala-fuente, 1)); font-family: var(--gdc-sans); } .gdc-tarjeta__enlace { margin-top: auto; padding-top: 0.75rem; font-weight: 700; font-family: var(--gdc-sans); color: var(--gdc-acento); } /* ---------- Pastillas de problemas ---------- */ /* Etiquetas de archivador, no chips de app: rectángulo con esquina mínima, subrayado de color en vez de fondo sólido al posarse. */ .gdc-pastillas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .gdc-pastilla { display: inline-flex; align-items: center; padding: 0.65rem 1.1rem; background: transparent; border: 1.5px solid var(--gdc-tinta); border-radius: var(--gdc-radio); font-weight: 700; font-family: var(--gdc-sans); text-decoration: none; color: var(--gdc-tinta); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .gdc-pastilla:hover { background-color: var(--gdc-tinta); border-color: var(--gdc-tinta); color: var(--gdc-papel); } /* ---------- Migas y artículo ---------- */ .gdc-migas { padding: 1.25rem 0 0; font-size: calc(0.9rem * var(--gdc-escala-fuente, 1)); color: var(--gdc-tinta-suave); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .gdc-migas a { color: var(--gdc-tinta-suave); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .gdc-migas a:hover { color: var(--gdc-acento); border-color: currentColor; } .gdc-articulo__cabecera { padding: 1.75rem 0 1.5rem; border-bottom: 1px solid var(--gdc-linea); margin-bottom: 2rem; } .gdc-articulo__cabecera h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 0.85rem; } .gdc-articulo__entradilla { font-size: calc(1.2rem * var(--gdc-escala-fuente, 1)); color: var(--gdc-tinta-suave); max-width: 60ch; } .gdc-articulo__contenido { padding-bottom: 2rem; } .gdc-articulo__contenido > * { max-width: 66ch; } .gdc-articulo__contenido img, .gdc-articulo__contenido figure { max-width: 100%; height: auto; border: 1px solid var(--gdc-linea); } .gdc-articulo__contenido h2 { margin-top: 2.75rem; font-size: calc(1.45rem * var(--gdc-escala-fuente, 1)); } .gdc-articulo__contenido h3 { margin-top: 1.85rem; font-size: calc(1.2rem * var(--gdc-escala-fuente, 1)); } .gdc-relacionados { border-top: 1px solid var(--gdc-linea); padding-top: 1.5rem; margin: 0 0 2rem; max-width: 66ch; } .gdc-relacionados h2 { font-family: var(--gdc-sans); font-size: calc(0.9rem * var(--gdc-escala-fuente, 1)); text-transform: uppercase; letter-spacing: 0.09em; color: var(--gdc-tinta-suave); margin: 0 0 0.85rem; } .gdc-relacionados ul { list-style: none; margin: 0; padding: 0; } .gdc-relacionados li { margin-bottom: 0.55rem; } .gdc-aviso-afiliado { border-top: 1px solid var(--gdc-linea); padding-top: 1.25rem; margin: 0 0 3rem; font-size: 0.95rem; color: var(--gdc-tinta-suave); max-width: 66ch; } .gdc-archivo__cabecera { padding: 2rem 0 1.75rem; border-bottom: 1px solid var(--gdc-linea); margin-bottom: 1.5rem; } .gdc-archivo__cabecera h1 { font-size: clamp(1.95rem, 4vw, 2.75rem); } .gdc-archivo__descripcion { color: var(--gdc-tinta-suave); max-width: 60ch; font-size: calc(1.1rem * var(--gdc-escala-fuente, 1)); font-family: var(--gdc-sans); } /* ================= BLOQUES ================= */ /* ---------- Caja producto ---------- */ /* Ficha de producto: recuadro con regla interior, sin sombra. La nota del cuidador va con una comilla tipográfica grande, como anotación al margen. */ .gdc-caja-producto { display: grid; gap: 1.5rem; background: var(--gdc-papel); border: 1px solid var(--gdc-tinta); padding: 1.75rem; margin: 2.25rem 0; } @media (min-width: 640px) { .gdc-caja-producto { grid-template-columns: 180px 1fr; align-items: start; } } .gdc-caja-producto__imagen { margin: 0; border: 1px solid var(--gdc-linea); background: var(--gdc-papel-marca); aspect-ratio: 1 / 1; } .gdc-caja-producto__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; } .gdc-caja-producto__nombre { margin: 0 0 0.85rem; font-size: calc(1.3rem * var(--gdc-escala-fuente, 1)); } .gdc-caja-producto__lista h4 { margin: 0 0 0.4rem; font-size: calc(0.78rem * var(--gdc-escala-fuente, 1)); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-family: var(--gdc-sans); } .gdc-caja-producto__lista ul { margin: 0 0 1.1rem; padding-left: 1.25rem; } .gdc-caja-producto__lista--si h4 { color: var(--gdc-si); } .gdc-caja-producto__lista--no h4 { color: var(--gdc-no); } .gdc-caja-producto__nota { position: relative; font-family: var(--gdc-serif); font-style: italic; color: var(--gdc-tinta-suave); padding: 0.25rem 0 0.25rem 1.5rem; margin: 0 0 1.1rem; border-left: 2px solid var(--gdc-acento-claro); } .gdc-caja-producto__cta, .gdc a.gdc-caja-producto__cta { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--gdc-acento); color: var(--gdc-papel); font-weight: 700; font-family: var(--gdc-sans); padding: 0.8rem 1.4rem; border-radius: var(--gdc-radio); text-decoration: none; transition: background-color 0.15s ease; } .gdc-caja-producto__cta:hover, .gdc a.gdc-caja-producto__cta:hover { background-color: var(--gdc-acento-osc); color: var(--gdc-papel); } /* ---------- Tabla comparativa ---------- */ .gdc-tabla-comparativa { margin: 2.25rem 0; } .gdc-tabla-comparativa__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gdc-tinta); } .gdc-tabla-comparativa table { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--gdc-papel); font-family: var(--gdc-sans); } .gdc-tabla-comparativa th, .gdc-tabla-comparativa td { border-bottom: 1px solid var(--gdc-linea); padding: 1rem 1.2rem; text-align: left; vertical-align: top; font-size: calc(1rem * var(--gdc-escala-fuente, 1)); } .gdc-tabla-comparativa thead th { background: var(--gdc-tinta); color: var(--gdc-papel); font-size: calc(0.8rem * var(--gdc-escala-fuente, 1)); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; border-bottom: none; } .gdc-tabla-comparativa tbody tr:last-child th, .gdc-tabla-comparativa tbody tr:last-child td { border-bottom: none; } .gdc-tabla-comparativa tr.is-ganador { background: var(--gdc-papel-marca); } .gdc-badge { display: inline-block; background: transparent; border: 1.5px solid var(--gdc-acento); color: var(--gdc-acento); font-size: calc(0.72rem * var(--gdc-escala-fuente, 1)); font-weight: 700; font-family: var(--gdc-sans); padding: 0.2rem 0.6rem; border-radius: var(--gdc-radio); margin-bottom: 0.4rem; letter-spacing: 0.02em; } .gdc-tabla-comparativa__veredicto { background: var(--gdc-papel-marca); border-left: 3px solid var(--gdc-acento); padding: 1.4rem 1.6rem; margin-top: 1.5rem; } .gdc-tabla-comparativa__veredicto h3 { margin: 0 0 0.5rem; font-size: calc(1.1rem * var(--gdc-escala-fuente, 1)); } /* ---------- Checklist con presupuesto ---------- */ /* Firma visual del sitio: lista de la compra numerada por orden real de urgencia (1. Hoy, 2. Esta semana, 3. Según el caso) — la numeración aquí sí encierra información, no es decoración. */ .gdc-checklist { margin: 2.25rem 0; counter-reset: gdc-grupo; } .gdc-checklist__grupo { margin-bottom: 2rem; counter-increment: gdc-grupo; } .gdc-checklist__grupo h3 { font-family: var(--gdc-sans); font-size: calc(0.85rem * var(--gdc-escala-fuente, 1)); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 0 0 0.85rem; color: var(--gdc-tinta); display: flex; align-items: baseline; gap: 0.5rem; } .gdc-checklist__grupo h3::before { content: counter(gdc-grupo) "."; font-family: var(--gdc-serif); font-size: 1.1em; font-weight: 700; color: var(--gdc-acento); } .gdc-checklist__grupo--hoy h3 { color: var(--gdc-no); } .gdc-checklist__grupo--hoy h3::before { color: var(--gdc-no); } .gdc-checklist__grupo ul { list-style: none; margin: 0; padding: 0; } .gdc-checklist__item { position: relative; background: transparent; border-bottom: 1px solid var(--gdc-linea); padding: 0.9rem 0.25rem 0.9rem 2.4rem; } .gdc-checklist__item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; border: 2px solid var(--gdc-tinta); border-radius: 0.2rem; } .gdc-checklist__texto { display: block; font-weight: 700; } .gdc-checklist__producto { display: block; font-size: calc(1rem * var(--gdc-escala-fuente, 1)); color: var(--gdc-tinta-suave); font-family: var(--gdc-sans); } .gdc-checklist__rango { white-space: nowrap; } .gdc-checklist__total { background: var(--gdc-tinta); color: var(--gdc-papel); padding: 1.15rem 1.4rem; font-size: calc(1.15rem * var(--gdc-escala-fuente, 1)); font-family: var(--gdc-serif); } @media (prefers-reduced-motion: reduce) { .gdc * { transition: none !important; animation: none !important; } } /* ---------- Cabecera del sitio ---------- */ .gdc-cabecera { background: var(--gdc-papel, #F7F3EA); border-bottom: 1px solid var(--gdc-tinta, #2B2620); position: sticky; top: 0; z-index: 50; } .gdc-cabecera__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; } .gdc-cabecera__logo { font-family: var(--gdc-serif, Georgia, serif); font-weight: 700; font-size: 1.3rem; text-decoration: none; color: var(--gdc-tinta, #2B2620); } .gdc-cabecera__hamburguesa { display: none; background: none; border: 1.5px solid var(--gdc-tinta, #2B2620); border-radius: var(--gdc-radio, 0.35rem); font-size: 1.4rem; line-height: 1; padding: 0.4rem 0.7rem; cursor: pointer; color: var(--gdc-tinta, #2B2620); } .gdc-cabecera__nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; } .gdc-cabecera__nav a { text-decoration: none; font-weight: 700; color: var(--gdc-tinta, #2B2620); border-bottom: 2px solid transparent; padding-bottom: 0.2rem; transition: border-color 0.15s ease, color 0.15s ease; } .gdc-cabecera__nav a:hover { color: var(--gdc-acento, #A34A2E); border-color: var(--gdc-acento, #A34A2E); } .gdc-cabecera__cta .gdc-btn { padding: 0.55rem 1.1rem; color: var(--gdc-papel, #F7F3EA); } /* ---------- Ajuste de tamaño de texto ---------- */ .gdc-fuente { display: flex; align-items: center; gap: 0.25rem; border: 1px solid var(--gdc-tinta, #2B2620); border-radius: var(--gdc-radio, 0.35rem); padding: 0.2rem; } .gdc-fuente__btn { appearance: none; background: transparent; border: none; color: var(--gdc-tinta, #2B2620); font-weight: 700; font-size: 0.85rem; line-height: 1; padding: 0.5rem 0.65rem; cursor: pointer; border-radius: 0.2rem; transition: background-color 0.15s ease, color 0.15s ease; } .gdc-fuente__btn:hover { background-color: var(--gdc-tinta, #2B2620); color: var(--gdc-papel, #F7F3EA); } .gdc-fuente__btn--reset { font-size: 0.95rem; } @media (max-width: 820px) { .gdc-fuente { justify-content: center; margin: 0.75rem 0; } .gdc-cabecera__hamburguesa { display: block; } .gdc-cabecera__nav { display: none; width: 100%; } .gdc-cabecera__nav.is-abierto { display: block; } .gdc-cabecera__nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 0.75rem; } .gdc-cabecera__nav li { border-top: 1px solid var(--gdc-linea, #DDD3BC); } .gdc-cabecera__nav a { display: block; padding: 0.85rem 0.25rem; border-bottom: none; } .gdc-cabecera__cta { border-top: none !important; padding-top: 0.75rem; } } .screen-reader-text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ---------- Pie del sitio ---------- */ .gdc-pie { background: var(--gdc-tinta, #2B2620); color: #DCD5C4; padding: 3.5rem 0 2rem; margin-top: 3rem; } .gdc-pie a { color: #F7F3EA; text-decoration-color: rgba(247,243,234,0.4); } .gdc-pie a:hover { text-decoration-color: #F7F3EA; } .gdc-pie__columnas { display: grid; gap: 2.25rem; } @media (min-width: 640px) { .gdc-pie__columnas { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .gdc-pie__columnas { grid-template-columns: repeat(4, 1fr); } } .gdc-pie__col h2 { font-family: var(--gdc-sans); font-size: calc(0.85rem * var(--gdc-escala-fuente, 1)); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: #A8A08C; margin: 0 0 0.85rem; } .gdc-pie__col ul { list-style: none; margin: 0; padding: 0; } .gdc-pie__col li { margin-bottom: 0.55rem; font-size: calc(0.98rem * var(--gdc-escala-fuente, 1)); } .gdc-pie__nota { border-top: 1px solid rgba(247,243,234,0.15); margin-top: 2.75rem; padding-top: 1.25rem; font-size: calc(0.9rem * var(--gdc-escala-fuente, 1)); color: #A8A08C; }