/* Manrope autoalojada: quita la cadena critica fonts.googleapis.com -> fonts.gstatic.com */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Landing consultor de Google Ads. Uri Pulido.
   Colores de marca sacados del kit de Elementor de uripulido.es (post-1462.css):
   principal #E6B938, secundario #0F1412, acento #212322, texto #454444, crema #FFF7E1. */

:root {
  --negro: #0F1412;
  --grafito: #212322;
  --grafito-2: #2A2D2C;
  --texto: #212322;
  --gris: #676767;
  --gris-claro: #AAAAAA;
  --oro: #E6B938;
  --oro-vivo: #F2C94C;
  --crema: #FFF7E1;
  --claro: #FAFAF7;
  --blanco: #FFFFFF;
  --linea-oscura: rgba(255, 255, 255, 0.09);
  --linea-clara: #E9E6DC;
  --radio: 20px;
  --ancho: 1180px;
  --sombra: 0 24px 60px -24px rgba(15, 20, 18, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--claro);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  color: var(--grafito);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h2 { font-size: clamp(30px, 3.8vw, 48px); }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1em; }

.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 40px, 820px); }

.seccion { padding: clamp(72px, 9vw, 96px) 0; }
.seccion--oscura { background: var(--negro); color: var(--blanco); }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3 { color: var(--blanco); }
.seccion--clara { background: var(--claro); }
.seccion--crema { background: var(--crema); }

/* Etiqueta superior de sección */
/* Etiquetas de seccion en voz propia: son frases, no nombres de categoria, asi que
   van en minuscula y sin espaciado. El dorado solo donde es legible: sobre fondo claro
   da 1,77:1 contra el minimo de 4,5, asi que ahi el texto es grafito. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--oro);
}
.etiqueta--oscura { color: #212322; }

.cabeza-seccion { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.cabeza-seccion--centro { margin-inline: auto; text-align: center; }
.cabeza-seccion--centro .etiqueta { justify-content: center; }
.cabeza-seccion--ancha { max-width: 920px; }

/* El titular de la comparativa pide 926px y el contenedor daba 920: dejaba "promesa." sola. */
#consultor-o-agencia .cabeza-seccion { max-width: 980px; }
.cabeza-seccion__sub { font-size: 18px; margin-top: 8px; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 17px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.btn--oro { background: var(--oro); color: var(--negro); box-shadow: 0 10px 30px -10px rgba(230, 185, 56, 0.55); }
.btn--oro:hover { background: var(--oro-vivo); }
.btn--linea { border-color: rgba(255, 255, 255, 0.28); color: var(--blanco); }
.btn--linea:hover { border-color: var(--oro); color: var(--oro); }
.btn--pequeno { padding: 14px 22px; font-size: 15px; }
.btn--ancho { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--negro);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.cabecera__logo img { width: 150px; mix-blend-mode: lighten; }
.cabecera__acciones { display: flex; align-items: center; gap: 22px; }
.enlace-wa {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blanco); font-size: 15px; font-weight: 600; text-decoration: none;
}
.enlace-wa:hover { color: var(--oro); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 64px) 0 clamp(64px, 8vw, 110px); }
.hero__fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(230, 185, 56, 0.14), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero__rejilla { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: 22px; text-wrap: balance; }
.hero__previo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--oro); }
.hero__checks { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 12px; }
.hero__checks li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--blanco); }
.hero__checks svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(230, 185, 56, 0.16); color: var(--oro); }
.resalte { color: var(--oro); }
.hero__entrada { font-size: clamp(19px, 1.7vw, 22px); color: var(--blanco); max-width: 560px; margin-bottom: 28px; text-wrap: balance; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__nota { margin: 16px 0 0; font-size: 14px; color: var(--blanco); }

.confianza { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 0; margin: 34px 0 0; }
.confianza__sello { min-height: 86px; line-height: 0; }
.confianza__partner a { display: block; line-height: 0; }
.confianza__partner img { height: 84px; width: auto; border-radius: 2px; }
.confianza__sello .ti-widget-container { margin: 0 !important; }
.confianza__item {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--linea-oscura); background: rgba(255, 255, 255, 0.03);
  font-size: 14px; color: var(--blanco);
}
.confianza__item strong { color: var(--blanco); font-weight: 700; }

.hero__visual { --sangrado: clamp(0px, calc((100vw - 1180px) / 2), 110px); position: relative; justify-self: start; width: calc(100% + var(--sangrado)); margin-right: calc(var(--sangrado) * -1); }
.hero__halo {
  position: absolute; inset: 12% 8% 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 185, 56, 0.35), transparent 65%);
  filter: blur(30px);
}
.hero__foto {
  position: relative; width: 100%;
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.dato-flotante {
  position: absolute; display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 16px; border-radius: 18px;
  background: rgba(33, 35, 34, 0.88); border: 1px solid var(--linea-oscura);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sombra);
}
.dato-flotante--caso { left: 50%; bottom: -2%; transform: translateX(-50%); width: max-content; max-width: 96%; }
.dato-flotante__cifra { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--oro); line-height: 1; white-space: nowrap; }
.dato-flotante__texto { font-size: 14px; line-height: 1.35; color: var(--blanco); font-weight: 600; }
.dato-flotante__texto small { font-size: 12px; font-weight: 500; color: var(--blanco); }

/* Logos */
.logos { background: var(--negro); padding: 44px 0 50px; border-bottom: 1px solid var(--linea-oscura); overflow: hidden; }
.logos__titulo {
  text-align: center; font-size: clamp(21px, 2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--blanco); margin-bottom: 34px; text-wrap: balance;
}
.logos__carril { display: flex; width: max-content; }
.logos__pista { display: flex; align-items: stretch; gap: 0; padding-right: 0; animation: desliza 55s linear infinite; }
.logo-celda { display: flex; align-items: center; justify-content: center; padding: 0 clamp(26px, 3vw, 44px); min-height: 118px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
/* Logos recortados y pintados en un solo tono; el tamaño de cada uno va en su width/height, igualado por superficie visible */
.logos__pista img { flex: none; display: block; width: auto; height: auto; max-width: 172px; max-height: 46px; filter: brightness(0) invert(1); opacity: 0.78; }
@keyframes desliza { to { transform: translateX(-100%); } }

/* Tarjetas */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tarjeta {
  background: var(--blanco); border: 1px solid var(--linea-clara); border-radius: var(--radio);
  padding: 32px 30px; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(15, 20, 18, 0.25); }
.tarjeta p { margin: 0; }

/* Problema */
.dolor__cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 56px); }
.dolor__cabeza h2 { margin: 0; }
.dolor__entrada { margin: 0 0 14px; font-size: 19px; line-height: 1.55; font-weight: 600; color: var(--grafito); }
.dolor__entrada strong { font-weight: 800; background: linear-gradient(transparent 60%, rgba(230, 185, 56, 0.45) 60%); }
.enlace-flecha { font-weight: 700; line-height: 1.6; color: var(--grafito); text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 0.2s ease; }
/* La cabecera alinea las dos columnas por abajo (align-items: end), pero la frase
   arrastraba un margin-bottom de 14 px que la levantaba justo eso y la dejaba a media
   altura, sin llegar a la ultima linea del titular. Aqui se anula. */
.dolor__lado { text-wrap: balance; }
.dolor__lado .dolor__entrada:last-child { margin-bottom: 0; }
.enlace-flecha__final { white-space: nowrap; }
.enlace-flecha svg { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; transition: transform 0.2s ease; }
.enlace-flecha:hover { color: #7A5F12; }
.enlace-flecha:hover svg { transform: translateX(4px); }
.dolor__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dolor__lista li { padding: 34px 32px; border: 1px solid var(--linea-clara); border-radius: var(--radio); background: var(--blanco); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dolor__lista li:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(15, 20, 18, 0.3); }
.dolor__lista h3 { margin-bottom: 10px; font-size: clamp(21px, 2vw, 27px); line-height: 1.2; }
.dolor__lista p { margin: 0; }
.dolor__lista .dolor--revelacion { border-color: var(--negro); background: radial-gradient(420px 220px at 100% 0%, rgba(230, 185, 56, 0.16), transparent 70%), var(--negro); }
.dolor__lista .dolor--revelacion h3, .dolor__lista .dolor--revelacion p { color: var(--blanco); }

.versus__cita { max-width: 700px; margin: 48px auto 0; text-align: center; }
.versus__estrellas { display: block; margin-bottom: 12px; font-size: 18px; letter-spacing: 4px; color: var(--oro); }
.versus__cita blockquote { margin: 0; font-size: clamp(20px, 2.1vw, 25px); font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: var(--blanco); text-wrap: balance; }
.versus__cita figcaption { margin-top: 12px; font-size: 15px; color: var(--blanco); }
.versus__accion { display: flex; justify-content: center; margin-top: 26px; }

/* Cómo trabajo */
.proceso { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.proceso__paso { position: relative; }
/* Evita que una frase parta dejando dos palabras sueltas al final de la linea.
   En contacto, "o a" se quedaba colgando y el correo saltaba solo a la linea siguiente. */
.sin-partir { white-space: nowrap; }
.proceso__paso:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: 68px; right: -20px; height: 2px; background: linear-gradient(90deg, var(--oro), rgba(230, 185, 56, 0.35)); }
.proceso__icono { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: var(--negro); color: var(--oro); box-shadow: 0 0 0 8px var(--claro); }
.proceso__icono svg { width: 24px; height: 24px; }
.proceso__cuando { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #7A5F12; }
.proceso__paso h3 { font-size: 21px; margin-bottom: 10px; }
.proceso__paso p { margin: 0; font-size: 16px; }
.senal { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 52px); padding: clamp(30px, 5vw, 64px); border-radius: 28px; background: radial-gradient(700px 360px at 0% 0%, rgba(230, 185, 56, 0.16), transparent 60%), var(--negro); color: var(--blanco); }
.senal h3 { margin-bottom: 14px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--blanco); }
.senal__texto { max-width: 760px; }
.senal__texto p { margin: 0; font-size: 18px; }
.senal__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.senal__lista li { display: flex; align-items: flex-start; gap: 18px; padding: 26px 28px; border: 1px solid var(--linea-oscura); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.senal__lista svg { flex: none; width: 54px; height: 54px; padding: 12px; border-radius: 15px; background: rgba(230, 185, 56, 0.14); color: var(--oro); }
.senal__lista strong { display: block; margin-bottom: 8px; font-size: 22px; line-height: 1.25; color: var(--blanco); }
.senal__lista span { display: block; font-size: 16.5px; line-height: 1.6; color: var(--blanco); }

/* Casos */
.casos { background: radial-gradient(1000px 520px at 50% 0%, rgba(230, 185, 56, 0.08), transparent 60%), var(--negro); }
.casos__lista { display: grid; gap: 28px; }
.caso { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--linea-oscura); border-radius: 28px; background: rgba(255, 255, 255, 0.025); }
.caso--invertido { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.caso--invertido .caso__texto { order: 2; }
.caso__sector { display: inline-block; padding: 7px 14px; border-radius: 999px; background: rgba(230, 185, 56, 0.12); color: var(--oro); font-size: 14px; font-weight: 800; }
.caso__cifra { margin: 22px 0 0; font-size: clamp(64px, 8vw, 112px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; color: var(--oro); }
.caso__titular { margin: 10px 0 0; font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--blanco); line-height: 1.25; letter-spacing: -0.01em; }
.caso__historia { display: grid; gap: 16px; margin: 24px 0 0; }
.caso__historia > div { padding-left: 16px; border-left: 2px solid rgba(230, 185, 56, 0.3); }
.caso__historia > div:last-child { border-left-color: var(--oro); }
.caso__momento { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.caso__historia p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--blanco); }
/* Dos columnas fijas, no auto-fit. Con auto-fit y minimo de 140 px, en los 410 px de ancho
   que tiene la columna del caso solo caben dos, asi que en los casos de TRES metricas la
   tercera caia sola y dejaba 211 px de hueco a su derecha (medido a 1440; 191 a 1100).
   Fijando dos columnas el comportamiento deja de depender del ancho, y la regla de debajo
   estira la ultima caja cuando se queda sola en su fila. */
.caso__datos { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.caso__datos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.caso__datos li { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linea-oscura); }
.caso__datos strong { display: block; font-size: 24px; font-weight: 800; color: var(--blanco); letter-spacing: -0.02em; white-space: nowrap; }
.caso__datos span { font-size: 13.5px; color: var(--blanco); line-height: 1.4; }
.caso__periodo { margin: 20px 0 0; font-size: 13.5px; color: var(--blanco); }
.caso__captura { margin: 0; }
.caso__captura > a { display: block; cursor: zoom-in; }
.caso__captura > a img { transition: transform 0.25s ease; }
.caso__captura > a:hover img { transform: scale(1.015); }
.caso__captura img { border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); border: 1px solid var(--linea-oscura); }
.caso__captura figcaption { margin-top: 12px; font-size: 13px; color: var(--blanco); text-align: center; }
.caso__captura figcaption a { color: var(--oro); font-weight: 700; }
.casos__cta { text-align: center; margin-top: 48px; }

/* Sobre mí */
.sobre { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sobre__foto { position: relative; }
.sobre__foto img { border-radius: 26px; box-shadow: var(--sombra); }
.dato-flotante--trayectoria { left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); gap: clamp(18px, 3vw, 32px); padding: 14px 22px; }
.dato-flotante--trayectoria > div { text-align: center; }
.dato-flotante--trayectoria strong { display: block; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--oro); white-space: nowrap; }
.dato-flotante--trayectoria span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--blanco); white-space: nowrap; }
.sobre__texto p:not(.etiqueta) { font-size: 18px; }
.sobre__cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }
.sobre__cierre .enlace-flecha { font-size: 18px; }
.partner { display: inline-block; }
.partner img { width: 160px; }

/* Reseñas */
/* Dos fondos claros seguidos: sin cambio de color, el relleno completo se lee como un único hueco */
#sobre-mi { padding-bottom: clamp(44px, 5vw, 72px); }
#opiniones { padding-top: clamp(44px, 5vw, 72px); }
/* Alto reservado para el carrusel, que Trustindex pinta tras la primera interacción */
.opiniones__widget { max-width: 1180px; min-height: 316px; margin: 0 auto; overflow-x: clip; }
.opiniones__widget .ti-widget-container { margin: 0 !important; }

/* Compromiso */

/* Encaje */
.encaje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; }
.encaje__col { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--linea-clara); border-radius: 24px; background: var(--blanco); }
.encaje__col--si { border-color: var(--negro); background: radial-gradient(520px 260px at 0% 0%, rgba(230, 185, 56, 0.14), transparent 65%), var(--negro); }
.encaje__cab { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.encaje__cab h3 { margin: 0; font-size: clamp(22px, 2vw, 26px); }
.encaje__col--si h3 { color: var(--blanco); }
.encaje__insignia { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; }
.encaje__insignia svg { width: 26px; height: 26px; }
.encaje__col--si .encaje__insignia { background: var(--oro); color: var(--negro); }
.encaje__col--no .encaje__insignia { background: #EFEDE6; color: var(--grafito); }
.encaje__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.encaje__col li { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; line-height: 1.55; }
.encaje__col--si li { color: var(--blanco); }
.encaje__col--no li { color: var(--grafito); }
.encaje__icono { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; }
.encaje__icono svg { width: 16px; height: 16px; }
.encaje__col--si .encaje__icono { background: rgba(230, 185, 56, 0.18); color: var(--oro); }
.encaje__col--no .encaje__icono { background: #EFEDE6; color: var(--grafito); }
#encaje .cabeza-seccion { margin-bottom: clamp(32px, 4vw, 48px); }
/* Opiniones (crema) seguida de ¿Encajamos? (claro): relleno reducido en la transición */
#opiniones { padding-bottom: clamp(44px, 5vw, 72px); }
#encaje { padding-top: clamp(44px, 5vw, 72px); }

/* Contacto */
.contacto { background: radial-gradient(800px 480px at 15% 20%, rgba(230, 185, 56, 0.12), transparent 60%), var(--negro); }
.contacto__rejilla { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contacto__texto > p:not(.etiqueta) { font-size: 18px; }
.contacto__pasos { list-style: none; padding: 0; margin: 30px 0; display: grid; gap: 16px; }
.contacto__pasos li { display: flex; align-items: center; gap: 14px; color: var(--blanco); font-weight: 600; }
.contacto__icono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(230, 185, 56, 0.14); color: var(--oro); }
.contacto__icono svg { width: 18px; height: 18px; }
.contacto__alternativa a { display: inline-block; padding: 9px 0; color: var(--oro); font-weight: 700; text-underline-offset: 4px; }
.contacto__sello { margin-top: 28px; min-height: 86px; line-height: 0; }
.contacto__sello .ti-widget-container { margin: 0 !important; }

.formulario { background: var(--blanco); border-radius: 26px; padding: clamp(26px, 3.4vw, 40px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); }
.campo { display: grid; gap: 7px; margin-bottom: 16px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo label { font-size: 15px; font-weight: 700; color: var(--grafito); }
.opcional { font-weight: 500; color: var(--texto); }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--grafito);
  padding: 14px 16px; border-radius: 12px; border: 1.5px solid #DEDBD2; background: #FCFBF8;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 4px rgba(230, 185, 56, 0.22); background: var(--blanco); }
.campo .invalido { border-color: #C4463A; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.casilla { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 18px; padding: 10px 0; font-size: 14.5px; color: var(--texto); cursor: pointer; }
.casilla input { width: 24px; height: 24px; margin-top: 0; accent-color: var(--negro); flex: none; }
.casilla a { color: var(--grafito); font-weight: 700; }
.formulario__nota { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--texto); }
.formulario__error { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FBEAE7; color: #8E2B21; font-size: 14px; }
.formulario__error a { color: inherit; font-weight: 700; }
.formulario__exito { text-align: center; padding: 20px 6px; }
.formulario__exito > svg { width: 56px; height: 56px; padding: 12px; margin: 0 auto 18px; border-radius: 50%; background: var(--negro); color: var(--oro); }
.formulario__exito h3 { color: var(--grafito); font-size: 24px; }
.formulario__exito p { margin-bottom: 0; color: var(--texto); }
.formulario__exito .btn svg { width: 18px; height: 18px; flex: none; }
.exito__clave { margin: 14px 0 10px; font-weight: 800; color: var(--grafito); }
.exito__detalle { font-size: 15.5px; line-height: 1.6; }
.exito__rapido { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linea-clara); }
.formulario__exito .exito__rapido-titulo { margin: 0 0 14px !important; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--grafito); }
.formulario__exito .exito__nota { margin-top: 12px !important; font-size: 13.5px; }
.btn--contorno { background: transparent; color: var(--grafito); border-color: #D7D3C6; }
.btn--contorno:hover { border-color: var(--negro); background: #FCFBF8; }

/* FAQ */
.faq { display: grid; gap: 14px; }
.faq details { border: 1px solid var(--linea-clara); border-radius: 18px; background: var(--blanco); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq details:hover { border-color: rgba(230, 185, 56, 0.55); }
.faq details[open] { border-color: rgba(230, 185, 56, 0.55); box-shadow: 0 18px 40px -30px rgba(15, 20, 18, 0.45); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px 26px; font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; line-height: 1.35; color: var(--grafito);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__mas { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--crema); color: #7A5F12; transition: transform 0.2s ease, background-color 0.2s ease; }
.faq__mas svg { width: 18px; height: 18px; }
.faq details[open] .faq__mas { transform: rotate(45deg); background: var(--negro); color: var(--oro); }
.faq details p { margin: 0; padding: 0 26px 26px; font-size: 16.5px; line-height: 1.65; }
.faq__cierre { margin: 30px 0 0; text-align: center; font-size: 18px; }

/* Pie */
.pie { padding: clamp(48px, 6vw, 72px) 0 40px; border-top: 1px solid var(--linea-oscura); font-size: 15px; }
.pie__cierre { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(32px, 4vw, 44px); border-bottom: 1px solid var(--linea-oscura); }
.pie__cierre h2 { margin: 0 0 10px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; color: var(--blanco); text-wrap: balance; }
.pie__cierre p { margin: 0; font-size: 17px; color: var(--blanco); }
.pie__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: clamp(28px, 3.5vw, 40px) 0; }
.pie__logo { width: 150px; mix-blend-mode: lighten; margin-bottom: 12px; }
.pie__marca p { margin: 0; }
.pie__contacto, .pie__legal { display: grid; gap: 2px; align-content: start; }
.pie a:not(.btn) { display: inline-block; padding: 10px 0; color: var(--blanco); text-decoration: none; }
.pie a:not(.btn):hover { color: var(--oro); }
.pie__copy { margin: 0; padding-top: 22px; border-top: 1px solid var(--linea-oscura); font-size: 14px; color: var(--blanco); }

/* Barra fija en móvil */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: rgba(15, 20, 18, 0.94); border-top: 1px solid var(--linea-oscura);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%); transition: transform 0.25s ease;
}
.barra-movil .btn { padding: 15px 12px; }
.barra-movil.visible { transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
  .hero__rejilla { grid-template-columns: 1fr; }
  .hero__visual { width: min(100%, 460px); justify-self: center; margin-right: 0; }
  .caso, .caso--invertido { grid-template-columns: 1fr; }
  .caso--invertido .caso__texto { order: 0; }
  .proceso { grid-template-columns: 1fr; gap: 34px; }
  .proceso__paso:not(:last-child)::after { top: 68px; bottom: -22px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--oro), rgba(230, 185, 56, 0.35)); }
  .proceso__paso { padding-left: 84px; }
  .proceso__icono { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Tableta: el alto del carrusel varía entre 316 y 399 px según cómo se partan las líneas; se reserva el más frecuente */
@media (max-width: 1023px) {
  .opiniones__widget { min-height: 341px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  /* En movil se oculta el texto y queda solo el icono, que mide 18x18: una zona
     tactil de 18 px es inutilizable con el dedo. El icono se queda igual de grande,
     lo que crece es el area que responde al toque, hasta 44x44. */
  .enlace-wa span { display: none; }
  .enlace-wa { min-width: 44px; min-height: 44px; justify-content: center; margin-right: -10px; }

  /* Zonas tactiles de los enlaces de texto. Medido a 390 px: "¿Tienes otra duda?" daba 24 px de
     alto, "Cuentame tu caso" 29 y los tres "Ver en grande" 39. El relleno crece el area que
     responde al dedo y el margen negativo devuelve el hueco, asi que no se mueve nada de sitio.
     El subrayado de estos enlaces es text-decoration, no un borde, o sea que tampoco se desplaza. */
  .enlace-flecha { display: inline-block; padding: 11px 0; margin: -11px 0; }
  /* Ojo: al pasarlo a inline-block dejo de partirse en dos lineas y BAJO de 39 a 33 px.
     Con 12 de relleno arriba y abajo sobre una linea de 21 px sale 45. */
  .caso__captura figcaption a { display: inline-block; padding: 12px 0; margin: -12px 0; }

  /* Era el texto mas pequeño de la web, 12,5 px, y va sobre una foto. */
  .dato-flotante--trayectoria span { font-size: 14px; }
  .senal__lista { grid-template-columns: 1fr; }
  .pie { padding-bottom: 110px; }
  .pie__cierre { grid-template-columns: 1fr; }
  .pie__acciones { justify-content: flex-start; }
  .pie__acciones .btn { flex: 1 1 auto; }
  .rejilla-3, .encaje, .contacto__rejilla, .sobre, .pie__rejilla { grid-template-columns: 1fr; }
  .dolor__cabeza, .dolor__lista { grid-template-columns: 1fr; }
  .dolor__cabeza { align-items: start; }
  .barra-movil { display: grid; }
  .sobre__foto { order: -1; max-width: 460px; }}

@media (max-width: 560px) {
  .cabecera__logo img { width: 124px; }
  .cabecera .btn--pequeno { padding: 14px 18px; font-size: 15px; }
  .hero__botones .btn { width: 100%; }
  .campo-doble { grid-template-columns: 1fr; gap: 0; }
  .dato-flotante { padding: 10px 14px 10px 12px; }
  .dato-flotante__cifra { font-size: 24px; }
  .dato-flotante__texto { font-size: 13px; }
  .caso__datos { grid-template-columns: 1fr 1fr; }
  .caso { padding: 22px; border-radius: 22px; }
  .caso__datos li { padding: 14px; }
  .caso__datos strong { font-size: 19px; }
  .dolor__lista li { padding: 24px 22px; }
  .partner img { width: 132px; }
  .opiniones__widget { min-height: 422px; }
  .versus__accion .btn { width: 100%; }
  .proceso__paso { padding-left: 72px; }
  .senal { padding: 28px 22px; }
  .senal__lista { gap: 22px; }
  .senal__lista li { padding: 0; gap: 14px; border: 0; background: none; }
  .senal__lista svg { width: 38px; height: 38px; padding: 8px; }
  .confianza { gap: 12px; }
  .confianza__sello { zoom: 0.82; }
  .confianza__partner img { height: 69px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logos__pista { animation: none; }
  .btn, .tarjeta, .barra-movil { transition: none; }
}

/* Lupa de las capturas: se abren sobre la pagina, sin abrir otra pestana */
.lupa { width: min(1080px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; color: var(--blanco); }
.lupa::backdrop { background: rgba(6, 9, 8, 0.88); }
.lupa__caja { position: relative; }
.lupa__img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--linea-oscura); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); background: var(--negro); }
.lupa__pie { margin: 14px 0 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--blanco); }
.lupa__cerrar { position: absolute; top: 10px; right: 10px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--oro); color: var(--negro); cursor: pointer; }
.lupa__cerrar svg { width: 22px; height: 22px; }
.lupa__cerrar:hover { background: var(--blanco); }

@media (max-width: 720px) {
}

@media (max-width: 720px) {
}

/* Consultor frente a agencia: dos columnas, con aire */
.duelo { position: relative; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1.05fr; grid-template-rows: repeat(6, auto); font-size: 16.5px; }
.duelo__resalte { position: absolute; inset: 0; grid-column: 3; grid-row: 1 / -1; border: 1px solid rgba(230, 185, 56, 0.4); border-radius: 22px; background: linear-gradient(180deg, rgba(230, 185, 56, 0.1), rgba(230, 185, 56, 0.02)); }
.duelo__cab, .duelo__q, .duelo__a, .duelo__yo { position: relative; padding: 26px 26px; line-height: 1.5; }
.duelo > .duelo__cab { display: flex; align-items: center; gap: 14px; padding: 26px 26px 22px; font-size: 17px; font-weight: 800; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; }
.duelo > .duelo__cab--yo { color: var(--blanco); }
.duelo__avatar { flex: none; border-radius: 50%; overflow: hidden; width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--oro); }
.duelo__avatar img { display: block; width: 122px; max-width: none; height: auto; margin: -14px 0 0 -45px; }
.duelo__q { font-weight: 700; color: var(--blanco); }
.duelo__a { color: rgba(255, 255, 255, 0.62); }
.duelo > .duelo__yo { color: var(--blanco); font-weight: 600; }
.duelo__yo svg { display: none; }
/* una sola linea por fila: borde en las tres celdas, sin sacar nada de su caja */
.duelo > .duelo__q, .duelo > .duelo__a, .duelo > .duelo__yo { border-top: 1px solid var(--linea-oscura); }
.duelo > .duelo__yo { border-top-color: rgba(230, 185, 56, 0.22); }
@media (max-width: 720px) {
  .duelo { grid-template-columns: 1fr; grid-template-rows: none; font-size: 15.5px; max-width: 460px; }
  .duelo__resalte, .duelo > .duelo__cab--vacia, .duelo > .duelo__cab { display: none; }
  .duelo__q::before { display: none; }
  .duelo > .duelo__q { padding: 26px 2px 10px; font-size: 17px; }
  .duelo > .duelo__a, .duelo > .duelo__yo { padding: 14px 16px; border-radius: 14px; }
  .duelo > .duelo__a { background: rgba(255, 255, 255, 0.04); }
  .duelo > .duelo__a::before { content: "Con una agencia"; display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
  .duelo > .duelo__yo { margin-top: 8px; background: rgba(230, 185, 56, 0.1); border: 1px solid rgba(230, 185, 56, 0.4); }
  .duelo > .duelo__yo::before { content: "Conmigo"; display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
}

/* ---- Giro tras los dolores: titular y buscador simulado ---- */
/* Buscador simulado. Dibujado con HTML y CSS: sin librerias, sin video, sin JS. */
.serp {
  width: min(100%, 470px);
  padding: clamp(30px, 4vw, 42px) clamp(22px, 3.4vw, 34px) clamp(34px, 4.6vw, 46px);
  border-radius: 26px; background: #fff;
  border: 1px solid var(--linea-clara); box-shadow: var(--sombra);
  font-family: Arial, Helvetica, system-ui, sans-serif; text-align: left;
}
.serp__marca { display: block; width: clamp(78px, 8vw, 96px); height: auto; margin: 0 auto clamp(22px, 3vw, 30px); }

.serp__barra { display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border: 1px solid #dfe1e5; border-radius: 999px; box-shadow: 0 1px 6px rgba(32,33,36,.10); }
.serp__consulta { flex: 1; min-width: 0; display: flex; align-items: center;
  font-size: clamp(14px, 1.2vw, 15.5px); color: #3c4043; line-height: 1.25; }
.serp__texto { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap;
  animation: serp-escribe 9s steps(38, end) infinite; }
.serp__cursor { flex: none; width: 1.5px; height: 17px; margin-left: 2px; background: #3c4043;
  animation: serp-parpadeo 1.05s step-end infinite; }
.serp__lupa { flex: none; width: 19px; height: 19px; color: #4285f4; }

.serp__anuncio { margin-top: clamp(40px, 6vw, 58px); animation: serp-aparece 9s ease infinite; }
.serp__meta { margin: 0 0 8px; font-size: 13.5px; color: #5f6368; line-height: 1.3; }
.serp__meta strong { color: #202124; font-weight: 700; margin-right: 8px; }
.serp__titulo { margin: 0 0 18px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; color: #1a73e8; font-weight: 400; }
.serp__lineas { display: grid; gap: 11px; }
.serp__lineas span { display: block; height: 11px; border-radius: 999px; background: #e8eaed; }
.serp__lineas span:nth-child(1) { width: 100%; }
.serp__lineas span:nth-child(2) { width: 86%; }
.serp__lineas span:nth-child(3) { width: 94%; }

@keyframes serp-escribe { 0% { max-width: 0; } 26% { max-width: 100%; } 92% { max-width: 100%; } 100% { max-width: 0; } }
@keyframes serp-parpadeo { 50% { opacity: 0; } }
@keyframes serp-aparece {
  0%, 30% { opacity: 0; transform: translateY(8px); }
  40%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .serp__texto { max-width: 100%; animation: none; }
  .serp__cursor { animation: none; }
  .serp__anuncio { opacity: 1; transform: none; animation: none; }
}

.giro { margin-top: clamp(72px, 10vw, 125px); display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(30px, 3.6vw, 44px); }
.giro__texto { display: grid; justify-items: center; text-align: center; gap: 0; max-width: 760px; }
/* Frase bisagra: corta la lectura entre los dolores y la solucion. El subrayado
   es el mismo recurso que .dolor__entrada strong, o sea el dorado de marca usado
   como marca y no como texto, que es donde si es legible sobre fondo claro.
   El nowrap existe para que ese subrayado no se parta nunca en dos lineas. */
.puente { margin: 0 0 26px; max-width: 24em; font-size: clamp(19px, 1.9vw, 25px);
          font-weight: 700; line-height: 1.35; color: var(--texto); }
.puente strong { font-weight: 800; white-space: nowrap;
                 background: linear-gradient(transparent 58%, rgba(230, 185, 56, 0.45) 58%); }
.giro__texto h3 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.025em; color: var(--negro); text-wrap: balance; }
.giro__sub { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--texto); max-width: 30em; }
.giro .serp { justify-self: center; }



/* Via ascendente del proceso. Solo escritorio: por debajo de 1025px se oculta el dibujo y
   se queda la linea vertical de siempre, que en movil funciona mejor. Las coordenadas de
   los pasos las calcula main.js sobre el trazado, asi que no hay ninguna posicion a ojo. */
.proceso__via { display: none; }

@media (min-width: 1025px) {
  .proceso--via { position: relative; display: block; margin-top: -54px; }
  .proceso__via { display: block; position: absolute; inset: 0 0 auto 0; width: 100%; height: 215px; overflow: visible; }

  /* la union de la version de cuatro columnas ya no pinta aqui */
  .proceso--via .proceso__paso:not(:last-child)::after { content: none; display: none; }

  /* POR DEFECTO TODO SE VE. Es main.js quien anade .va-a-animar para ocultarlo justo
     antes de animar, y .a-la-vista cuando la seccion entra en pantalla. Asi, si el
     JavaScript falla o no llega a ejecutarse, el visitante ve la seccion entera y
     nunca un hueco en blanco. La animacion arranca al llegar y no al cargar la pagina,
     porque esta seccion queda muy abajo. */
  .proceso--via .proceso__paso { position: absolute; padding: 0; }

  /* La linea NO se dibuja sola: esta ahi desde el primer momento y no se toca (Uri, 20/09).
     Lo unico que la recorre es un brillo muy sutil que se para en los cuatro pasos.

     No es otra linea encima: es el MISMO trazado, por debajo, del mismo dorado y desenfocado,
     asi que lo unico que se ve es el halo asomando alrededor. La version que iba por encima,
     blanca y mas gorda que la linea, "parecia un gusano".

     El trazado mide 1.054,5 unidades y sobresale por los dos extremos: 41 px antes del primer
     icono y 46 px despues del ultimo (Uri, 20/09). Los cuatro iconos caen en 76, 373, 673 y 973,
     medido sobre el propio trazado; si se vuelve a tocar la `d` hay que volver a medirlos, porque
     estos numeros dependen de ella.

     Punto SOLIDO del dorado de la via: un trazo de 2 unidades que con `stroke-linecap` redondo se
     pinta como un circulo de 15. Sin desenfoque ni halo. El hueco del dasharray (1055) tiene que
     ser mayor que el largo del trazado, o se veria mas de un punto a la vez.

     Las paradas van CENTRADAS en el icono a proposito: el icono lo tapa, asi que el punto se mete
     debajo y desaparece. Lo que se ve es el viaje. Desfase = 1 - posicion.

     Duracion 7,5 s y paradas de 0,5 s. Antes eran 11 s con paradas de 1,2 y **el 52 % de la
     animacion no tenia nada en pantalla**, porque el punto estaba escondido bajo un icono. La
     velocidad del viaje no cambia: sigue en unas 165 unidades por segundo. */
  .proceso__brillo { stroke-dasharray: 2 1055; stroke-dashoffset: -75; opacity: 0; }
  .proceso--via.va-a-animar.a-la-vista .proceso__brillo {
    animation: via-brilla 7.5s ease-in-out 1.2s forwards; }
  @keyframes via-brilla {
      0%   { stroke-dashoffset:  -75; opacity: 0; }
      3%   { stroke-dashoffset:  -75; opacity: 1; }
     10%   { stroke-dashoffset:  -75; opacity: 1; }
     34%   { stroke-dashoffset: -372; opacity: 1; }
     40%   { stroke-dashoffset: -372; opacity: 1; }
     64%   { stroke-dashoffset: -672; opacity: 1; }
     70%   { stroke-dashoffset: -672; opacity: 1; }
     94%   { stroke-dashoffset: -972; opacity: 1; }
    100%   { stroke-dashoffset: -972; opacity: 1; }
  }

  /* Las tarjetas NO se animan: estan fijas desde el principio (Uri, 20/09).
     Lo unico que se mueve en esta seccion es el brillo que recorre la via. */

  .proceso--via .proceso__icono { position: absolute; width: 54px; height: 54px; margin: 0;
    box-shadow: 0 0 0 8px var(--claro); }

  .proceso--via .proceso__cuando { display: inline-block; margin-bottom: 12px; padding: 6px 13px;
    background: var(--crema); border-radius: 999px; font-size: 13px; font-weight: 800;
    letter-spacing: .04em; text-transform: none; color: var(--texto); }
  .proceso--via .proceso__paso h3 { font-size: 20px; margin-bottom: 8px; }
  .proceso--via .proceso__paso p { font-size: 16px; line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  .proceso__linea { animation: none !important; stroke-dashoffset: 0 !important; }
  .proceso__brillo { animation: none !important; opacity: 0 !important; }
}