/* ===========================================================
   Nubo — hoja de estilos
   Tokens tomados de ui/theme/Color.kt (via manual de marca v1)
   Tema claro únicamente. La app fuerza tema claro a propósito.
   =========================================================== */

:root {
  /* Paleta */
  --coral:          #FF6B4A;
  --coral-suave:    #FFEAD0;
  --coral-profundo: #C0492E;
  --crema:          #FFF3E4;
  --fondo:          #FFFDF9;
  --tinta:          #201B2E;
  --muted:          #9A8B7C;
  --outline:        #EDE7DC;
  --sol:            #FFC83A;
  --cielo:          #3E9BFF;
  --menta:          #2FCF9E;

  /* Texto de cuerpo: tinta aclarada, se mantiene cálido */
  --texto:          #3D3947;
  --menta-oscura:   #1E9E76;

  /* Radios — 14 / 20 / 28, nada de esquinas vivas */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto-fuente: 'Hanken Grotesk', system-ui, sans-serif;

  --ancho: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto-fuente);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

a { color: var(--coral); }
a:hover { color: var(--coral-profundo); }

img, svg { max-width: 100%; }

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.seccion { padding: 96px 0; }
.seccion--crema { background: var(--crema); }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 14px;
}

.titulo-seccion {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  margin: 0 0 16px;
}

.entradilla {
  font-size: 18px;
  color: var(--texto);
  max-width: 560px;
}

.centrado { text-align: center; }
.centrado .entradilla { margin-left: auto; margin-right: auto; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--texto-fuente);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.boton--principal {
  background: var(--coral);
  color: var(--crema);
  box-shadow: 0 14px 30px -12px rgba(255, 107, 74, 0.65);
}
.boton--principal:hover {
  color: var(--crema);
  background: #F45E3D;
  transform: translateY(-2px);
}

.boton--secundario {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--outline);
}
.boton--secundario:hover {
  color: var(--tinta);
  border-color: var(--coral);
}

.boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.boton[aria-disabled="true"]:hover { transform: none; background: var(--coral); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--outline);
}

.nav__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}
.marca:hover { color: var(--tinta); }

.marca__disco {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.marca__nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.nav__enlaces {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__enlaces a {
  text-decoration: none;
  color: var(--texto);
  font-weight: 600;
  font-size: 15px;
}
.nav__enlaces a:hover { color: var(--coral); }

.nav__enlaces .boton { padding: 11px 20px; font-size: 15px; }
.nav__enlaces .boton:hover { color: var(--crema); }

/* ---------- Héroe ---------- */

.heroe {
  position: relative;
  padding: 76px 0 96px;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--crema) 0%, rgba(255, 243, 228, 0) 72%);
  overflow: hidden;
}

/* Auras de color: dan profundidad sin recurrir a un fondo oscuro. */
.heroe__aura {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.heroe__aura--coral {
  width: 620px; height: 620px;
  right: -12%; top: -18%;
  background: radial-gradient(circle, rgba(255, 107, 74, 0.16) 0%, rgba(255, 107, 74, 0) 70%);
}
.heroe__aura--cielo {
  width: 540px; height: 540px;
  left: -14%; top: 22%;
  background: radial-gradient(circle, rgba(62, 155, 255, 0.13) 0%, rgba(62, 155, 255, 0) 70%);
}

.heroe__interior {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.heroe__texto {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.heroe__titulo {
  font-size: clamp(40px, 6.8vw, 70px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 20px;
}

.heroe__entradilla {
  font-size: 19px;
  color: var(--texto);
  max-width: 520px;
  margin: 0 auto 32px;
}

.heroe__acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* ---------- Composición del héroe ---------- */

.composicion {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 72px auto 0;
  display: flex;
  justify-content: center;
}

.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fondo);
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 11px 20px 11px 11px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--tinta);
  white-space: nowrap;
  box-shadow: 0 18px 36px -18px rgba(32, 27, 46, 0.35);
  animation: nuboFloat 6s ease-in-out infinite;
  z-index: 2;
}

.chip__icono {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.chip--1 { left: 0;    top: 54px;     animation-duration: 5.5s; }
.chip--2 { right: 8px; top: 10px;     animation-duration: 6.5s; animation-delay: .8s; }
.chip--3 { left: 18px; bottom: 96px;  animation-duration: 6s;   animation-delay: 1.4s; }
.chip--4 { right: 0;   bottom: 150px; animation-duration: 5.8s; animation-delay: .4s; }

@keyframes nuboFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--coral-suave);
  color: var(--coral-profundo);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.insignia__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}

.heroe__nota {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 18px;
}

/* ---------- Teléfono ---------- */

.telefono {
  position: relative;
  z-index: 1;
  width: 300px;
  flex: none;
  background: var(--tinta);
  border-radius: 40px;
  padding: 9px;
  box-shadow: 0 50px 90px -30px rgba(32, 27, 46, 0.5);
}

.telefono__pantalla {
  background: var(--fondo);
  border-radius: 32px;
  overflow: hidden;
  padding: 20px 16px 22px;
}

.telefono__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.telefono__saludo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
}

/* Cursor parpadeante del efecto de tecleo en el saludo */
.cursor-anim {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--coral);
  animation: cursorParpadeo 1s step-end infinite;
}

@keyframes cursorParpadeo {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-anim { animation: none; opacity: 1; }
}

.aviso {
  background: var(--coral);
  border-radius: var(--r-md);
  padding: 13px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 16px;
}

.aviso__icono {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 243, 228, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.aviso__texto {
  color: var(--crema);
  font-size: 12.5px;
  line-height: 1.4;
}

.lista-pagos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pago {
  background: var(--crema);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.pago__icono {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pago__cuerpo { flex: 1; min-width: 0; }

.pago__nombre {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
}

.pago__cuando {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.pago__monto {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--coral);
  white-space: nowrap;
}

.pago__monto--pendiente {
  color: var(--muted);
  font-size: 11.5px;
}

/* ---------- Problema ---------- */

.problema {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.problema__titulo {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  margin: 0 0 20px;
}

.problema__texto {
  font-size: 19px;
  color: var(--texto);
}

.problema__remate {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--coral);
  margin-top: 28px;
}

/* ---------- Rejilla de funciones ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: 30px;
}

.seccion--crema .tarjeta { background: var(--fondo); }

.tarjeta__icono {
  width: 50px;
  height: 50px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.tarjeta__titulo {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
}

.tarjeta__texto {
  font-size: 15px;
  color: var(--texto);
  line-height: 1.55;
}

/* ---------- Privacidad ---------- */

.privacidad {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: center;
}

.privacidad__disco {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--coral-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.privacidad__lista {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacidad__lista li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  color: var(--texto);
}

.privacidad__lista svg { flex: none; margin-top: 4px; }

.matiz {
  background: var(--crema);
  border-left: 3px solid var(--sol);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 18px 22px;
  margin-top: 28px;
  font-size: 15.5px;
  color: var(--texto);
  line-height: 1.55;
}

.matiz strong { color: var(--tinta); }

/* ---------- Precios ---------- */

.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
  align-items: start;
}

.plan {
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: 34px;
  background: var(--fondo);
}

.plan--pro {
  border: 2px solid var(--coral);
  position: relative;
  box-shadow: 0 24px 50px -28px rgba(255, 107, 74, 0.5);
}

.plan__etiqueta {
  position: absolute;
  top: -13px;
  left: 34px;
  background: var(--coral);
  color: var(--crema);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}

.plan__nombre {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}

.plan__pitch {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 22px;
}

.plan__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__periodo {
  font-family: var(--texto-fuente);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

.plan__anual {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--texto);
}

.ahorro {
  background: #DDF6EC;
  color: var(--menta-oscura);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: 999px;
}

.plan__lista {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plan__lista li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--texto);
}

.plan__lista svg { flex: none; margin-top: 4px; }

.plan__nota {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--outline);
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Cierre ---------- */

.cierre {
  background: var(--coral);
  border-radius: var(--r-lg);
  padding: 72px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cierre__titulo {
  font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 800;
  color: var(--crema);
  margin: 0 0 14px;
  position: relative;
}

.cierre__texto {
  color: #FFE7D8;
  font-size: 17px;
  margin: 0 0 30px;
  position: relative;
}

.cierre .boton {
  background: var(--tinta);
  color: var(--crema);
  position: relative;
  box-shadow: none;
}
.cierre .boton:hover { background: #12101C; color: var(--crema); }

/* Badge oficial de Google Play. Google exige respetar sus proporciones y
   un margen libre alrededor: no lo recortes ni le cambies los colores. */
.boton-badge {
  display: inline-block;
  position: relative;
  padding: 6px;
  line-height: 0;
  transition: transform 0.15s ease;
}
.boton-badge:hover { transform: translateY(-2px); }
.boton-badge img { height: 62px; width: auto; display: block; }

.cierre__burbuja {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 243, 228, 0.13);
}
.cierre__burbuja--a { width: 260px; height: 260px; top: -90px; left: -70px; }
.cierre__burbuja--b { width: 180px; height: 180px; bottom: -70px; right: -40px; }

/* ---------- Pie ---------- */

.pie {
  border-top: 1px solid var(--outline);
  padding: 56px 0 40px;
  margin-top: 96px;
}

.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.pie__lema {
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 14px;
  max-width: 280px;
}

.pie__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 14px;
}

.pie__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie__lista a {
  color: var(--texto);
  text-decoration: none;
  font-size: 14.5px;
}
.pie__lista a:hover { color: var(--coral); }

.pie__legal {
  max-width: var(--ancho);
  margin: 44px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--outline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* Aviso oficial del Libro de Reclamaciones */
.libro {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1.5px solid var(--outline);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  text-decoration: none;
  color: var(--texto);
  background: var(--fondo);
}
.libro:hover { border-color: var(--coral); color: var(--texto); }

.libro__texto {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.libro__texto span {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---------- Páginas de texto (legales) ---------- */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

.doc__cabecera { margin-bottom: 44px; }

.doc__titulo {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 800;
  margin: 0 0 12px;
}

.doc__fecha {
  font-size: 14px;
  color: var(--muted);
}

.doc__resumen {
  background: var(--crema);
  border-radius: var(--r-md);
  padding: 24px 28px;
  margin-bottom: 40px;
  font-size: 16.5px;
  color: var(--texto);
}

.doc h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 44px 0 14px;
  scroll-margin-top: 90px;
}

.doc h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.doc p { margin: 0 0 14px; color: var(--texto); font-size: 16.5px; }

.doc ul { margin: 0 0 16px; padding-left: 22px; color: var(--texto); font-size: 16.5px; }
.doc li { margin-bottom: 8px; }

.doc strong { color: var(--tinta); }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15.5px;
}

.doc th, .doc td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--outline);
  color: var(--texto);
  vertical-align: top;
}

.doc th {
  font-weight: 700;
  color: var(--tinta);
  background: var(--crema);
}

.doc thead tr:first-child th:first-child { border-radius: var(--r-sm) 0 0 0; }
.doc thead tr:first-child th:last-child { border-radius: 0 var(--r-sm) 0 0; }

.tabla-scroll { overflow-x: auto; }

.aviso-caja {
  background: var(--coral-suave);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--texto);
}

/* ---------- Formulario ---------- */

.campo { margin-bottom: 16px; }

.campo__etiqueta {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.campo__control {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--outline);
  background: var(--fondo);
  font-family: var(--texto-fuente);
  font-size: 15.5px;
  color: var(--tinta);
  outline: none;
  transition: border-color 0.15s ease;
}

.campo__control:focus { border-color: var(--coral); }

textarea.campo__control { resize: vertical; line-height: 1.55; min-height: 96px; }

.pareja {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bloque {
  background: var(--fondo);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  padding: 26px;
  margin-bottom: 20px;
}

.bloque__titulo {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 20px;
}

.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.opcion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--outline);
  background: var(--fondo);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opcion:hover { border-color: var(--coral-suave); }

.opcion__cabeza {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15.5px;
}

.opcion__desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  padding-left: 25px;
}

.opcion input { accent-color: var(--coral); width: 16px; height: 16px; }

.opcion:has(input:checked) {
  border-color: var(--coral);
  background: var(--coral-suave);
}

.radios {
  display: flex;
  gap: 22px;
  align-items: center;
}

.radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  cursor: pointer;
  color: var(--texto);
}

.radios input { accent-color: var(--coral); }

.consentimiento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--crema);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-bottom: 20px;
  font-size: 14.5px;
  color: var(--texto);
  line-height: 1.55;
  cursor: pointer;
}

.consentimiento input {
  accent-color: var(--coral);
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex: none;
}

/* Confirmación de reclamo enviado */
.exito {
  background: var(--fondo);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: 48px 36px;
  text-align: center;
}

.exito__icono {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #DDF6EC;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.exito__titulo {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 8px;
}

.exito__texto {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 26px;
}

.exito__codigo {
  background: var(--crema);
  border-radius: var(--r-md);
  padding: 20px 26px;
  margin-bottom: 26px;
}

.exito__codigo-etq {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.exito__codigo-val {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  color: var(--coral);
  letter-spacing: 0.02em;
}

.exito__nota {
  font-size: 14.5px;
  color: var(--texto);
  line-height: 1.55;
  max-width: 420px;
  margin: 0 auto 28px;
}

/* ---------- Responsive ---------- */

/* Por debajo de 1040px los chips se solaparían con el teléfono: dejan de
   flotar y pasan a una rejilla centrada debajo. */
@media (max-width: 1040px) {
  .composicion {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 56px;
  }
  .chips {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 560px;
  }
  .chip {
    position: static;
    animation: none;
    box-shadow: none;
    font-size: 13.5px;
    padding: 9px 16px 9px 9px;
  }
  .chip__icono { width: 24px; height: 24px; }
}

@media (max-width: 900px) {
  .privacidad { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .privacidad__lista li { text-align: left; }
  .privacidad .entradilla { margin-left: auto; margin-right: auto; }
  .pie__interior { grid-template-columns: 1fr 1fr; }
  .pie__lema { max-width: none; }
}

@media (max-width: 720px) {
  .nav__enlaces a:not(.boton) { display: none; }
  .seccion { padding: 64px 0; }
  .heroe { padding: 48px 0 64px; }
  .pareja, .opciones { grid-template-columns: 1fr; }
  .cierre { padding: 56px 24px; border-radius: var(--r-md); }
  .pie__interior { grid-template-columns: 1fr; gap: 32px; }
  .pie__legal { flex-direction: column; align-items: flex-start; }
}

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