/* ==========================================================================
   ZAMA MOBILITY — Componentes reutilizables
   Convención BEM: .bloque__elemento--modificador
   ========================================================================== */

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  min-height: 3rem;                 /* objetivo táctil >= 48px */
  border: 2px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-sm);
  font-weight: var(--peso-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-rapida), background-color var(--t-rapida),
              border-color var(--t-rapida), color var(--t-rapida), box-shadow var(--t-rapida);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; flex-shrink: 0; }

/* Primario: naranja institucional con texto azul profundo → contraste 5.3:1 */
.btn--primario {
  background: var(--naranja-500);
  color: var(--azul-900);
  box-shadow: var(--sombra-acento);
}
.btn--primario:hover {
  background: var(--naranja-400);
  color: var(--azul-900);
  box-shadow: 0 10px 30px rgba(255,107,53,.38);
  transform: translateY(-2px);
}

.btn--secundario {
  background: var(--azul-600);
  color: #FFFFFF;
}
.btn--secundario:hover { background: var(--azul-500); color: #FFFFFF; transform: translateY(-2px); }

.btn--contorno {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.btn--contorno:hover { border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); }

.btn--contorno-claro {
  background: transparent;
  border-color: rgba(238,244,248,.42);
  color: var(--lino-100);
}
.btn--contorno-claro:hover { border-color: var(--naranja-500); color: var(--naranja-400); background: rgba(255,107,53,.1); }

.btn--whatsapp { background: #25D366; color: #072D16; }
.btn--whatsapp:hover { background: #3DE07A; color: #072D16; transform: translateY(-2px); }

.btn--pequeno { padding: .6rem 1.15rem; min-height: 2.5rem; font-size: var(--txt-xs); }
.btn--bloque { width: 100%; }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: var(--peso-bold); font-size: var(--txt-sm);
  color: var(--acento-texto); text-decoration: none;
  text-transform: uppercase; letter-spacing: .05em;
}
.enlace-flecha svg { width: .95rem; height: .95rem; fill: currentColor; transition: transform var(--t-rapida); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* ==========================================================================
   ETIQUETAS Y DISTINTIVOS
   ========================================================================== */
.etiqueta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .8rem;
  border-radius: var(--r-full);
  font-size: var(--txt-xs);
  font-weight: var(--peso-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--acento-suave);
  color: var(--acento-texto);
  border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent);
}
.etiqueta--azul { background: color-mix(in srgb, var(--azul-600) 12%, transparent); color: var(--azul-600); border-color: color-mix(in srgb, var(--azul-600) 30%, transparent); }
.etiqueta--claro { background: rgba(255,107,53,.16); color: var(--naranja-400); border-color: rgba(255,107,53,.4); }
.etiqueta--neutra { background: var(--superficie-alt); color: var(--texto-suave); border-color: var(--borde); }

/* ==========================================================================
   TARJETAS
   ========================================================================== */
.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.tarjeta p { color: var(--texto-suave); }
.tarjeta__pie { margin-top: auto; padding-top: var(--e-4); }

.tarjeta--enlace:hover,
.tarjeta--enlace:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--sombra-3);
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
}
/* Toda la tarjeta clicable manteniendo un solo enlace accesible */
.tarjeta__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.tarjeta--acento { border-top: 4px solid var(--acento); }
.tarjeta--destacada {
  background: linear-gradient(160deg, var(--azul-800), var(--azul-900));
  border-color: transparent; color: var(--lino-100);
}
.tarjeta--destacada h3, .tarjeta--destacada h4 { color: #FFFFFF; }
.tarjeta--destacada p, .tarjeta--destacada li { color: #C6D6E8; }

.tarjeta__icono {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-md);
  background: var(--acento-suave);
  color: var(--acento-texto);
  margin-bottom: var(--e-2);
}
.tarjeta__icono svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta--destacada .tarjeta__icono { background: rgba(255,107,53,.18); color: var(--naranja-400); }

/* Tarjeta de servicio con numeración */
.tarjeta__numero {
  position: absolute; top: var(--e-5); right: var(--e-5);
  font-family: var(--fuente-titulo);
  font-size: var(--txt-2xl); font-weight: var(--peso-black);
  color: var(--borde-suave); line-height: 1;
}

/* ==========================================================================
   LISTA DE VERIFICACIÓN
   ========================================================================== */
.lista-check { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.lista-check li {
  position: relative; padding-left: 1.9rem;
  color: var(--texto-suave);
}
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.1rem; height: 1.1rem;
  border-radius: var(--r-full);
  background: var(--acento-suave);
  border: 1.5px solid var(--acento);
}
.lista-check li::after {
  content: ""; position: absolute; left: .34rem; top: .72em;
  width: .38rem; height: .2rem;
  border-left: 2px solid var(--acento-texto);
  border-bottom: 2px solid var(--acento-texto);
  transform: rotate(-45deg);
}
.seccion--oscura .lista-check li,
.tarjeta--destacada .lista-check li { color: #C6D6E8; }
.seccion--oscura .lista-check li::after,
.tarjeta--destacada .lista-check li::after { border-color: var(--naranja-400); }

/* ==========================================================================
   PASOS DE PROCESO
   ========================================================================== */
.pasos { list-style: none; padding: 0; display: grid; gap: var(--e-5); counter-reset: paso; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
.pasos li { counter-increment: paso; position: relative; padding-top: var(--e-6); }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--txt-xl); font-weight: var(--peso-black);
  color: var(--acento);
}
.pasos li::after {
  content: ""; position: absolute; top: 1.05rem; left: 2.6rem; right: 0;
  height: 2px; background: var(--borde);
}
@media (max-width: 759px) { .pasos li::after { display: none; } }
.pasos li:last-child::after { display: none; }
.pasos h3 { font-size: var(--txt-base); margin-bottom: var(--e-2); text-transform: uppercase; letter-spacing: .04em; }
.pasos p { font-size: var(--txt-sm); color: var(--texto-suave); }
.seccion--oscura .pasos li::after { background: rgba(238,244,248,.18); }

/* ==========================================================================
   ACORDEÓN (FAQ) — nativo <details>
   ========================================================================== */
.acordeon { display: grid; gap: var(--e-3); max-width: 56rem; }
.acordeon__item {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.acordeon__item[open] { border-color: color-mix(in srgb, var(--acento) 45%, transparent); box-shadow: var(--sombra-1); }
.acordeon__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  font-weight: var(--peso-semibold);
  cursor: pointer;
  list-style: none;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
.acordeon__item summary::after {
  content: ""; flex-shrink: 0;
  width: .62rem; height: .62rem;
  border-right: 2.2px solid var(--acento);
  border-bottom: 2.2px solid var(--acento);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-rapida);
}
.acordeon__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.acordeon__cuerpo { padding: 0 var(--e-5) var(--e-5); color: var(--texto-suave); }
.acordeon__cuerpo > * + * { margin-top: var(--e-3); }

/* ==========================================================================
   TABLAS
   ========================================================================== */
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde-suave); border-radius: var(--r-md); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); min-width: 34rem; }
.tabla th, .tabla td { padding: var(--e-4); text-align: left; border-bottom: 1px solid var(--borde-suave); }
.tabla thead th {
  background: var(--superficie-alt);
  font-size: var(--txt-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-suave);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--acento-suave); }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.formulario { display: grid; gap: var(--e-5); }
.campo { display: grid; gap: var(--e-2); }
.campo > label {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semibold);
  color: var(--texto);
}
.campo__req { color: var(--acento-texto); }
.campo__ayuda { font-size: var(--txt-xs); color: var(--texto-tenue); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  min-height: 3rem;
  background: var(--superficie);
  color: var(--texto);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  font-size: var(--txt-base);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida), background-color var(--t-rapida);
}
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.campo select { appearance: none; cursor: pointer; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235E7087' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .7rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo[data-error="si"] input,
.campo[data-error="si"] select,
.campo[data-error="si"] textarea { border-color: var(--error); }
.campo__error { font-size: var(--txt-xs); color: var(--error); font-weight: var(--peso-semibold); }
.campo__error:empty { display: none; }

.campo--fila { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .campo--fila { grid-template-columns: 1fr 1fr; } }

.casilla { display: flex; gap: var(--e-3); align-items: flex-start; }
.casilla input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; min-height: 0; /* WCAG 2.5.8: objetivo >= 24px */
  margin-top: .12rem; flex-shrink: 0;
  accent-color: var(--naranja-500); cursor: pointer;
}
.casilla label { font-size: var(--txt-sm); color: var(--texto-suave); line-height: 1.6; }

.formulario__estado {
  padding: var(--e-4);
  border-radius: var(--r-md);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semibold);
  border: 1px solid;
}
.formulario__estado:empty { display: none; }
.formulario__estado[data-tipo="ok"] { background: color-mix(in srgb, var(--exito) 12%, transparent); border-color: var(--exito); color: var(--exito); }
.formulario__estado[data-tipo="error"] { background: color-mix(in srgb, var(--error) 10%, transparent); border-color: var(--error); color: var(--error); }

/* ==========================================================================
   BLOQUE DE CONTACTO / DATOS
   ========================================================================== */
.dato-contacto { display: flex; gap: var(--e-4); align-items: flex-start; }
.dato-contacto__icono {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--r-md);
  background: var(--acento-suave); color: var(--acento-texto);
}
.dato-contacto__icono svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dato-contacto strong { display: block; font-size: var(--txt-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-tenue); }
.dato-contacto a, .dato-contacto p { font-size: var(--txt-lg); font-weight: var(--peso-semibold); color: var(--texto); text-decoration: none; }
.dato-contacto a:hover { color: var(--acento-texto); }
.seccion--oscura .dato-contacto__icono { background: rgba(255,107,53,.16); color: var(--naranja-400); }
.seccion--oscura .dato-contacto a, .seccion--oscura .dato-contacto p { color: #FFFFFF; }

/* ==========================================================================
   BANDA CTA
   ========================================================================== */
.cta-banda {
  display: grid; gap: var(--e-6);
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 92% 8%, rgba(255,107,53,.24), transparent 55%),
    linear-gradient(150deg, var(--azul-700), var(--azul-900));
  color: var(--lino-100);
  box-shadow: var(--sombra-3);
}
@media (min-width: 900px) { .cta-banda { grid-template-columns: 1.4fr auto; } }
.cta-banda h2 { color: #FFFFFF; }
.cta-banda p { color: #C6D6E8; margin-top: var(--e-3); max-width: 52ch; }
.cta-banda__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ==========================================================================
   AVISO / NOTA
   ========================================================================== */
.nota {
  display: flex; gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-md);
  border-left: 4px solid var(--acento);
  background: var(--superficie-alt);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  line-height: 1.65;
}
.nota strong { color: var(--texto); }
.nota--azul { border-left-color: var(--azul-500); }
.seccion--oscura .nota { background: rgba(238,244,248,.06); color: #C6D6E8; }
.seccion--oscura .nota strong { color: #FFFFFF; }

/* ==========================================================================
   BLOQUE ALIADO (Surestia)
   ========================================================================== */
.aliado {
  display: grid; gap: var(--e-5);
  padding: var(--e-6);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-lg);
  background: var(--superficie);
}
.aliado__sello {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--fuente-titulo); font-weight: var(--peso-black);
  font-size: var(--txt-xl); letter-spacing: .02em; color: var(--azul-600);
  text-transform: uppercase;
}
.aliado__sello span { font-size: var(--txt-xs); font-weight: var(--peso-regular);
  letter-spacing: var(--kerning-wide); text-transform: uppercase; color: var(--texto-tenue); display: block; }
.seccion--oscura .aliado { background: rgba(238,244,248,.05); border-color: rgba(238,244,248,.24); }
.seccion--oscura .aliado__sello { color: #FFFFFF; }

/* ==========================================================================
   CONMUTADOR DE TEMA
   ========================================================================== */
.tema-toggle {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida), background-color var(--t-rapida);
}
.tema-toggle:hover { border-color: var(--acento); color: var(--acento-texto); background: var(--acento-suave); }
.tema-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.tema-toggle__luna { display: none; }
[data-tema="oscuro"] .tema-toggle__sol { display: none; }
[data-tema="oscuro"] .tema-toggle__luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-toggle__sol { display: none; }
  :root:not([data-tema="claro"]) .tema-toggle__luna { display: block; }
}

/* ==========================================================================
   MEDIA / MARCOS DE IMAGEN
   ========================================================================== */
.marco {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--azul-700), var(--azul-900));
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  box-shadow: var(--sombra-2);
}
.marco img { width: 100%; height: 100%; object-fit: cover; }
.marco--logo { padding: clamp(1.5rem, 5vw, 3.5rem); }
.marco--logo img { width: 74%; height: auto; object-fit: contain; }
.marco__leyenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--e-5);
  background: linear-gradient(transparent, rgba(7,23,41,.9));
  color: var(--lino-100); font-size: var(--txt-sm);
}
/* Marcador para foto pendiente de producción */
.marco--pendiente::before {
  content: "Imagen de catálogo pendiente";
  position: absolute; z-index: 2;
  padding: .4rem .9rem;
  border: 1px dashed rgba(238,244,248,.45);
  border-radius: var(--r-full);
  font-size: var(--txt-xs); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(238,244,248,.75);
}

/* ==========================================================================
   ANIMACIÓN DE ENTRADA
   ========================================================================== */
/* Sin JavaScript el contenido SIEMPRE es visible: la clase .js la añade el
   script inline del <head> antes del primer pintado. Nunca se oculta contenido
   detrás de una animación que podría no ejecutarse. */
.js .revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-lenta), transform var(--t-lenta);
}
.js .revelar[data-visible="si"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.centrado { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mt-7 { margin-top: var(--e-7); }
.mt-8 { margin-top: var(--e-8); }
.texto-suave { color: var(--texto-suave); }
.texto-kerning { letter-spacing: var(--kerning-wide); text-transform: uppercase; font-weight: var(--peso-light); }
.sin-lista { list-style: none; padding: 0; }
.flex-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }