/* ============================================================
   AM 540 LU17 - Beneficio socios CAMAD
   Vanilla CSS, sin build. Toda la identidad visual sale de los
   tokens del :root de abajo: no hay un solo color suelto en el
   resto del archivo (fuera de #fff y del cartel de aviso ambar,
   que es de desarrollo y a proposito NO es de marca).
   ============================================================ */

:root {
  /* ---- Marca LU17 ----------------------------------------
     Sacados del logo real (lu17.com/static/_7/custom/logo.png,
     leyendo los pixeles) y de las custom properties del sitio.

     OJO con el rojo: el sitio usa #ff0000 en los tags de categoria
     de las noticias, y ese NO pasa contraste (4.00 sobre blanco,
     hace falta 4.5). El del logo, #df1b2b, da 4.85. Va el del logo. */

  --marca:        #df1b2b;  /* rojo del logo -> rellenos y botones */
  --marca-texto:  #d81a2a;  /* 3% mas oscuro: como TEXTO pasa AA
                               tambien sobre el gris (4.70 vs 4.45) */
  --marca-oscura: #b31522;  /* hover */
  --marca-tenue:  rgba(223, 27, 43, .18);   /* halo de foco */

  --tinta:        #1f1f1f;  /* = --font-color del sitio     (16.48) */
  --tinta-suave:  #545454;  /* = --font-color-alt del sitio  (7.57) */

  /* Dos grises de linea, y la diferencia NO es capricho:
     · --linea: separadores decorativos, o bordes donde el cambio de
       fondo ya marca el limite.
     · --linea-campo: donde el borde es el UNICO indicador (inputs,
       boton secundario). WCAG 1.4.11 pide 3:1 para bordes de
       controles, y el #dbdbdb del sitio da 1.38. */
  --linea:        #dbdbdb;  /* = --bg-color-alt del sitio */
  --linea-campo:  #8a8a8a;  /* 3.45 sobre blanco, 3.17 sobre el gris */

  --fondo:        #ffffff;
  --fondo-suave:  #f5f5f5;

  /* Verde y rojo semanticos, no de marca: "verificado" y "error"
     se leen por convencion universal, no por identidad visual. */
  --ok:           #0f7a52;
  --error:        #b3151f;
  --error-fondo:  #fdecec;

  --radio:       10px;
  --radio-chico: 6px;
  --ancho-max:   40rem;

  /* Tipografia. Roboto para lo que se LEE, Condensed para lo que se MIRA.
     Condensed rinde en tamanio grande; a 14px solo te cuesta legibilidad.

     Los fallbacks NO son decorativos: si Google Fonts esta lento o
     bloqueado, la pagina se ve con estos. Arial Narrow es lo mas parecido
     a Condensed que hay instalado en cualquier maquina. */
  --fuente-texto:  'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-titulo: 'Roboto Condensed', 'Arial Narrow', 'Roboto', system-ui, sans-serif;
}

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

body {
  margin: 0;
  /* Transparente a proposito: el iframe adopta el fondo de lu17.com */
  background: transparent;
  color: var(--tinta);
  font: 400 16px/1.55 var(--fuente-texto);
  -webkit-text-size-adjust: 100%;
}

.widget {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  background: var(--fondo);
  border-radius: var(--radio);
}

/* --- Encabezado: LA17 y CAMAD ------------------------------------
   "Del mismo tamano" se iguala por AREA, no por alto: LA17 es horizontal
   (2,552:1) y CAMAD apilado (1,188:1). A igual alto, CAMAD ocuparia menos
   de la mitad de superficie y se veria chico al lado del otro.
     alto CAMAD = alto LA17 x raiz(2,552 / 1,188) = alto LA17 x 1,466
   El factor lo imprime tools/preparar-logos.py: si cambia un logo, se
   recalcula ahi y se actualiza aca. */
.cabecera {
  --alto-logo: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linea);
}
.cabecera__logo { display: block; width: auto; }
.cabecera__logo--la17  { height: var(--alto-logo); }
.cabecera__logo--camad { height: calc(var(--alto-logo) * 1.466); }

/* --- Indicador de pasos ---------------------------------- */
.pasos {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.pasos__item {
  flex: 1;
  padding-top: .5rem;
  border-top: 3px solid var(--linea);
  color: var(--tinta-suave);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pasos__item.is-activo { border-top-color: var(--marca); color: var(--marca-texto); }
.pasos__item.is-hecho  { border-top-color: var(--ok);    color: var(--ok); }

/* --- Cabecera del paso ----------------------------------- */
.paso--centrado { text-align: center; }

.badge {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.titulo {
  margin: 0 0 .5rem;
  font-family: var(--fuente-titulo);
  /* Condensed entra mas texto por linea, asi que aguanta un cuerpo
     mayor que el que soportaba la fuente de sistema. */
  font-size: clamp(1.625rem, 5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.bajada {
  margin: 0 0 1.25rem;
  color: var(--tinta-suave);
  font-size: 1.0625rem;
}

.beneficios {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.beneficios li {
  position: relative;
  padding-left: 1.625rem;
  font-size: .9375rem;
}
.beneficios li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

/* --- Bloques --------------------------------------------- */
.bloque {
  margin: 0 0 1rem;
  padding: 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-suave);
}

.bloque__titulo {
  margin: 0 0 .375rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}
.bloque__ayuda {
  margin: 0 0 1rem;
  color: var(--tinta-suave);
  font-size: .875rem;
}

fieldset.bloque legend { padding: 0 .375rem; }

/* --- Campos ---------------------------------------------- */
.campo { margin-bottom: .875rem; }
.campo:last-of-type { margin-bottom: 0; }

.campo__label {
  display: block;
  margin-bottom: .3125rem;
  font-size: .875rem;
  font-weight: 600;
}
.campo__opcional { color: var(--tinta-suave); font-weight: 400; }

.campo__pista {
  margin: .3125rem 0 0;
  color: var(--tinta-suave);
  font-size: .8125rem;
}

.campo__input {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--linea-campo);
  border-radius: var(--radio-chico);
  background: #fff;
  color: inherit;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.campo__input:focus-visible {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tenue);
}
.campo__input[aria-invalid="true"] { border-color: var(--error); }
textarea.campo__input { resize: vertical; min-height: 4.5rem; }

/* Honeypot: fuera de pantalla, NO display:none (los bots lo detectan) */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Botones y enlaces ----------------------------------- */
.btn {
  display: inline-block;
  width: 100%;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
.btn--primario { background: var(--marca); color: #fff; }
.btn--primario:hover:not(:disabled) { background: var(--marca-oscura); }
.btn--secundario { background: #fff; border-color: var(--linea-campo); color: var(--tinta); }
.btn--secundario:hover { background: var(--fondo-suave); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.acciones { display: flex; gap: .625rem; }
.acciones .btn--secundario { flex: 0 0 8rem; }

/* Quedo un solo enlace (la rama del externo), asi que no hace falta flex. */
.salidas { margin: 1rem 0; }
.enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--marca-texto);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace:hover { color: var(--marca-oscura); }

/* --- Pie ------------------------------------------------------
   Enlaces que NO son parte del embudo: gris, chicos y al final. Si
   fueran rojos como el CTA competirian con "Verificar y continuar".
   El subrayado se mantiene: un link del mismo color que el texto sin
   subrayado no se distingue como link (WCAG 1.4.1). */
.pie {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  text-align: center;
}
.pie .enlace {
  color: var(--tinta-suave);
  font-size: .8125rem;
  font-weight: 400;
}
.pie .enlace:hover { color: var(--tinta); }

/* Texto solo para lectores de pantalla. Avisa que el enlace abre otra
   pestana (WCAG G201) sin ensuciar la interfaz. No confundir con
   .trampa: el honeypot NO se tiene que leer, esto SI. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Socio verificado ------------------------------------ */
.socio-ok {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--ok);
  border-radius: var(--radio-chico);
  background: var(--fondo-suave);
}
.socio-ok__saludo {
  margin: 0;
  color: var(--ok);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.socio-ok__nombre {
  margin: .125rem 0 0;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
.socio-ok__meta   { margin: .125rem 0 0; color: var(--tinta-suave); font-size: .875rem; }
.socio-ok__ids    { margin: .25rem 0 0;  color: var(--tinta-suave); font-size: .8125rem; }

/* --- Resumen del producto y el precio -------------------- */
.resumen {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-suave);
}
.resumen__producto {
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linea);
}
.resumen__producto-nombre {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}
.resumen__producto-detalle {
  margin: .1875rem 0 0;
  color: var(--tinta-suave);
  font-size: .875rem;
}

.resumen__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .25rem 0;
  font-size: .9375rem;
}
.resumen__fila--descuento { color: var(--ok); font-weight: 600; }
.resumen__fila--total {
  margin-top: .5rem;
  padding-top: .625rem;
  border-top: 1px solid var(--linea);
  font-family: var(--fuente-titulo);
  font-size: 1.4375rem;
  font-weight: 800;
}
.resumen__tachado { color: var(--tinta-suave); text-decoration: line-through; }
.resumen__nota { margin: .5rem 0 0; color: var(--tinta-suave); font-size: .75rem; }

/* --- Estados --------------------------------------------- */
.error {
  margin: 0 0 1rem;
  padding: .625rem .75rem;
  border-radius: var(--radio-chico);
  background: var(--error-fondo);
  color: var(--error);
  font-size: .875rem;
  font-weight: 600;
}

.tilde {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto .5rem;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 2rem;
  line-height: 3.5rem;
}

.aviso-mock {
  margin: 1.5rem 0 0;
  padding: .625rem .75rem;
  border: 1px dashed #d4a017;
  border-radius: var(--radio-chico);
  background: #fffaeb;
  color: #7a5a00;
  font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}