/* Mammen Tallón — hoja de estilos única. Sin recursos de terceros.
   Sistema: Archivo en tres anchuras (expandida para titulares, condensada para cifras,
   normal para texto), retícula cuadrada con líneas de 1 px, marino + oro, ondas de voz. */

@font-face {
  font-family: "Archivo";
  src: url("/fuentes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --marino: #1b2540;
  --marino-900: #121a2e;
  --marino-700: #26314f;
  --marino-500: #3a4668;
  --pared: #ece7e3;
  --papel: #f6f3f0;
  --blanco: #ffffff;
  --oro: #b4976b;
  --oro-claro: #cfb68c;
  --oro-texto: #7a5c2e;
  --texto: #1b2540;
  --texto-suave: #4f5668;
  --sobre-marino: #c3c8d6;
  --sobre-marino-2: #9aa1b6;
  --linea: #d9d2ca;
  --linea-oscura: rgba(255, 255, 255, 0.12);

  --fuente: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ancho: 80rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --espacio: clamp(4.5rem, 9vw, 8rem);
  --sombra: 0 30px 60px -30px rgba(18, 26, 46, 0.55);
  --z-cabecera: 20;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, dd, blockquote, figure, h1, h2, h3, h4 { margin: 0; }
p { text-wrap: pretty; }

h1, h2, h3, h4 { font-family: var(--fuente); color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.4vw, 6.2rem); font-weight: 800; font-stretch: 125%; line-height: 0.96; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 3rem); font-weight: 750; font-stretch: 112%; line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: 1.3rem; font-weight: 700; font-stretch: 110%; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--oro-texto); }
.oscuro h1 em, .oscuro h2 em { color: var(--oro); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.claro :focus-visible, .blanco :focus-visible { outline-color: var(--oro-texto); }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.sin-corte { white-space: nowrap; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--margen); top: -4rem; z-index: 50; padding: 0.7rem 1rem; background: var(--oro); color: var(--marino); font-weight: 700; }
.saltar:focus { top: 0.75rem; }

/* ---------- Temas de sección ---------- */
.seccion { position: relative; padding-block: var(--espacio); }
.oscuro { background: var(--marino); color: var(--blanco); }
.oscuro-900 { background: var(--marino-900); color: var(--blanco); }
.claro { background: var(--papel); }
.pared { background: var(--pared); }
.blanco { background: var(--blanco); }
.oscuro, .oscuro-900 { isolation: isolate; }
/* Grano sutil para que el marino no se vea plano */
.oscuro::before, .oscuro-900::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/img/grano.png"); opacity: 0.55; mix-blend-mode: overlay;
}
.con-puntos::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/img/puntos-claros.svg");
  -webkit-mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 35%, #000 100%);
}
.claro.con-puntos::after, .pared.con-puntos::after, .blanco.con-puntos::after { background-image: url("/img/puntos-oscuros.svg"); }
.claro, .pared, .blanco { isolation: isolate; }

/* ---------- Textos de apoyo ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--oro-texto);
}
.etiqueta::before { content: ""; width: 0.55rem; height: 0.55rem; background: currentColor; }
.oscuro .etiqueta, .oscuro-900 .etiqueta { color: var(--oro); }
.entradilla { max-width: 38rem; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--texto-suave); }
.oscuro .entradilla, .oscuro-900 .entradilla { color: var(--sobre-marino); }
.suave { color: var(--texto-suave); }
.oscuro .suave, .oscuro-900 .suave { color: var(--sobre-marino); }

/* Cabecera de sección: titular a la izquierda, entradilla a la derecha, alineados a la retícula */
.cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabeza .etiqueta { grid-column: 1 / -1; }
.cabeza > p, .cabeza > div { padding-bottom: 0.4rem; }
.cabeza--sola { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 3.4rem; padding: 0.9rem 1.5rem;
  border: 1px solid var(--marino); background: var(--marino); color: var(--blanco);
  font-family: var(--fuente); font-size: 1rem; font-weight: 700; font-stretch: 108%; letter-spacing: 0.005em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.boton .icono { width: 1.15rem; height: 1.15rem; transition: transform 200ms ease; }
.boton:hover { background: var(--marino-700); border-color: var(--marino-700); }
.boton:hover .icono { transform: translateX(3px); }
.boton:active { transform: translateY(1px); }
.boton--oro { background: var(--oro); border-color: var(--oro); color: var(--marino); }
.boton--oro:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.boton--linea { background: transparent; color: var(--marino); }
.boton--linea:hover { background: var(--marino); color: var(--blanco); }
.oscuro .boton--linea, .oscuro-900 .boton--linea { color: var(--blanco); border-color: rgba(255, 255, 255, 0.45); }
.oscuro .boton--linea:hover, .oscuro-900 .boton--linea:hover { background: var(--blanco); color: var(--marino); border-color: var(--blanco); }
.boton--pequeno { min-height: 2.6rem; padding: 0.5rem 1rem; font-size: 0.92rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 2.25rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-stretch: 108%; text-decoration: none; color: inherit; }
.enlace-flecha .icono { width: 1.1rem; height: 1.1rem; color: var(--oro); transition: transform 200ms ease; }
.enlace-flecha:hover .icono { transform: translateX(3px); }
.enlace-flecha:hover { text-decoration: underline; text-decoration-color: var(--oro); }

/* ---------- Iconos y gráficos generados ---------- */
.icono { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.icono-caja {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  background: var(--marino); color: var(--oro);
}
.icono-caja .icono { width: 1.6rem; height: 1.6rem; }
.oscuro .icono-caja, .oscuro-900 .icono-caja { background: var(--oro); color: var(--marino); }

.onda { width: 100%; height: 100%; }
.onda rect { fill: var(--oro); }
@media (prefers-reduced-motion: no-preference) {
  .onda--viva rect { transform-box: fill-box; transform-origin: center; animation: latido 1.6s ease-in-out infinite alternate; }
  .onda--viva .onda__b1 { animation-duration: 1.1s; }
  .onda--viva .onda__b2 { animation-duration: 1.45s; animation-delay: -0.3s; }
  .onda--viva .onda__b3 { animation-duration: 1.8s; animation-delay: -0.9s; }
  .onda--viva .onda__b4 { animation-duration: 1.25s; animation-delay: -0.6s; }
  .onda--viva .onda__b5 { animation-duration: 2.1s; animation-delay: -1.2s; }
  .onda--viva .onda__b6 { animation-duration: 1.6s; animation-delay: -0.2s; }
}
@keyframes latido { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* ---------- Cabecera fija ---------- */
.cabecera {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  background: rgba(27, 37, 64, 0.94); color: var(--blanco);
  border-bottom: 1px solid var(--linea-oscura);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cabecera__fila { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }
.marca { display: inline-flex; align-items: center; gap: 0.75rem; margin-right: auto; text-decoration: none; color: inherit; }
.marca__simbolo { width: 2.5rem; height: 2.5rem; }
.marca__fondo { fill: var(--marino-700); }
.marca__barra { fill: var(--blanco); }
.marca__barra--oro { fill: var(--oro); }
.marca__texto { display: grid; line-height: 1.05; }
.marca__nombre { font-size: 1.15rem; font-weight: 800; font-stretch: 115%; letter-spacing: -0.01em; }
.marca__oficio { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; color: var(--sobre-marino-2); }
.menu { display: flex; gap: 1.6rem; }
.menu a { position: relative; padding-block: 0.4rem; font-size: 0.95rem; font-weight: 500; text-decoration: none; color: var(--sobre-marino); transition: color 160ms ease; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.15rem; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--blanco); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-movil { display: none; position: relative; }
.menu-movil summary {
  display: inline-flex; align-items: center; gap: 0.6rem; list-style: none; cursor: pointer;
  min-height: 2.6rem; padding: 0.5rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 700; font-size: 0.92rem;
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil__barras, .menu-movil__barras::before, .menu-movil__barras::after { display: block; width: 1.1rem; height: 2px; background: currentColor; }
.menu-movil__barras { position: relative; }
.menu-movil__barras::before, .menu-movil__barras::after { content: ""; position: absolute; left: 0; }
.menu-movil__barras::before { top: -6px; }
.menu-movil__barras::after { top: 6px; }
.menu-movil[open] summary { background: var(--oro); color: var(--marino); border-color: var(--oro); }
.menu-movil__panel {
  position: absolute; right: 0; top: calc(100% + 0.75rem); display: grid; min-width: 16rem;
  background: var(--marino-900); border: 1px solid var(--linea-oscura); box-shadow: var(--sombra);
}
.menu-movil__panel a { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--linea-oscura); color: var(--blanco); text-decoration: none; font-weight: 500; }
.menu-movil__panel a[aria-current="page"] { color: var(--oro); }
.menu-movil__panel .menu-movil__accion { background: var(--oro); color: var(--marino); font-weight: 700; border-bottom: 0; }

.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; color: var(--sobre-marino-2); }
.migas li + li::before { content: "/"; margin-right: 0.4rem; color: var(--oro); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--blanco); text-decoration: underline; }
.migas + * { margin-top: 1.5rem; }

/* ---------- Portada: texto a la izquierda, foto a sangre a la derecha ---------- */
.portada { overflow: hidden; }
.portada .portada__rejilla {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  max-width: none; min-height: min(86svh, 50rem);
  padding-right: 0; padding-left: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));
}
.portada__texto { align-self: center; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem) 0; }
.portada__quien { display: block; margin-bottom: 1.75rem; font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 600; font-stretch: 100%; letter-spacing: 0; line-height: 1.4; color: var(--sobre-marino); }
.portada__verbos { display: block; font-size: clamp(3.4rem, 8vw, 7.6rem); font-weight: 800; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.035em; }
.portada__verbos span { display: block; }
.portada__oro { color: var(--oro); }
.portada .entradilla { margin-top: 2rem; max-width: 33rem; }
.portada__foto { position: relative; min-height: 26rem; background: var(--pared); }
.portada__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.portada__onda { height: clamp(3rem, 6vw, 5rem); padding-block: 1.25rem; box-sizing: content-box; }
@media (prefers-reduced-motion: no-preference) {
  .portada__verbos span { animation: entrar 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .portada__verbos span:nth-child(2) { animation-delay: 120ms; }
  .portada__verbos span:nth-child(3) { animation-delay: 240ms; }
}
@keyframes entrar { from { opacity: 0; transform: translateY(0.2em); } to { opacity: 1; transform: none; } }

/* Enlaces sobrios, sin flechas */
.enlace, .enlace-claro { font-weight: 600; text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.enlace { color: var(--marino); }
.enlace-claro { color: var(--blanco); }
.enlace:hover, .enlace-claro:hover { text-decoration-thickness: 3px; }
.mas { margin-top: 2rem; }

/* ---------- Celdas: la retícula cuadrada ---------- */
.celdas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.celdas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.celdas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.celdas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.celda { position: relative; display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--blanco); transition: background-color 200ms ease; }
.celda h3 { margin-top: 0.4rem; }
.celda p { color: var(--texto-suave); }
.celda__num { font-size: 0.85rem; font-weight: 700; color: var(--oro-texto); font-variant-numeric: tabular-nums; }
.celda__pie { margin-top: auto; padding-top: 0.5rem; }
a.celda { text-decoration: none; color: inherit; }
a.celda:hover { background: var(--papel); }
.claro .celda { background: var(--blanco); }
.oscuro .celdas, .oscuro-900 .celdas { background: var(--linea-oscura); border-color: var(--linea-oscura); }
.oscuro .celda, .oscuro-900 .celda { background: var(--marino); }
.oscuro-900 .celda { background: var(--marino-900); }
.oscuro .celda p, .oscuro-900 .celda p { color: var(--sobre-marino); }
.oscuro a.celda:hover, .oscuro-900 a.celda:hover { background: var(--marino-700); }
.celda--destacada { background: var(--marino) !important; color: var(--blanco); }
.celda--destacada p { color: var(--sobre-marino) !important; }
.celda--oro { background: var(--oro) !important; color: var(--marino); }
.celda--oro p { color: var(--marino) !important; }

/* Problema: una celda grande con la tesis y cuatro dolores */

/* ---------- Bento de servicios ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 1px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); }
.bento__principal { grid-column: span 2; grid-row: span 2; }
.bento__ancha { grid-column: span 2; }
.bento .celda { min-height: 16rem; }
.bento__principal .ui-video { margin-top: 1rem; }

/* ---------- Maquetas de interfaz ---------- */
.ui-video { background: var(--marino-900); border: 1px solid var(--linea-oscura); box-shadow: var(--sombra); }
.ui-video__barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linea-oscura); font-size: 0.78rem; color: var(--sobre-marino-2); }
.ui-video__barra span { width: 0.55rem; height: 0.55rem; background: var(--marino-500); }
.ui-video__barra em { margin-left: auto; font-style: normal; }
.ui-video__pantalla { position: relative; display: grid; grid-template-columns: 3fr 2fr; gap: 0.5rem; padding: 0.5rem; }
.ui-video__pantalla img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; }
.ui-video__lead { position: relative; display: grid; align-content: end; padding: 0.6rem; background: var(--marino-700); overflow: hidden; font-size: 0.78rem; color: var(--sobre-marino); }
.ui-video__lead::before { content: ""; position: absolute; left: 50%; top: 24%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--marino-500); transform: translateX(-50%); }
.ui-video__lead::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 70%; height: 36%; border-radius: 50% 50% 0 0; background: var(--marino-500); transform: translateX(-50%); }
.ui-video__lead span { position: relative; z-index: 1; }
.ui-video__nombre { position: absolute; left: 1rem; bottom: 1rem; padding: 0.2rem 0.55rem; background: rgba(18, 26, 46, 0.85); color: var(--blanco); font-size: 0.75rem; }
.ui-video__controles { display: flex; justify-content: center; gap: 0.6rem; padding: 0.6rem 0 0.8rem; }
.ui-video__controles span { width: 2rem; height: 2rem; background: var(--marino-700); border: 1px solid var(--linea-oscura); }
.ui-video__controles .ui-video__colgar { background: #b3474f; border-color: #b3474f; }

.ui-chat { max-width: 23rem; margin-inline: auto; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ui-chat__cabeza { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: var(--marino); color: var(--blanco); }
.ui-chat__cabeza img { width: 2.4rem; height: 2.4rem; object-fit: cover; object-position: 50% 18%; }
.ui-chat__cabeza strong { display: block; font-size: 0.95rem; }
.ui-chat__cabeza span { font-size: 0.78rem; color: var(--sobre-marino-2); }
.ui-chat__mensajes { display: grid; gap: 0.55rem; padding: 1rem; background: var(--papel); }
.burbuja { max-width: 85%; padding: 0.6rem 0.85rem; font-size: 0.92rem; line-height: 1.4; }
.burbuja--ella { justify-self: start; background: var(--blanco); border-left: 3px solid var(--oro); }
.burbuja--lead { justify-self: end; background: var(--marino); color: var(--blanco); }
.nota-ejemplo { margin-top: 0.8rem; font-size: 0.82rem; color: var(--texto-suave); text-align: center; }

.ui-informe { background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ui-informe__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--marino); color: var(--blanco); }
.ui-informe__cabeza strong { font-stretch: 112%; }
.ui-informe__cabeza span { font-size: 0.78rem; color: var(--sobre-marino-2); }
.ui-informe__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border-bottom: 1px solid var(--linea); }
.ui-informe__metricas div { padding: 1rem 1.25rem; background: var(--blanco); }
.ui-informe__metricas dt { font-size: 0.78rem; color: var(--texto-suave); }
.ui-informe__metricas dd { font-size: 1.9rem; font-weight: 800; font-stretch: 72%; color: var(--oro-texto); }
.ui-informe__barras { display: grid; gap: 0.6rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--linea); }
.ui-informe__barra { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.75rem; font-size: 0.82rem; }
.ui-informe__barra i { display: block; height: 0.55rem; background: var(--pared); }
.ui-informe__barra i::before { content: ""; display: block; height: 100%; background: var(--marino); }
.ui-informe__barra--a i::before { width: 72%; }
.ui-informe__barra--b i::before { width: 48%; background: var(--oro); }
.ui-informe__barra--c i::before { width: 30%; }
.ui-informe__frases { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1rem 1.25rem 1.25rem; }
.ui-informe__frases span { padding: 0.3rem 0.65rem; background: var(--papel); border: 1px solid var(--linea); font-size: 0.82rem; }

.ui-ficha { background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ui-ficha__cabeza { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--marino); color: var(--blanco); font-weight: 700; font-stretch: 110%; }
.ui-ficha__cabeza .icono { color: var(--oro); }
.ui-ficha ul { list-style: none; padding: 0; }
.ui-ficha li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--linea); font-size: 0.95rem; }
.ui-ficha li:last-child { border-bottom: 0; }
.ui-ficha .marca-si, .ui-ficha .marca-duda { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; }
.ui-ficha .marca-si { background: var(--marino); color: var(--oro); }
.ui-ficha .marca-duda { background: var(--pared); color: var(--oro-texto); font-weight: 800; }
.ui-ficha .marca-si .icono { width: 1rem; height: 1rem; }

/* ---------- Infografía de la conversación ---------- */
.conversacion { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--marino-900); border: 1px solid var(--linea-oscura); }
.conv { width: 100%; height: auto; overflow: visible; }
.conv__lead { fill: var(--sobre-marino-2); }
.conv__yo { fill: var(--oro); }
.conv__tramo { stroke: var(--oro); stroke-width: 2; }
.conv__texto { fill: var(--blanco); font-family: var(--fuente); font-size: 22px; font-weight: 800; font-stretch: 118%; }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-size: 0.88rem; color: var(--sobre-marino); }
.leyenda span { display: inline-flex; align-items: center; gap: 0.5rem; }
.leyenda span::before { content: ""; width: 0.8rem; height: 0.8rem; }
.leyenda__lead::before { background: var(--sobre-marino-2); }
.leyenda__yo::before { background: var(--oro); }

/* Fases con número condensado */
.fase__numero { font-size: clamp(3.5rem, 6vw, 5rem); font-weight: 800; font-stretch: 65%; line-height: 0.85; color: var(--oro); }
.fase__verbo { font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 800; font-stretch: 122%; letter-spacing: -0.02em; line-height: 1; }
.fase__lead { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: 0.92rem; color: var(--texto-suave); }
.fase__lead strong { color: var(--texto); }

/* ---------- Comparativa ---------- */
.comparativa { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--linea); }
.comparativa th, .comparativa td { padding: 1.1rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.comparativa thead th { font-size: 1.05rem; font-weight: 800; font-stretch: 115%; }
.comparativa thead th:nth-child(2) { color: var(--texto-suave); }
.comparativa thead th:nth-child(3) { background: var(--marino); color: var(--blanco); }
.comparativa tbody th { width: 22%; font-weight: 700; font-stretch: 108%; }
.comparativa td { width: 39%; }
.comparativa td:nth-child(2) { color: var(--texto-suave); }
.comparativa td:nth-child(3) { background: rgba(180, 151, 107, 0.1); font-weight: 500; }
.comparativa td span { display: flex; gap: 0.6rem; align-items: flex-start; }
.comparativa td .icono { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.comparativa td:nth-child(2) .icono { color: #a05a5f; }
.comparativa td:nth-child(3) .icono { color: var(--oro-texto); }

/* ---------- Perfil (sobre mí) ---------- */
.perfil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); }
.perfil__foto { position: relative; background: var(--marino-900); }
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; min-height: 26rem; }
.perfil__texto { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.25rem); background: var(--marino); }
.perfil__cita { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; font-stretch: 112%; line-height: 1.2; letter-spacing: -0.015em; }
.perfil__cita::before { content: ""; display: block; width: 3rem; height: 3px; margin-bottom: 1.25rem; background: var(--oro); }

/* Línea de tiempo en bloques */
.trayectoria { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); counter-reset: etapa; }
.trayectoria li { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2rem); background: var(--blanco); }
.trayectoria li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pared); }
.trayectoria li:last-child { background: var(--marino); color: var(--blanco); }
.trayectoria li:last-child::before { background: var(--oro); }
.trayectoria li:last-child p { color: var(--sobre-marino); }
.trayectoria__cuando { font-size: 2.2rem; font-weight: 800; font-stretch: 70%; line-height: 1; color: var(--oro-texto); }
.trayectoria li:last-child .trayectoria__cuando { color: var(--oro); }
.trayectoria p { color: var(--texto-suave); font-size: 0.97rem; }
.trayectoria h3 { font-size: 1.2rem; }

.prosa { max-width: 40rem; font-size: 1.1rem; color: var(--texto-suave); }
.prosa p + p { margin-top: 1.1rem; }
.prosa strong { color: var(--texto); }
.relato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.relato__lado { position: sticky; top: 6.5rem; display: grid; gap: 1.25rem; }
.relato__lado img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }


/* ---------- Recorrido del lead (flujo en bloques) ---------- */
.flujo { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.flujo__paso { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; background: var(--marino-700); border-top: 3px solid var(--oro); }
.flujo__paso:not(:last-child)::after {
  content: ""; position: absolute; right: -0.85rem; top: 2rem; z-index: 1; width: 0.7rem; height: 0.7rem;
  border-top: 2px solid var(--oro); border-right: 2px solid var(--oro); transform: rotate(45deg);
}
.flujo__num { font-size: 2.4rem; font-weight: 800; font-stretch: 65%; line-height: 1; color: var(--oro); }
.flujo__paso h3 { font-size: 1.1rem; }
.flujo__paso p { font-size: 0.94rem; color: var(--sobre-marino); }
.desvio { margin-top: 0.75rem; padding: 0.85rem; border: 1px dashed rgba(180, 151, 107, 0.7); font-size: 0.88rem; color: var(--sobre-marino); }
.desvio strong { display: block; color: var(--oro); font-stretch: 110%; }
.flujo__paso:last-child { background: var(--oro); color: var(--marino); }
.flujo__paso:last-child .flujo__num { color: var(--marino); }
.flujo__paso:last-child p { color: var(--marino); }

/* ---------- Filtro cuadrado (embudo en barras) ---------- */
.filtro { display: grid; gap: 0.5rem; }
.filtro__nivel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; font-weight: 700; font-stretch: 108%; }
.filtro__nivel span { font-weight: 400; font-stretch: 100%; font-size: 0.9rem; }
.filtro__nivel--1 { width: 100%; background: var(--pared); }
.filtro__nivel--2 { width: 80%; background: var(--oro-claro); }
.filtro__nivel--3 { width: 60%; background: var(--marino); color: var(--blanco); }
.filtro__nivel--3 span { color: var(--sobre-marino); }
.filtro__nota { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.92rem; font-weight: 600; color: var(--oro-texto); }
.filtro__nota .icono { width: 1.1rem; height: 1.1rem; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* Listas con icono */
.lista-icono { list-style: none; padding: 0; display: grid; }
.lista-icono li { display: flex; gap: 0.85rem; padding: 0.95rem 0; border-bottom: 1px solid var(--linea); }
.lista-icono .icono { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--oro-texto); }
.lista-icono--no li { color: var(--texto-suave); }
.lista-icono--no .icono { color: #a05a5f; }
.oscuro .lista-icono li { border-color: var(--linea-oscura); }
.oscuro .lista-icono .icono { color: var(--oro); }

/* ---------- Servicios en detalle ---------- */
.indice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); }
.indice a { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.1rem; background: var(--marino); text-decoration: none; font-weight: 700; font-stretch: 108%; transition: background-color 180ms ease; }
.indice a span { font-stretch: 70%; font-size: 1.4rem; color: var(--oro); }
.indice a:hover { background: var(--marino-700); }
.servicio { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--linea); scroll-margin-top: 5rem; }
.servicio:first-child { border-top: 0; padding-top: 0; }
.servicio:nth-child(even) .servicio__texto { order: 2; }
.servicio__cabeza { display: flex; align-items: center; gap: 1rem; }
.servicio__cabeza .servicio__num { font-size: 3rem; font-weight: 800; font-stretch: 65%; line-height: 1; color: var(--oro-texto); }
.servicio h2 { margin-top: 1.25rem; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.servicio__texto > p { margin-top: 1.1rem; color: var(--texto-suave); max-width: 34rem; }
.servicio__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.75rem; background: var(--linea); border: 1px solid var(--linea); }
.servicio__datos div { padding: 1rem 1.1rem; background: var(--blanco); }
.servicio__datos dt { font-size: 0.8rem; font-weight: 700; color: var(--oro-texto); }
.servicio__datos dd { margin-top: 0.3rem; font-size: 0.95rem; color: var(--texto); }

/* ---------- Calculadora ---------- */
.calculadora { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.calculadora__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--blanco); align-content: start; }
.calculadora__datos h3, .calculadora__datos .calculadora__ayuda { grid-column: 1 / -1; }
.calculadora__ayuda { font-size: 0.9rem; color: var(--texto-suave); }
.calculadora__resultado { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--marino); color: var(--blanco); }
.calculadora__resultado dl { display: grid; gap: 1px; background: var(--linea-oscura); border: 1px solid var(--linea-oscura); }
.calculadora__resultado dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 1rem; background: var(--marino); }
.calculadora__resultado dt { font-size: 0.92rem; color: var(--sobre-marino); }
.calculadora__resultado output { font-size: 1.6rem; font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums; color: var(--blanco); }
.calculadora__resultado .calculadora__total output { font-size: 2.6rem; color: var(--oro); }
.calculadora__escenario { padding: 1rem; background: var(--marino-700); border-left: 3px solid var(--oro); font-size: 0.95rem; color: var(--sobre-marino); }
.calculadora__escenario strong { color: var(--oro); font-variant-numeric: tabular-nums; }
.calculadora__sin-js { font-size: 0.85rem; color: var(--sobre-marino-2); }
.js .calculadora__sin-js { display: none; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: 0.4rem; align-content: start; }
.campo label { font-weight: 700; font-size: 0.95rem; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid #b9b1a9; border-radius: 0;
  background: var(--blanco); color: var(--texto); font: inherit; font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo select {
  appearance: none; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto) 50%), linear-gradient(135deg, var(--texto) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline: none; border-color: var(--marino); box-shadow: 0 0 0 3px rgba(180, 151, 107, 0.45); }
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #a05a5f; }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo--sufijo { position: relative; }
.campo--sufijo input { padding-right: 2.5rem; }
.campo--sufijo .sufijo { position: absolute; right: 0.9rem; bottom: 0.8rem; color: var(--texto-suave); font-weight: 600; }
.ayuda { font-size: 0.88rem; color: var(--texto-suave); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario { display: grid; gap: 1.2rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.formulario h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.campos-dobles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.formulario .boton { justify-self: start; }
.aviso-datos { font-size: 0.82rem; line-height: 1.5; color: var(--texto-suave); }

.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contacto__lado { display: grid; gap: 2rem; }
.canales { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.canales a { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--blanco); text-decoration: none; transition: background-color 180ms ease; }
.canales a:hover { background: var(--papel); }
.canales small { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.canales strong { font-stretch: 108%; overflow-wrap: anywhere; }
.pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.25rem 1rem; padding: 1.1rem 1.25rem; background: var(--blanco); }
.pasos li::before { content: counter(paso); grid-row: span 2; font-size: 2rem; font-weight: 800; font-stretch: 65%; line-height: 1; color: var(--oro-texto); }
.pasos h3 { font-size: 1.05rem; }
.pasos p { font-size: 0.93rem; color: var(--texto-suave); }
.pasos--fila { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pasos--fila li { grid-template-columns: 1fr; align-content: start; }
.pasos--fila li::before { grid-row: auto; font-size: 2.8rem; margin-bottom: 0.5rem; }

/* ---------- Preguntas frecuentes (abiertas, en dos columnas) ---------- */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.preguntas > div { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--blanco); }
.preguntas dt { display: flex; gap: 0.75rem; font-weight: 700; font-stretch: 108%; font-size: 1.08rem; line-height: 1.3; }
.preguntas dt::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-top: 0.45rem; background: var(--oro); }
.preguntas dd { margin-top: 0.6rem; padding-left: 1.3rem; color: var(--texto-suave); }
.grupo-preguntas + .grupo-preguntas { margin-top: clamp(3rem, 6vw, 4.5rem); }
.grupo-preguntas > h2 { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* ---------- Recursos ---------- */
.fichas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.ficha { display: flex; flex-direction: column; background: var(--blanco); transition: background-color 200ms ease; }
.ficha:hover { background: var(--papel); }
.ficha__portada {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  aspect-ratio: 5 / 4; padding: 1.25rem; overflow: hidden; background: var(--marino); color: var(--blanco); text-decoration: none; isolation: isolate;
}
.ficha__portada::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/img/puntos-claros.svg"); }
.ficha__portada .icono { width: 1.75rem; height: 1.75rem; color: var(--oro); }
.ficha__portada strong { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; font-stretch: 120%; line-height: 0.95; letter-spacing: -0.03em; }
.ficha:nth-child(2) .ficha__portada { background: var(--oro); color: var(--marino); }
.ficha:nth-child(2) .ficha__portada .icono { color: var(--marino); }
.ficha:nth-child(3) .ficha__portada { background: var(--marino-700); }
.ficha:nth-child(4) .ficha__portada { background: var(--pared); color: var(--marino); }
.ficha:nth-child(4) .ficha__portada .icono { color: var(--oro-texto); }
.ficha:nth-child(4) .ficha__portada::before { background-image: url("/img/puntos-oscuros.svg"); }
.ficha__cuerpo { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.25rem 1.25rem 1.5rem; }
.ficha__cuerpo h2, .ficha__cuerpo h3 { font-size: 1.15rem; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.25; }
.ficha__cuerpo a { text-decoration: none; }
.ficha__cuerpo a:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.ficha__cuerpo p { font-size: 0.94rem; color: var(--texto-suave); }
.ficha__meta { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: var(--oro-texto); }

/* ---------- Entrada de páginas interiores ---------- */
.entrada { padding: clamp(3rem, 7vw, 5.5rem) 0 0; overflow: hidden; }
.entrada__rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.entrada h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); font-stretch: 120%; }
.entrada .entradilla { margin-top: 1.5rem; }
.entrada__visual { position: relative; }
.entrada__visual img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; }
.entrada__onda { height: clamp(3rem, 6vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); opacity: 0.85; }
.entrada--corta { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.entrada--corta h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); }

/* ---------- Artículos ---------- */
.articulo { max-width: 46rem; margin-inline: auto; }
.articulo__meta { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.75rem; font-size: 0.92rem; color: var(--sobre-marino); }
.articulo__meta img { width: 2.8rem; height: 2.8rem; object-fit: cover; object-position: 50% 18%; }
.texto-largo { font-size: 1.12rem; line-height: 1.75; color: #353c4d; }
.texto-largo > * + * { margin-top: 1.25rem; }
.texto-largo h2 { margin-top: 3rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--texto); }
.texto-largo h3 { margin-top: 2rem; font-size: 1.25rem; color: var(--texto); }
.texto-largo ul, .texto-largo ol { padding-left: 1.3rem; }
.texto-largo li + li { margin-top: 0.5rem; }
.texto-largo strong { color: var(--texto); }
.texto-largo blockquote { padding: 1.5rem 1.75rem; background: var(--marino); color: var(--blanco); font-size: 1.35rem; font-weight: 700; font-stretch: 110%; line-height: 1.35; border-left: 4px solid var(--oro); }
.texto-largo table { width: 100%; border-collapse: collapse; font-size: 0.98rem; border: 1px solid var(--linea); }
.texto-largo th, .texto-largo td { padding: 0.75rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.texto-largo thead th { background: var(--marino); color: var(--blanco); }
.recuadro { padding: 1.5rem 1.75rem; background: var(--papel); border-left: 4px solid var(--oro); }
.recuadro p + p { margin-top: 0.6rem; }
.capitular::first-letter { float: left; margin: 0.05em 0.12em 0 0; font-size: 4.2em; font-weight: 800; font-stretch: 70%; line-height: 0.8; color: var(--oro-texto); }

/* ---------- Documentos legales ---------- */
.documento { max-width: 48rem; }
.documento h2 { margin-top: 2.75rem; font-size: 1.6rem; }
.documento p, .documento ul, .documento dl { margin-top: 1rem; color: var(--texto-suave); }
.documento ul { padding-left: 1.25rem; }
.documento li + li { margin-top: 0.4rem; }
.documento dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.documento dt, .documento dd { padding: 0.7rem 0.9rem; background: var(--blanco); }
.documento dt { font-weight: 700; color: var(--texto); }
.documento dd { margin: 0; }
.actualizado { margin-top: 1rem; font-size: 0.9rem; color: var(--sobre-marino-2); }
.pendiente { background: #fff3c4; color: #6b4e00; padding: 0 0.3em; font-weight: 700; }

/* ---------- Llamada final ---------- */
.cierre { text-align: left; }
.cierre__rejilla { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cierre h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.cierre .onda { height: clamp(6rem, 12vw, 10rem); }

/* ---------- Pie ---------- */
.pie { position: relative; background: var(--marino-900); color: var(--sobre-marino); padding-bottom: 2rem; font-size: 0.95rem; isolation: isolate; }
.pie__llamada { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2.5rem 0; border-bottom: 1px solid var(--linea-oscura); }
.pie__frase { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em; line-height: 1.05; color: var(--blanco); max-width: 34rem; }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 3rem; }
.marca--pie { margin-bottom: 1.25rem; color: var(--blanco); }
.pie__firma p { max-width: 24rem; }
.pie__titulo { margin-bottom: 0.9rem; font-weight: 700; color: var(--blanco); font-stretch: 110%; }
.pie ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.pie a { color: var(--sobre-marino); text-decoration: none; overflow-wrap: anywhere; }
.pie a:hover { color: var(--blanco); text-decoration: underline; text-decoration-color: var(--oro); }
.pie .boton--oro { color: var(--marino); }
.pie .boton--oro:hover { color: var(--marino); text-decoration: none; }
.pie__notas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-oscura); font-size: 0.84rem; color: var(--sobre-marino-2); }
.credito { background: var(--blanco); border-top: 1px solid var(--linea); }
.credito__fila { display: flex; justify-content: center; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding-block: 1rem; font-size: 0.85rem; color: var(--texto-suave); }
.credito__logo { display: block; padding: 0.25rem; }
.credito__logo img { width: 158px; height: auto; }

/* ---------- Ajustes de ritmo y piezas pequeñas ---------- */
h1 + .entradilla, h2 + .entradilla, h2 + .prosa, .etiqueta + h2, .etiqueta + h1 { margin-top: 1.25rem; }
.cierre .entradilla { margin-top: 1.5rem; }
.h-pequeno { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 1.1rem; }
.relato__texto { margin-top: 1.75rem; }
.celda--destacada .icono-caja { background: var(--oro); color: var(--marino); }
.celda--oro .icono-caja { background: var(--marino); color: var(--oro); }
.celda--oro .celda__num { color: var(--marino); }
.fichas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.canales .icono-caja { width: 2.75rem; height: 2.75rem; }
.canales .icono-caja .icono { width: 1.3rem; height: 1.3rem; }
.grupo-preguntas > h2 .icono-caja { width: 2.75rem; height: 2.75rem; }
.lista-icono li > span { flex: 1; }
.pagina-servicios .entrada h1, .pagina-contacto .entrada h1 { font-size: clamp(2.3rem, 4.6vw, 4.3rem); }
.pagina-articulo .entrada h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.pagina-articulo .entrada .articulo { max-width: 52rem; }
.entrada--corta .entrada__visual { max-width: 20rem; justify-self: end; }
.dos-columnas h3 { margin-bottom: 0.5rem; }
.celda h3 + .lista-icono { margin-top: 0.25rem; }
.celda--destacada .lista-icono li { border-color: var(--linea-oscura); color: var(--sobre-marino); }
.celda--destacada .lista-icono--no .icono { color: var(--oro); }

/* Contraste: en fondos claros el oro se oscurece; en bloques marino dentro de secciones claras, se aclara */
.fase__numero { color: var(--oro-texto); }
.oscuro .fase__numero, .oscuro-900 .fase__numero, .celda--destacada .fase__numero { color: var(--oro); }
.oscuro 
/* ---------- Bloques de texto, listas y detalles ---------- */
.dos-columnas--arriba { align-items: start; }
.rejilla-texto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.rejilla-texto > div { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--blanco); }
.rejilla-texto dt { font-weight: 700; font-stretch: 108%; font-size: 1.08rem; line-height: 1.3; }
.rejilla-texto dd { margin-top: 0.5rem; color: var(--texto-suave); }
.celda__momento { font-size: 0.85rem; font-weight: 600; color: var(--oro-texto); }
.oscuro .celda__momento { color: var(--oro); }
.celda--oro .celda__momento { color: var(--marino); }
.lista-definida > div { display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr); gap: 0.5rem 2rem; padding: 1.25rem 0; border-top: 1px solid var(--linea); }
.lista-definida > div:last-child { border-bottom: 1px solid var(--linea); }
.lista-definida dt { font-weight: 700; font-stretch: 108%; font-size: 1.08rem; }
.lista-definida dd { color: var(--texto-suave); }
.lista-puntos { list-style: none; padding: 0; }
.lista-puntos li { position: relative; padding: 0.85rem 0 0.85rem 1.5rem; border-bottom: 1px solid var(--linea); }
.lista-puntos li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 0.45rem; height: 0.45rem; background: var(--oro); }
.lista-puntos--no li { color: var(--texto-suave); }
.lista-puntos--no li::before { top: 1.6rem; width: 0.7rem; height: 2px; background: var(--texto-suave); }
.celda--destacada .lista-puntos li { color: var(--sobre-marino); border-color: var(--linea-oscura); }
.celda--destacada .lista-puntos--no li::before { background: var(--oro); }
.celda h3 + .lista-puntos { margin-top: 0.25rem; }
.entrada__visual img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; }
.pagina-sobre .entrada__visual img { aspect-ratio: 4 / 5; }
.fase__verbo { font-stretch: 118%; }

/* ---------- Tarjetas que responden al ratón ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ficha, a.celda { transition: background-color 200ms ease, transform 220ms ease; }
  .ficha:hover { transform: translateY(-3px); }
}

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1100px) {
  .menu { gap: 1.1rem; }
  .menu a { font-size: 0.9rem; }
  .flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flujo__paso:not(:last-child)::after { display: none; }
  .pasos--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .menu, .cabecera__accion { display: none; }
  .menu-movil { display: block; }
  .portada .portada__rejilla { grid-template-columns: 1fr; padding-left: 0; min-height: 0; }
  .portada__foto { order: -1; min-height: 0; height: min(62svh, 30rem); }
  .portada__texto { padding: 2.5rem var(--margen) 2.5rem; }
  .entrada__rejilla, .cierre__rejilla, .dos-columnas, .contacto, .relato, .calculadora { grid-template-columns: 1fr; }
  .entrada__visual { max-width: 22rem; }
  .relato__lado { position: static; }
  .celdas--4, .trayectoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__principal { grid-column: span 2; grid-row: auto; }
    .perfil { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 1fr; }
  .servicio:nth-child(even) .servicio__texto { order: 0; }
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__firma { grid-column: 1 / -1; }
  .cabeza { grid-template-columns: 1fr; }
}

/* ---------- Móvil ---------- */
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .marca__oficio { display: none; }
  .celdas--2, .celdas--3, .celdas--4, .bento, .rejilla-texto, .trayectoria, .flujo, .pasos--fila,
  .preguntas, .fichas, .fichas--dos, .indice, .servicio__datos, .campos-dobles, .calculadora__datos { grid-template-columns: 1fr; }
  .relato__lado .celdas--2 { grid-template-columns: 1fr 1fr; }
  .entrada--corta .entrada__visual { justify-self: start; max-width: 14rem; }
  .bento__principal, .bento__ancha { grid-column: auto; }
    .acciones .boton { width: 100%; }
  .comparativa thead th:first-child, .comparativa tbody th { display: none; }
  .comparativa td { width: 50%; padding: 0.85rem; font-size: 0.92rem; }
  .filtro__nivel--2 { width: 90%; }
  .filtro__nivel--3 { width: 80%; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .documento dl { grid-template-columns: 1fr; }
  .formulario .boton { justify-self: stretch; }
  .lista-definida > div { grid-template-columns: 1fr; }
}

@media print {
  .cabecera, .formulario, .saltar, .credito, .menu-movil, .rotulo, .onda { display: none; }
  .oscuro, .oscuro-900, .pie { background: none; color: #000; }
}