/* ─────────────────────────────────────────────────────────────────────────────────────────
   servicio.css — estilos comunes de las páginas de servicio que comparten el motor de
   `template-parts/servicio/seccion.php`.

   Hereda la gramática visual de /spanish-tutor (bandas alternas crema/blanco, titulares
   extra-bold en navy, un solo CTA coral por pantalla) sin copiar sus 911 líneas: aquí solo
   están las clases `sv-*` del motor. El framework pone tokens, botones, chips y acordeón.

   Nada de `boton--linea` ni de otras clases que vivan en el CSS de otra página: ese fallo
   ya se pagó dos veces (/pricing y /contact).
   ───────────────────────────────────────────────────────────────────────────────────────── */

.servicio {
  --sv-ancho: 1240px;
  --sv-lateral: 72px;
}

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

/* Bandas: por defecto crema claro, y `sv--calido` / `sv--blanco` alternan para que dos
   bloques seguidos no se fundan en una sola mancha. */
.sv-texto,
.sv-escena,
.sv-tarjetas,
.sv-dato { background: var(--c-crema); }

.sv--calido { background: var(--c-crema-calida); }
.sv--blanco { background: var(--c-blanco); }

.sv-h2 {
  margin: 0 0 var(--e-4);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.sv-p {
  margin: 0 0 var(--e-3);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--c-navy);
  max-width: 62ch;
}

.sv-p:last-child { margin-bottom: 0; }
.sv-p a { color: var(--c-acento); }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────── */

.sv-hero { background: var(--c-crema-calida); }

.sv-hero__inner { padding-block: 64px 72px; }

.sv-hero__inner--cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
}

.sv-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); }

.sv-hero__titular {
  margin: 0;
  max-width: 20ch;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.sv-hero__entrada { margin: 0; max-width: 62ch; font-size: var(--t-lead); color: var(--c-navy); }
.sv-hero__remate { margin: 0; max-width: 62ch; font-size: var(--t-cuerpo); color: var(--c-pizarra); }

.sv-hero__cta {
  margin-top: var(--e-2);
  border-radius: var(--r-pill);
  padding: 16px 32px;
}

.sv-hero__chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.sv-hero__media,
.sv-escena__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.sv-hero__media img,
.sv-escena__media img,
.sv-media__video {
  display: block;
  width: 100%;
  height: auto;
  /* La proporción la fija cada sección con `--sv-ratio`; 4:3 es solo el valor por defecto,
     el de las fotos del proyecto. Un gráfico 16:9 metido en un hueco 4:3 se recorta por los
     lados y pierde justo el titular. */
  aspect-ratio: var(--sv-ratio, 4 / 3);
  object-fit: cover;
  /* Sesgo hacia arriba: con una foto vertical en una caja apaisada el recorte se llevaba la
     cabeza (visto en /spanish-exams/ap-spanish/, revisión visual del 04-sep). */
  object-position: center 25%;
}

.sv-escena__pie {
  margin: var(--e-3) 0 0;
  font-size: var(--t-muletilla);
  color: var(--c-pizarra);
}

/* El pie va fuera del marco redondeado, así que la figura no puede recortarlo. */
.sv-escena__media { overflow: visible; }
.sv-escena__media img,
.sv-escena__media .sv-media__video { border-radius: var(--r-xl); }

/* ── Texto y escena ───────────────────────────────────────────────────────────────────── */

.sv-texto__inner,
.sv-escena__inner,
.sv-tarjetas__inner,
.sv-dato__inner { padding-block: 72px; }

.sv-escena__inner--cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────────────────────── */

.sv-tarjetas__intro { margin-bottom: var(--e-6); }

.sv-tarjetas__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Sin `--sv-cols` reparte solo; con él, la sección manda —para que cinco tarjetas caigan
     3+2 y no 4+1, que parece que la última sobra—. */
  grid-template-columns: repeat(var(--sv-cols, auto-fit), minmax(260px, 1fr));
  gap: var(--e-4);
}

.sv-tarjeta {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--sombra-m);
}

.sv-tarjeta__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-h5);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.sv-tarjeta__texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* Tarjeta que es un enlace entero: área de toque grande y una sola diana por tarjeta. */
.sv-tarjeta--enlace { padding: 0; }

.sv-tarjeta__enlace {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-5);
  text-decoration: none;
  border-radius: var(--r-lg);
  transition: transform 0.2s ease;
}

.sv-tarjeta--enlace:hover { border-color: var(--c-acento); }
.sv-tarjeta__enlace:hover { transform: translateY(-2px); }

.sv-tarjeta__cta {
  margin-top: auto;
  padding-top: var(--e-2);
  font-size: var(--t-tarjeta);
  font-weight: 700;
  color: var(--c-acento);
}

/* ── Pasos ────────────────────────────────────────────────────────────────────────────── */

.sv-pasos__inner { padding-block: 72px; }
.sv-pasos__intro { margin-bottom: var(--e-6); }

.sv-pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* La línea va arriba de cada paso, como en B2 de la home, y no debajo del último. */
.sv-paso {
  display: flex;
  gap: var(--e-5);
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--c-borde);
}

.sv-paso__numero {
  flex: 0 0 60px;
  font-size: var(--t-h3);
  font-weight: var(--peso-extra);
  color: var(--c-acento);
  line-height: 1.1;
}

.sv-paso__cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sv-paso__titulo { font-size: var(--t-h5); font-weight: 700; color: var(--c-navy); }
.sv-paso__texto { font-size: var(--t-cuerpo); line-height: 1.6; color: var(--c-pizarra); }
.sv-paso__texto a { color: var(--c-acento); }

/* ── Dato ─────────────────────────────────────────────────────────────────────────────── */

.sv-dato__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
}

.sv-dato__ficha {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra-m);
  text-align: center;
}

.sv-dato__cifra {
  margin: 0 0 var(--e-2);
  font-size: var(--t-precio);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
  line-height: 1.1;
}

.sv-dato__pie { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── Precio ───────────────────────────────────────────────────────────────────────────── */

.sv-precio { background: var(--c-crema-calida); }
.sv-precio__inner { padding-block: 72px; }

/* La única pieza saturada del bloque es la franja del $1, como en /pricing: el precio se
   informa, la oferta es lo que salta. */
.sv-precio__oferta {
  display: inline-block;
  margin: var(--e-4) 0 0;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--c-acento);
  color: var(--c-blanco);
  font-weight: 700;
}

.sv-precio__enlace { margin: var(--e-4) 0 0; font-size: var(--t-tarjeta); font-weight: 700; }
.sv-precio__enlace a { color: var(--c-acento); }

/* ── Cierre ───────────────────────────────────────────────────────────────────────────── */

.sv-cierre { background: var(--c-navy); }
.sv-cierre__inner { padding-block: 80px; }

.sv-cierre__inner--cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--e-8);
  align-items: center;
}

.sv-cierre__titular {
  margin: 0 0 var(--e-4);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-blanco);
}

.sv-cierre__texto { margin: 0 0 var(--e-4); font-size: var(--t-lead); color: var(--c-texto-navy); max-width: 56ch; }

.sv-cierre__cta { border-radius: var(--r-pill); padding: 16px 32px; }

.sv-cierre__foto { margin: 0; border-radius: var(--r-xl); overflow: hidden; }
.sv-cierre__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ── Tabla ────────────────────────────────────────────────────────────────────────────── */

.sv-tabla__inner { padding-block: 72px; }

/* El marco permite que la tabla haga scroll horizontal en pantallas estrechas sin que la
   página entera se desplace, que es el fallo clásico de una tabla en móvil. */
.sv-tabla__marco {
  margin-top: var(--e-5);
  overflow-x: auto;
  border: 1px solid var(--c-borde-calido);
  border-radius: var(--r-lg);
  background: var(--c-blanco);
}

.sv-tabla__tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-cuerpo);
}

.sv-tabla__tabla thead th {
  text-align: left;
  padding: 14px 22px;
  background: var(--c-banda-tablas);
  color: var(--c-navy);
  font-size: var(--t-muletilla);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sv-tabla__tabla td {
  padding: 14px 22px;
  border-top: 1px solid var(--c-borde);
  color: var(--c-navy);
  vertical-align: top;
}

/* La columna en español manda visualmente: es la que el visitante viene a llevarse. */
.sv-tabla__tabla td:first-child,
.sv-tabla__tabla tbody th:first-child { font-weight: 700; }
.sv-tabla__tabla tbody th { text-align: left; padding: 14px 22px; border-top: 1px solid var(--c-borde); color: var(--c-navy); vertical-align: top; background: transparent; }
.sv-tabla__tabla td:last-child { color: var(--c-pizarra); }
.sv-tabla__tabla tbody tr:nth-child(even) { background: var(--c-zebra); }

.sv-tabla__cierre { margin-top: var(--e-5); }

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────── */

.sv-faq { background: var(--c-crema); }
.sv-faq__inner { padding-block: 72px; max-width: 1000px; }

/* ── Tablet ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .servicio { --sv-lateral: var(--e-6); }

  .sv-hero__inner--cols,
  .sv-escena__inner--cols,
  .sv-dato__inner,
  .sv-cierre__inner--cols { grid-template-columns: 1fr; gap: var(--e-6); }
}

/* ── Móvil ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .servicio { --sv-lateral: 20px; }

  .sv-hero__inner { padding-block: 32px 40px; }

  .sv-texto__inner,
  .sv-escena__inner,
  .sv-tarjetas__inner,
  .sv-dato__inner,
  .sv-precio__inner,
  .sv-faq__inner { padding-block: 44px; }

  .sv-cierre__inner { padding-block: 52px; }

  /* En el pulgar, la cara antes que el muro de texto — el mismo orden que la home. */
  .sv-hero__inner--cols .sv-hero__media { order: -1; }

  .sv-hero__cta,
  .sv-cierre__cta { width: 100%; text-align: center; }

  /* Las tarjetas apilan en una columna. Con `--sv-cols` fijo (2 o 3) la rejilla no cabía en
     390 px y la segunda tarjeta salía cortada por el borde sin scroll — lo vio la revisión
     visual del 04-sep en 15 páginas, incluida /spanish-exams, donde dejaba inaccesibles los
     enlaces a dos de los cuatro exámenes. */
  .sv-tarjetas__grid { grid-template-columns: 1fr; }
}