/**
 * Imagine Solución — estilos del tema.
 * Todos los valores salen de tokens.css. Mobile-first.
 */

/* ==================== Base ==================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-papel);
  color: var(--color-tinta);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-ciruela-honda); text-underline-offset: 3px; }
a:hover { color: var(--color-ciruela); }

:focus-visible {
  outline: 3px solid var(--color-lavanda-honda);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { font-weight: 400; }

h1, .titular-display {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

h2, .titular-seccion {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
}

/* La palabra que importa: cursiva ciruela (gesto de la casa). */
h1 em, h2 em, .titular-display em, .titular-seccion em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-ciruela);
}

.lienzo {
  max-width: var(--ancho-lienzo);
  margin-inline: auto;
  padding-inline: var(--space-lateral);
}

.prosa { max-width: var(--ancho-prosa); color: var(--color-tinta-suave); }
.prosa strong { color: var(--color-tinta); font-weight: 600; }
.prosa + .prosa { margin-top: var(--space-md); }

.etiqueta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ciruela);
}
.etiqueta::after {
  content: '';
  flex: 0 0 42px;
  height: 1px;
  background: var(--color-ciruela);
  opacity: 0.4;
}

.micro { font-size: var(--text-micro); color: var(--color-tinta-suave); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-tinta);
  color: var(--color-blanco);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.saltar-contenido:focus { left: 0; color: var(--color-blanco); }

/* ==================== Botones ==================== */
.boton {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.96875rem;
  font-weight: 600;
  padding: 0.875rem 1.625rem;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}
.boton:hover { transform: translateY(-1px); }

.boton--primario { background: var(--color-ciruela); color: var(--color-blanco); }
.boton--primario:hover { background: var(--color-ciruela-honda); color: var(--color-blanco); }

.boton--secundario {
  background: transparent;
  color: var(--color-ciruela-honda);
  border: 1.5px solid var(--color-ciruela);
}
.boton--secundario:hover { background: var(--color-velo); }

.boton--terciario {
  background: transparent;
  color: var(--color-tinta);
  padding-inline: var(--space-2xs);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==================== Cabecera ==================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-papel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-bruma);
}
.cabecera__lienzo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
}
.cabecera .custom-logo-link { display: block; }
.cabecera .custom-logo { height: 56px; width: auto; }

.navegacion { display: flex; align-items: center; gap: var(--space-lg); }
.navegacion__lista {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}
.navegacion__lista a {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-tinta);
  text-decoration: none;
}
.navegacion__lista a:hover { color: var(--color-ciruela); }
.navegacion__lista .current-menu-item > a,
.navegacion__lista .current-menu-ancestor > a { color: var(--color-ciruela-honda); }
.navegacion .boton { font-size: var(--text-small); padding: 0.5625rem 1.125rem; }

.navegacion__interruptor {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-tinta);
}
.navegacion__interruptor svg { display: block; }

@media (max-width: 860px) {
  .navegacion__interruptor { display: block; }
  .navegacion__lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-papel);
    border-bottom: 1px solid var(--color-bruma);
    padding: var(--space-md) var(--space-lateral) var(--space-lg);
  }
  .navegacion__lista a { display: block; padding: var(--space-sm) 0; font-size: var(--text-body); }
  .navegacion[data-abierta] .navegacion__lista { display: flex; }
  .cabecera .boton--cabecera { display: none; }
}

/* ==================== El hilo ==================== */
.hilo svg { width: 100%; height: auto; display: block; }
.hilo--hero { margin-top: clamp(2.25rem, 6vh, 4.5rem); }
.hilo--divider { padding-block: var(--space-xs); opacity: 0.9; }
.hilo__punto--inicio { fill: var(--color-lavanda); }
.hilo__punto--fin { fill: var(--color-ciruela); }

@media (prefers-reduced-motion: no-preference) {
  .hilo--hero .hilo__trazo {
    stroke-dasharray: var(--hilo-largo);
    stroke-dashoffset: var(--hilo-largo);
    animation: imagine-dibujar var(--hilo-duracion) cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  }
  .hilo--hero .hilo__punto--fin { opacity: 0; animation: imagine-aparecer 0.6s ease 2.9s forwards; }
  .hilo--hero .hilo__punto--inicio { opacity: 0; animation: imagine-aparecer 0.6s ease 0.2s forwards; }
}
@keyframes imagine-dibujar { to { stroke-dashoffset: 0; } }
@keyframes imagine-aparecer { to { opacity: 1; } }

/* ==================== Secciones ==================== */
.seccion { padding-block-start: var(--space-seccion); }
.seccion:last-of-type { padding-block-end: var(--space-seccion); }
.seccion--arena { background: var(--color-arena); padding-block: var(--space-seccion); }
.seccion--velo { background: var(--color-velo); padding-block: var(--space-seccion); }
.seccion__titulo { margin: var(--space-lg) 0 var(--space-md); max-width: 22ch; }

/* ==================== Hero ==================== */
.hero { padding-block-start: clamp(3rem, 9vh, 6.5rem); }
.hero__titular { max-width: 16ch; margin-top: var(--space-lg); }
.hero__entrada {
  max-width: 52ch;
  margin-top: var(--space-xl);
  font-size: var(--text-lead);
  color: var(--color-tinta-suave);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.hero__micro { margin-top: var(--space-md); }

/* ==================== Puertas de entrada ==================== */
.puertas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}
.puerta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-papel);
  color: var(--color-tinta-suave);
  font-size: var(--text-micro);
  line-height: 1.5;
  text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion);
}
.puerta:hover { border-color: var(--color-ciruela); background: var(--color-blanco); }
.puerta__titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-tinta);
  margin-bottom: var(--space-2xs);
}
.puerta__cta {
  margin-top: auto;
  padding-top: var(--space-md);
  font-weight: 600;
  color: var(--color-ciruela);
  font-size: var(--text-micro);
}
@media (max-width: 860px) { .puertas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .puertas { grid-template-columns: 1fr; } }

/* ==================== Situaciones (¿qué necesitas resolver?) ==================== */
.situaciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}
.situacion {
  background: var(--color-blanco);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  font-size: var(--text-micro);
  color: var(--color-tinta-suave);
  text-decoration: none;
  transition: border-color var(--transicion), transform var(--transicion);
}
.situacion:hover { border-color: var(--color-ciruela); transform: translateY(-2px); }
.situacion__titulo {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-tinta);
  margin-bottom: var(--space-2xs);
}
@media (max-width: 860px) { .situaciones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .situaciones { grid-template-columns: 1fr; } }

/* ==================== Proceso (cómo funciona) ==================== */
.proceso {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xs);
  position: relative;
  margin-top: var(--space-2xl);
}
.proceso::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 6px;
  right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-lavanda), var(--color-ciruela));
}
.proceso__paso {
  position: relative;
  padding-top: var(--space-lg);
  font-size: var(--text-micro);
  line-height: 1.45;
  color: var(--color-tinta-suave);
}
.proceso__paso::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-lavanda);
}
.proceso__paso:nth-child(2)::before { background: #9BACDE; }
.proceso__paso:nth-child(3)::before { background: #8F9BD6; }
.proceso__paso:nth-child(4)::before { background: #8579B8; }
.proceso__paso:nth-child(5)::before { background: #7A63A3; }
.proceso__paso:nth-child(6)::before { background: var(--color-ciruela); }
.proceso__paso b {
  display: block;
  color: var(--color-tinta);
  font-size: var(--text-small);
  margin-bottom: 3px;
}
@media (max-width: 860px) {
  .proceso { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .proceso::before { display: none; }
}

/* ==================== CTA final ==================== */
.cierre {
  background: var(--color-tinta);
  color: #EDEAF1;
  border-radius: 18px;
  padding: clamp(2.25rem, 6vw, 4.5rem);
  margin-block: var(--space-seccion);
}
.cierre h2 { color: var(--color-blanco); max-width: 24ch; }
.cierre h2 em { color: var(--color-lavanda); }
.cierre p { color: #BDB7C6; max-width: 52ch; margin-top: var(--space-md); }
.cierre .boton { margin-top: var(--space-xl); }

/* ==================== Pie ==================== */
.pie {
  background: var(--color-tinta);
  color: #BDB7C6;
  font-size: var(--text-small);
}
.pie a { color: #EDEAF1; }
.pie a:hover { color: var(--color-lavanda); }
.pie__lienzo {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
}
.pie__marca img { height: 48px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.pie__marca p { margin-top: var(--space-md); max-width: 36ch; }
.pie h3 {
  color: var(--color-blanco);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.pie ul { list-style: none; }
.pie li { padding-block: var(--space-2xs); }
.pie__legal {
  border-top: 1px solid #4A4553;
  padding-block: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-micro);
}
.pie__legal ul { display: flex; gap: var(--space-lg); list-style: none; }
@media (max-width: 860px) { .pie__lienzo { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ==================== Entradas del blog ==================== */
.listado-entradas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.tarjeta-entrada {
  background: var(--color-blanco);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarjeta-entrada img { aspect-ratio: 3 / 2; object-fit: cover; }
.tarjeta-entrada__cuerpo { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.tarjeta-entrada__area { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ciruela); font-weight: 600; }
.tarjeta-entrada h2, .tarjeta-entrada h3 { font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.25; }
.tarjeta-entrada a { color: var(--color-tinta); text-decoration: none; }
.tarjeta-entrada a:hover { color: var(--color-ciruela-honda); }
@media (max-width: 860px) { .listado-entradas { grid-template-columns: 1fr; } }

/* Contenido de entrada individual */
.entrada-contenido { max-width: var(--ancho-prosa); margin-inline: auto; }
.entrada-contenido > * + * { margin-top: var(--space-md); }
.entrada-contenido h2 { margin-top: var(--space-xl); }
.entrada-contenido h3 { margin-top: var(--space-lg); }

/* ==================== Landings ==================== */
.landing__titular {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.6vw + 1rem, 3.875rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  margin-top: var(--space-lg);
}
.entrada-contenido--landing { margin-inline: 0; margin-top: var(--space-xl); }
.entrada-contenido--landing h2 {
  font-size: clamp(1.5rem, 1.8vw + 0.75rem, 2rem);
  margin-top: var(--space-2xl);
}
.destacado {
  font-size: var(--text-lead);
  color: var(--color-tinta);
  max-width: 56ch;
}
.entrada-contenido--landing ul { padding-left: 0; list-style: none; }
.entrada-contenido--landing ul li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-xs) 28px;
  border-bottom: 1px solid var(--color-arena);
  color: var(--color-tinta-suave);
}
.entrada-contenido--landing ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.05em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-lavanda);
}

/* FAQ accordion (details/summary) */
details.faq {
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-md);
  background: var(--color-blanco);
  margin-top: var(--space-sm);
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  color: var(--color-tinta);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ciruela);
  transition: transform var(--transicion);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq > p, details.faq > div {
  padding: 0 var(--space-lg) var(--space-md);
  color: var(--color-tinta-suave);
  max-width: 68ch;
}

/* ==================== Equipo ==================== */
.equipo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-2xl);
}
.profesional__enlace { text-decoration: none; color: inherit; display: block; }
.profesional__retrato {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  background: var(--color-arena);
}
.profesional__retrato--vacio {
  background: linear-gradient(135deg, var(--color-velo), var(--color-arena));
}
.profesional__nombre {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: var(--space-sm);
}
.profesional__enlace:hover .profesional__nombre { color: var(--color-ciruela-honda); }
.profesional__especialidad {
  font-size: var(--text-micro);
  color: var(--color-ciruela);
  font-weight: 600;
  margin-top: var(--space-2xs);
}
@media (max-width: 860px) { .equipo { grid-template-columns: repeat(2, 1fr); } }

.ficha {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--space-xl);
  align-items: start;
}
.ficha__retrato img { border-radius: var(--radius-lg); width: 100%; }
.ficha__especialidad {
  color: var(--color-ciruela);
  font-weight: 600;
  margin: var(--space-sm) 0 var(--space-lg);
}
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } }

.landing__imagen { margin-top: var(--space-xl); }
.landing__imagen img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ==================== Confianza (35 años) ==================== */
.confianza {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-2xl);
}
.confianza__item h3 { margin-bottom: var(--space-2xs); }
.confianza__item h3::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ciruela);
  margin-right: var(--space-sm);
}
.confianza__item p { font-size: var(--text-small); color: var(--color-tinta-suave); }
@media (max-width: 860px) { .confianza { grid-template-columns: 1fr; } }

/* Equipo sin fotos */
.profesional__marca {
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-lavanda), var(--color-ciruela));
  margin-bottom: var(--space-sm);
}
.profesional { border-top: 1px solid var(--color-bruma); padding-top: var(--space-md); }
.ficha--sin-retrato { grid-template-columns: 1fr; }

/* ==================== Recomendador ==================== */
.recomendador {
  margin-top: var(--space-2xl);
  background: var(--color-blanco);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 760px;
}
.recomendador__paso {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ciruela);
}
.recomendador__pregunta {
  margin-top: var(--space-sm);
  max-width: 26ch;
}
.recomendador__pregunta:focus { outline: none; }
.recomendador__opciones {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.recomendador__opcion {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.recomendador__opcion:hover {
  border-color: var(--color-ciruela);
  background: var(--color-blanco);
}
.recomendador__atras { margin-top: var(--space-lg); }
.recomendador__disclaimer { margin-top: var(--space-md); max-width: 52ch; }
.recomendador__reinicio { margin-top: var(--space-lg); }
.recomendador .hero__acciones { margin-top: var(--space-lg); }

/* ==================== Formulario ==================== */
.formulario {
  margin-top: var(--space-2xl);
  max-width: 720px;
  display: grid;
  gap: var(--space-lg);
}
.formulario fieldset { border: 0; }
.formulario legend {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.formulario__radios { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.formulario__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: var(--text-small);
  background: var(--color-blanco);
}
.formulario__radio:has(input:checked) {
  border-color: var(--color-ciruela);
  background: var(--color-velo);
}
.formulario__radio input { accent-color: var(--color-ciruela); }
.formulario__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.formulario__campo label {
  display: block;
  font-weight: 600;
  font-size: var(--text-small);
  margin-bottom: var(--space-2xs);
}
.formulario__campo input,
.formulario__campo select,
.formulario__campo textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-tinta);
  background: var(--color-blanco);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem;
}
.formulario__campo input:focus,
.formulario__campo select:focus,
.formulario__campo textarea:focus {
  outline: 3px solid var(--color-lavanda-honda);
  outline-offset: 1px;
  border-color: var(--color-ciruela);
}
.formulario__campo .micro { margin-top: var(--space-2xs); }
.formulario__consentimiento {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--text-small);
  color: var(--color-tinta-suave);
}
.formulario__consentimiento input { margin-top: 4px; accent-color: var(--color-ciruela); }
.formulario__hp { position: absolute; left: -9999px; }
@media (max-width: 640px) { .formulario__fila { grid-template-columns: 1fr; } }

.aviso {
  margin-top: var(--space-xl);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  max-width: 720px;
}
.aviso--exito { background: var(--color-velo); }
.aviso--exito h2 { font-size: var(--text-h3); font-family: var(--font-sans); font-weight: 600; }
.aviso--error { background: #F7E9E9; border: 1px solid var(--color-error); }
.aviso p { color: var(--color-tinta-suave); margin-top: var(--space-2xs); }

.contacto-datos { margin-top: var(--space-lg); }
.contacto-datos ul { list-style: none; margin-top: var(--space-sm); }
.contacto-datos li { padding-block: var(--space-2xs); }

/* ==================== Bandas home (recomendador, presencial) ==================== */
.banda-recomendador {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  background: var(--color-blanco);
  border: 1px solid var(--color-bruma);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 700px) { .banda-recomendador { grid-template-columns: 1fr; } }

.banda-presencial .hilo--divider { margin-top: var(--space-lg); }

/* ==================== Casos frecuentes ==================== */
.casos { list-style: none; margin-top: var(--space-2xl); max-width: 760px; }
.caso { border-bottom: 1px solid var(--color-bruma); }
.caso a,
.caso > .caso__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-2xs);
  text-decoration: none;
}
.caso__titulo {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.2vw + 0.75rem, 1.375rem);
  color: var(--color-tinta);
}
.caso__flecha { color: var(--color-ciruela); font-weight: 600; flex: 0 0 auto; }
.caso a:hover .caso__titulo { color: var(--color-ciruela-honda); }

/* ==================== FAQ home ==================== */
.faq-lista { margin-top: var(--space-2xl); max-width: 760px; }

/* Teaser equipo en home */
.equipo--teaser { margin-top: var(--space-xl); }