/* ==========================================================================
   Dogterra — Bonos de guardería
   Hoja propia de la página de compra. Hereda el sistema de la landing
   (public/dogterra/landing/landing.css): mismos tokens, mismas fuentes,
   mismo botón. Lo que cambia es el trabajo de la página: aquí no se capta,
   se cobra.

   Orden del archivo:
     1. Fuentes        5. Tarjetas de bono
     2. Tokens         6. Pasos
     3. Reset          7. Foto y FAQ
     4. Hero y sedes   8. Pie y utilidades
   ========================================================================== */

/* 1. FUENTES DE MARCA ------------------------------------------------------
   Mismos woff2 subsetados que la landing, servidos desde esta carpeta para
   que /bonos sea desplegable por su cuenta. 72 KB las cinco. */

@font-face {
  font-family: "Classical Condensed";
  src: url("assets/fonts/classical-condensed.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/overused-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/overused-book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/overused-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Overused Grotesk";
  src: url("assets/fonts/overused-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* 2. TOKENS ---------------------------------------------------------------- */

:root {
  --crema:        #ede8d5;
  --crema-honda:  #d7d2be;
  --naranja:      #ff5602;
  --terracota:    #963723;
  --cafe:         #50321e;
  --verde:        #00553c;
  --amarillo:     #f5b614;
  --blanco:       #fffdf7;

  --fondo:        var(--crema);
  --fondo-oscuro: var(--verde);
  --tinta:        var(--cafe);
  /* Al 68% (el valor que trae landing.css) este gris-café se queda en
     4.04:1 sobre el crema y no pasa AA, y lo usan doce reglas: la nota de
     sede, el €/día, los pasos, las respuestas del FAQ, los autores de las
     reseñas y la línea de pago. Al 80% sube a 5.54:1 y sigue leyéndose
     como texto secundario. */
  --tinta-suave:  color-mix(in oklab, var(--cafe) 80%, var(--crema));
  --tinta-clara:  #fffdf7;
  --tinta-clara-2: rgba(255, 253, 247, 0.78);

  /* El naranja de marca es DECORATIVO y nada más: ni #FF5602 ni el #F06123
     del logo llegan a 3:1, así que no sostienen texto ni el anillo de foco.
     Sobre él no va una sola palabra. */
  --acento:       var(--naranja);

  /* Donde el color tiene que leerse manda el verde de marca, que sí cumple
     de sobra (7.4:1 con el crema encima). Es además el color del botón
     "oscuro" que la landing ya usa, así que las dos páginas concuerdan.
     Esto esquiva la decisión abierta en landing.css sobre --acento-texto:
     esa sigue pendiente para los antetítulos de la landing, pero el botón
     de COMPRA no podía esperar a resolverla. */
  --accion:       var(--verde);
  --accion-hover: color-mix(in oklab, var(--verde) 84%, var(--cafe));

  --borde:        color-mix(in oklab, var(--cafe) 16%, transparent);
  --borde-fuerte: color-mix(in oklab, var(--cafe) 30%, transparent);

  --display: "Classical Condensed", "Oswald", "Arial Narrow", sans-serif;
  --texto:   "Overused Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  --t-hero:  clamp(2.75rem, 6.4vw, 4.75rem);
  --t-h2:    clamp(2.25rem, 5vw, 3.5rem);
  --t-h3:    clamp(1.35rem, 2.4vw, 1.8rem);
  --t-cifra: clamp(3rem, 6.4vw, 4.25rem);
  --t-lead:  clamp(1.05rem, 1.55vw, 1.25rem);
  --t-base:  clamp(0.975rem, 1.15vw, 1.0625rem);
  --t-mini:  0.8125rem;

  --e-1: 0.5rem;
  --e-2: 0.875rem;
  --e-3: 1.25rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --seccion: clamp(3.5rem, 8vw, 6.5rem);
  --ancho: 1120px;
  --canal: clamp(1.25rem, 5vw, 3rem);

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --r-pill: 999px;
  --sombra:      0 2px 4px rgba(80, 50, 30, 0.05), 0 12px 32px rgba(80, 50, 30, 0.09);
  --sombra-alta: 0 4px 8px rgba(80, 50, 30, 0.07), 0 22px 52px rgba(80, 50, 30, 0.16);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3. RESET ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Igual que en la landing: los <img> llevan width/height en el HTML para
   reservar hueco, y sin height:auto esos atributos deforman la imagen. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--accion);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.12; }
p  { margin: 0; text-wrap: pretty; }

/* 4. HERO Y SEDES ---------------------------------------------------------- */

.hero {
  background: var(--fondo-oscuro);
  color: var(--tinta-clara);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  /* La franja de las paredes de las instalaciones, abajo del todo. */
  border-bottom: 10px solid var(--acento);
  position: relative;
}

.hero__inner {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
  text-align: center;
}

/* Sin esto el logo sale a 968px de ancho: es el tamaño real del PNG. */
.hero__logo {
  width: clamp(150px, 20vw, 210px);
  height: auto;
  margin: 0 auto var(--e-4);
}

.antetitulo {
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Amarillo de marca: sobre el verde da 4.90:1, AA. El naranja no llega. */
  color: var(--amarillo);
  margin-bottom: var(--e-2);
}

.hero .lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--tinta-clara-2);
  max-width: 48ch;
  margin: var(--e-3) auto 0;
}

/* Dos segmented controls, sede y jornada. En móvil se apilan. */
.selectores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* Segmented control, no un par de radios sueltos. */
.sedes {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 253, 247, 0.12);
}

.sedes label {
  position: relative;
  cursor: pointer;
}

/* El radio sigue existiendo para el teclado y los lectores de pantalla;
   solo deja de verse. Por eso no usamos display:none. */
.sedes input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.sedes span {
  display: block;
  padding: 0.6em 1.6em;
  border-radius: var(--r-pill);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  color: var(--tinta-clara-2);
  transition: background 0.22s var(--curva), color 0.22s var(--curva);
}

.sedes input:checked + span {
  background: var(--blanco);
  color: var(--verde);
}

.sedes input:focus-visible + span {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
}

/* 5. TARJETAS DE BONO ------------------------------------------------------ */

.bonos {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--seccion) var(--canal) 0;
}

.bonos__nota {
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--e-4);
  min-height: 1.2em; /* reserva el hueco: el JS lo rellena y si no, no salta */
}

.bonos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e-3);
  align-items: stretch;
}

.bono {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-l);
  padding: var(--e-4) var(--e-3) var(--e-3);
  box-shadow: var(--sombra);
  transition: transform 0.22s var(--curva), box-shadow 0.22s var(--curva);
}

.bono:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}

/* El bono que queremos que compren. Se marca con el borde y la chapa, no
   agrandando la tarjeta: en móvil una tarjeta más alta solo estorba. */
.bono--destacado {
  border-color: var(--verde);
  border-width: 2px;
}

.bono__chapa {
  align-self: flex-start;
  background: var(--verde);
  color: var(--blanco);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  border-radius: var(--r-pill);
  margin-bottom: var(--e-2);
}

/* Hueco fantasma para que las tarjetas sin chapa alineen el nombre con la
   que sí la lleva. */
.bono__chapa--hueco {
  visibility: hidden;
}

.bono__nombre {
  font-family: var(--display);
  font-size: var(--t-h3);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--e-1);
}

.bono__precio {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--display);
  font-size: var(--t-cifra);
  line-height: 1;
  color: var(--verde);
  margin-block: var(--e-2) 0;
}

.bono__desde {
  font-family: var(--texto);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  align-self: center;
}

/* Cuando aún no hay tarifa. Sustituye a la cifra, no se añade. */
.bono__sinprecio {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.05;
  color: var(--tinta-suave);
  text-transform: uppercase;
  margin-block: var(--e-2) 0;
}

.bono__unitario {
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  margin-top: var(--e-1);
  min-height: 1.2em;
}

.bono__ahorro {
  display: inline-block;
  background: color-mix(in oklab, var(--amarillo) 26%, var(--blanco));
  color: var(--cafe);
  font-size: var(--t-mini);
  font-weight: 500;
  padding: 0.35em 0.75em;
  border-radius: var(--r-pill);
  margin-top: var(--e-2);
}

.bono__incluye {
  list-style: none;
  margin: var(--e-3) 0 var(--e-4);
  padding: 0;
  display: grid;
  gap: var(--e-2);
  font-size: var(--t-base);
  color: var(--tinta-suave);
}

.bono__incluye li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
  line-height: 1.45;
}

/* La marca de verificación va como SVG incrustado, no como archivo: son
   200 bytes y evitan una petición más.
   (Intenté dibujarla con dos linear-gradient girados y no funciona: un
   gradiente a 45 grados tiñe la caja entera, así que salen dos barritas
   rectas en vez de un tick. Para trazos hace falta un path de verdad.) */
.bono__incluye li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background-color: var(--verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fffdf7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
}

/* El botón se pega abajo para que todas las tarjetas lo alineen aunque
   tengan distinto número de líneas. */
.bono__cta {
  margin-top: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0.95em 1.7em;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--curva), background 0.22s var(--curva),
              color 0.22s var(--curva), box-shadow 0.22s var(--curva),
              border-color 0.22s var(--curva);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-comprar {
  background: var(--accion);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(0, 85, 60, 0.26);
}
.btn-comprar:hover {
  background: var(--accion-hover);
  box-shadow: 0 10px 26px rgba(0, 85, 60, 0.34);
}

/* Estado transitorio: el botón existe y dice "Comprar ahora", pero todavía
   no hay Payment Link al que mandarlo. Se pinta apagado y no responde al
   ratón. En cuanto los tres links estén en bonos.js esto no se ve nunca. */
.btn--apagado {
  /* Al 28% el texto blanco se quedaba en 2.30:1. Al 70%, 4.93:1 y pasa AA. */
  background: color-mix(in oklab, var(--verde) 70%, var(--crema-honda));
  color: var(--blanco);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--apagado:hover {
  transform: none;
  background: color-mix(in oklab, var(--verde) 70%, var(--crema-honda));
  box-shadow: none;
}

.bonos__suelto {
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--t-base);
  margin-top: var(--e-4);
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* 6. PASOS ----------------------------------------------------------------- */

.pasos {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--seccion) var(--canal);
  text-align: center;
}

.pasos h2 { margin-bottom: var(--e-5); }

.pasos ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-4);
  text-align: left;
}

.pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
  align-items: center;
}

.pasos__n {
  grid-row: 1 / 3;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--acento);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
}

.pasos h3 { align-self: end; }

.pasos p {
  color: var(--tinta-suave);
  line-height: 1.5;
}

/* 7. FOTO Y FAQ ------------------------------------------------------------ */

.foto {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.foto img {
  width: 100%;
  /* Sin recorte la foto mide varias pantallas de alto en escritorio. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--r-l);
}

.faq {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding: var(--seccion) var(--canal);
}

.faq h2 {
  text-align: center;
  margin-bottom: var(--e-5);
}

.faq details {
  border-bottom: 1.5px solid var(--borde);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  font-weight: 500;
  font-size: var(--t-lead);
  cursor: pointer;
  list-style: none;
}

/* El triángulo por defecto de Safari y Chrome. */
.faq summary::-webkit-details-marker { display: none; }

/* Signo + que gira a × al abrir. */
.faq summary::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--verde);
  transition: transform 0.25s var(--curva);
  flex-shrink: 0;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding-bottom: var(--e-3);
  color: var(--tinta-suave);
  line-height: 1.6;
  max-width: 62ch;
}

/* 8. PIE Y UTILIDADES ------------------------------------------------------ */

.pie {
  background: var(--fondo-oscuro);
  color: var(--tinta-clara);
  border-top: 10px solid var(--acento);
  padding-block: var(--e-5);
  text-align: center;
}

.pie__inner {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-base);
  color: var(--tinta-clara-2);
}

.pie__inner a {
  color: var(--tinta-clara);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 253, 247, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--curva);
}

.pie__inner a:hover { border-color: var(--blanco); }

.pie__legal {
  margin-top: var(--e-3);
  font-size: var(--t-mini);
  /* 0.55 dejaba el aviso legal en 3.78:1, por debajo de AA. */
  color: rgba(255, 253, 247, 0.72);
  padding-inline: var(--canal);
}

/* Visible para lectores de pantalla, invisible en pantalla. Sin esto los
   titulares ocultos del HTML se muestran como titulares normales. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 8b. CONFIANZA, RESEÑAS Y CIERRE -----------------------------------------
   Lo que convierte una tarifa en una página de compra. Quien llega aquí no
   duda del precio: duda de dejar a su perro con desconocidos. */

.hero__guia {
  margin: var(--e-3) auto 0;
  max-width: 46ch;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--tinta-clara-2);
  min-height: 2.6em; /* reserva el hueco: cambia al cambiar de jornada */
}

/* Barra de cifras, pegada bajo el hero. */
.trust {
  background: var(--blanco);
  border-bottom: 1.5px solid var(--borde);
}

.trust__lista {
  list-style: none;
  margin: 0 auto;
  padding: var(--e-3) var(--canal);
  max-width: var(--ancho);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-3);
  text-align: center;
}

.trust__lista li {
  display: grid;
  gap: 2px;
}

.trust__lista strong {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  color: var(--verde);
  font-weight: 700;
}

.trust__lista span {
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  letter-spacing: 0.04em;
}

/* Señales de pago, justo debajo de los botones. */
.pago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: var(--e-3);
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  text-align: center;
}

/* Candado dibujado como SVG incrustado, del mismo modo que el tick. */
.pago__candado {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7V5a3.5 3.5 0 017 0v2' fill='none' stroke='%2300553c' stroke-width='1.5' stroke-linecap='round'/%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6' fill='%2300553c'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Reseñas. Son reales y con nombre: por eso llevan cara y perro. */
.resenas {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--seccion) var(--canal) 0;
}

.resenas h2 {
  text-align: center;
  margin-bottom: var(--e-5);
}

/* Tres reseñas, tres columnas: así ninguna fila queda coja. Si algún día
   vuelven a ser cuatro, hay que pasar a minmax(min(100%, 420px), 1fr)
   para que se repartan 2x2 en vez de dejar una huérfana. */
.resenas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--e-3);
}

.resena {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-l);
  padding: var(--e-4) var(--e-3) var(--e-3);
  position: relative;
}

/* La comilla es del naranja decorativo: no lleva texto encima. */
.resena::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem;
  left: var(--e-3);
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--acento);
}

.resena blockquote {
  margin: 0;
  padding-top: var(--e-2);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--tinta);
  flex: 1;
}

.resena figcaption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-top: 1.5px solid var(--borde);
  padding-top: var(--e-2);
}

.resena figcaption img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.resena figcaption span {
  display: grid;
  font-size: var(--t-mini);
  color: var(--tinta-suave);
  line-height: 1.35;
}

.resena figcaption strong {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--tinta);
}

/* Cierre tras el FAQ: el segundo sitio donde se puede comprar. */
.cierre {
  background: var(--fondo-oscuro);
  color: var(--tinta-clara);
  border-top: 10px solid var(--acento);
  padding-block: var(--seccion);
  text-align: center;
}

.cierre__inner {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding-inline: var(--canal);
}

.cierre h2 { margin-bottom: var(--e-3); }

.cierre p {
  color: var(--tinta-clara-2);
  max-width: 46ch;
  margin-inline: auto;
}

.cierre__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.cierre__botones .btn { width: auto; }

/* Botón secundario sobre verde: contorno, sin relleno. */
.btn-linea {
  background: transparent;
  color: var(--tinta-clara);
  border-color: rgba(255, 253, 247, 0.55);
}
.btn-linea:hover {
  background: rgba(255, 253, 247, 0.12);
  border-color: var(--blanco);
}

/* El pie ya no necesita su propia franja: el cierre verde llega hasta él. */
.cierre + .pie,
.pie {
  border-top: 0;
}

/* 9. PÁGINA DE GRACIAS -----------------------------------------------------
   Post-compra. Fondo verde a pantalla completa: se ve de un vistazo que el
   pago ha ido bien, sin tener que leer nada. */

.pagina-gracias {
  background: var(--fondo-oscuro);
  color: var(--tinta-clara);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.gracias {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.gracias__inner {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding-inline: var(--canal);
  text-align: center;
}

.gracias__logo {
  width: clamp(140px, 18vw, 180px);
  margin: 0 auto var(--e-4);
}

/* Mismo tick que las tarjetas, en grande y con los colores al revés. */
.gracias__sello {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--e-3);
  border-radius: 50%;
  background-color: var(--amarillo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%2300553c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 62%;
  background-position: center;
  background-repeat: no-repeat;
}

.gracias h1 { margin-bottom: var(--e-3); }

.gracias .lead {
  font-size: var(--t-lead);
  font-weight: 300;
  color: var(--tinta-clara-2);
  max-width: 44ch;
  margin-inline: auto;
}

.gracias__pasos {
  list-style: none;
  margin: var(--e-5) 0 var(--e-4);
  padding: var(--e-4) var(--e-3);
  display: grid;
  gap: var(--e-4);
  text-align: left;
  background: rgba(255, 253, 247, 0.08);
  border-radius: var(--r-l);
}

.gracias__pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}

.gracias__n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--acento);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
}

.gracias__pasos h2 {
  font-size: var(--t-h3);
  margin-bottom: 0.25rem;
}

.gracias__pasos p {
  color: var(--tinta-clara-2);
  line-height: 1.5;
}

.gracias__prisa {
  color: var(--tinta-clara-2);
  margin-bottom: var(--e-2);
}

.gracias__cta .btn { width: auto; }

/* Botón claro sobre el verde: el inverso del de compra. */
.btn-claro {
  background: var(--blanco);
  color: var(--verde);
}
.btn-claro:hover {
  background: var(--crema);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.gracias__volver {
  margin-top: var(--e-4);
  font-size: var(--t-mini);
}

.gracias__volver a {
  color: var(--tinta-clara-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 253, 247, 0.35);
  padding-bottom: 2px;
}

.gracias__volver a:hover { color: var(--blanco); }

/* En esta página el pie ya está sobre verde: sobra el bloque de color y la
   franja naranja de arriba. */
.pagina-gracias .pie {
  background: transparent;
  border-top: 0;
  padding-block: var(--e-4);
}