/*
 * Componentes: las piezas que se repiten en todo el sitio.
 * Valores en tokens.css · detalle en docs/design.json → componentes y docs/DISENO.md.
 *
 * Todos se adaptan solos al fondo (claro u oscuro) porque usan los valores
 * de contexto (--fondo, --texto, --regla…) y no colores fijos.
 *
 * Índice:
 *   1. Enlace          5. Medio (imagen/video)      9. Cabecera
 *   2. Botón           6. Tarjeta numerada          10. Pie
 *   3. Círculo «Ver reel»  7. Campos de formulario  11. Página de error
 *   4. Etiqueta        8. Selector de servicio
 */

/* ============================================================
   1. ENLACE — subrayado que se dibuja de izquierda a derecha
   ============================================================ */
.enlace {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--d-enlace) var(--curva-salida);
}

.enlace:focus-visible,
.enlace[aria-current="page"] {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .enlace:hover {
    background-size: 100% 1px;
  }
}

/* Enlace dentro de un párrafo: subrayado siempre visible (no se distingue sólo por color) */
.enlace--texto {
  background-size: 100% 1px;
}

@media (hover: hover) {
  .enlace--texto:hover {
    background-size: 100% 2px;
  }
}

/* Enlace suelto (menús, listas, pie): zona táctil de 44 px de alto.
   No se usa dentro de un párrafo, porque estiraría el interlineado. */
.enlace--toque {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* ============================================================
   2. BOTÓN (pill) — 48 px de alto, cumple el mínimo táctil de 44 px
   Por defecto toma los colores invertidos del fondo:
   sobre claro es negro con texto papel; sobre oscuro es papel con texto negro.
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alto-boton);
  padding: 0 1.75rem;
  border: 1px solid var(--texto);
  border-radius: var(--radio-pill);
  background-color: var(--texto);
  color: var(--fondo);
  font-family: inherit;
  font-size: var(--t-boton);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--t-boton-ls);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--d-enlace) var(--curva-salida),
    border-color var(--d-enlace) var(--curva-salida),
    color var(--d-enlace) var(--curva-salida),
    transform 120ms var(--curva-salida);
}

.boton--grande {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: 1.0625rem;
}

/* Secundario: borde fino y fondo transparente */
.boton--secundario {
  background-color: transparent;
  color: var(--texto);
  border-color: currentColor;
}

@media (hover: hover) {
  .boton:not(:disabled):not([aria-disabled="true"]):hover {
    background-color: var(--boton-hover);
    border-color: var(--boton-hover);
    color: var(--fondo);
  }

  /* Sobre oscuro el hover además subraya el texto */
  .oscuro .boton:not(:disabled):not([aria-disabled="true"]):hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* El secundario se rellena con el color del texto */
  .boton--secundario:not(:disabled):not([aria-disabled="true"]):hover {
    background-color: var(--texto);
    border-color: var(--texto);
    color: var(--fondo);
    text-decoration: none;
  }
}

.boton:active {
  transform: scale(0.98);
}

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mientras se envía el formulario */
.boton[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* ============================================================
   3. CÍRCULO «VER REEL» — crece un poco y se invierte en hover y foco
   La posición la define cada página (en la portada va a la derecha).
   ============================================================ */
.reel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, 7vw, 112px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radio-circulo);
  background-color: var(--papel);
  color: var(--negro);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-semibold);
  letter-spacing: var(--t-etiqueta-ls);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition:
    transform var(--d-circulo-reel) var(--curva-salida),
    background-color var(--d-circulo-reel) var(--curva-salida),
    color var(--d-circulo-reel) var(--curva-salida);
}

.reel:focus-visible {
  transform: scale(var(--escala-circulo-reel));
  background-color: var(--negro);
  color: var(--papel);
}

@media (hover: hover) {
  .reel:hover {
    transform: scale(var(--escala-circulo-reel));
    background-color: var(--negro);
    color: var(--papel);
  }
}

/* ============================================================
   4. ETIQUETA — números 01/02, «Concepto demostrativo», metadatos
   El texto se escribe normal en el HTML; las mayúsculas las pone el CSS.
   ============================================================ */
.etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-semibold);
  line-height: var(--t-etiqueta-lh);
  letter-spacing: var(--t-etiqueta-ls);
  text-transform: uppercase;
}

/* «Concepto demostrativo»: va FUERA del medio, debajo, en gris */
.etiqueta--demo {
  color: var(--texto-2);
}

/* ============================================================
   5. MEDIO — marco para imagen, video o demo dibujada por código
   Rectangular, sin sombras ni esquinas redondeadas. Reserva el espacio
   con aspect-ratio para que la página no salte al cargar.
   ============================================================ */
.medio {
  position: relative;
  overflow: hidden;
  background-color: var(--regla);
}

.medio--4x3  { aspect-ratio: 4 / 3; }
.medio--4x5  { aspect-ratio: 4 / 5; }
.medio--3x4  { aspect-ratio: 3 / 4; }
.medio--16x9 { aspect-ratio: 16 / 9; }

.medio > img,
.medio > picture,
.medio > picture img,
.medio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa para demos dibujadas con HTML: ocupa todo el marco */
.medio__interior {
  position: absolute;
  inset: 0;
}

/* Zoom suave dentro del marco (sólo medios que son un link) */
.medio--zoom > img,
.medio--zoom > picture,
.medio--zoom > video,
.medio--zoom > .medio__interior {
  transition: transform var(--d-medio-hover) var(--curva-salida);
}

@media (hover: hover) {
  .medio--zoom:hover > img,
  .medio--zoom:hover > picture,
  .medio--zoom:hover > video,
  .medio--zoom:hover > .medio__interior {
    transform: scale(var(--escala-medio-hover));
  }
}

/* ============================================================
   6. TARJETA NUMERADA — línea, número, medio, título, detalle
   ============================================================ */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

.tarjeta__cabecera {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--e-2);
  border-top: 1px solid var(--texto);
}

.tarjeta__titulo {
  font-size: var(--t-h3);
  font-weight: var(--peso-semibold);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
}

.tarjeta__meta {
  color: var(--texto-2);
}

/* ============================================================
   7. CAMPOS DE FORMULARIO — etiqueta siempre visible, error con ícono y texto
   ============================================================ */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  width: 100%; /* un campo ocupa todo su contenedor, también dentro de una .pila */
  min-width: 0;
}

.campo__etiqueta {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-semibold);
  line-height: var(--t-etiqueta-lh);
  letter-spacing: var(--t-etiqueta-ls);
  text-transform: uppercase;
}

/* Lo opcional se aclara sin gritar */
.campo__opcional {
  font-weight: var(--peso-regular);
  color: var(--texto-2);
}

.campo__entrada {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--borde-campo);
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  font-size: 1.0625rem; /* 17 px: evita el zoom automático en iPhone */
  line-height: 1.4;
  transition: border-color var(--d-enlace) var(--curva-salida);
  appearance: none;
}

textarea.campo__entrada {
  min-height: 8.75rem;
  resize: vertical;
}

.campo__entrada::placeholder {
  color: var(--texto-2);
  opacity: 1;
}

.campo__entrada:hover {
  border-color: var(--texto);
}

.campo__entrada:focus {
  border-color: var(--texto);
}

.campo__entrada:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.campo--error .campo__entrada {
  border-color: var(--error);
}

/* Mensaje de error: ícono + texto (nunca sólo color) */
.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  color: var(--error);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.campo__error::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  background-color: currentColor;
  -webkit-mask: var(--icono-error) center / contain no-repeat;
  mask: var(--icono-error) center / contain no-repeat;
  --icono-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6m0 3.5v.01'/%3E%3C/svg%3E");
}

/* Grupo de opciones (fieldset) */
.grupo {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo__titulo {
  display: block;
  margin-bottom: var(--e-3);
  padding: 0;
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-semibold);
  line-height: var(--t-etiqueta-lh);
  letter-spacing: var(--t-etiqueta-ls);
  text-transform: uppercase;
}

/* ============================================================
   8. SELECTOR DE SERVICIO — radios nativos con aspecto de pill
   El <input> cubre toda la pill: se puede tocar en todo su tamaño
   y funciona con teclado y lector de pantalla.
   ============================================================ */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.opcion {
  position: relative;
  display: inline-flex;
}

.opcion__entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion__texto {
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-boton);
  padding: 0 1.25rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-pill);
  font-size: var(--t-boton);
  font-weight: var(--peso-semibold);
  line-height: 1;
  transition:
    background-color var(--d-enlace) var(--curva-salida),
    border-color var(--d-enlace) var(--curva-salida),
    color var(--d-enlace) var(--curva-salida);
}

.opcion__entrada:hover + .opcion__texto {
  border-color: var(--texto);
}

.opcion__entrada:checked + .opcion__texto {
  background-color: var(--texto);
  border-color: var(--texto);
  color: var(--fondo);
}

.opcion__entrada:focus-visible + .opcion__texto {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* ============================================================
   9. CABECERA — logo, navegación y botón Explorar/Menú
   - Escritorio (1024+): logo · links · Explorar.   - Menos: logo · Menú.
   - 'claro': fondo papel, se queda arriba al bajar (sticky).
   - 'sobre-portada': transparente con texto claro, posada sobre la portada.
     Al bajar se queda en la portada: no flota sobre secciones claras.
   - .cabecera--fija: la agrega main.js al bajar en la Home (bloque 7).
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--alto-cabecera);
  background-color: var(--fondo);
  color: var(--texto);
  border-bottom: 1px solid var(--regla);
}

.cabecera--sobre-portada {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--papel);
  --foco: var(--papel);
}

.cabecera--fija {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--papel);
  border-bottom-color: var(--linea);
  color: var(--negro);
  --foco: var(--azul);
}

.cabecera__logo,
.pie__nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-size: 1.25rem;
  font-weight: var(--peso-extrabold);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.cabecera__logo img,
.pie__nombre img {
  width: 26px;
  height: 30px;
  object-fit: contain;
}

.cabecera__nav {
  display: none;
  align-items: center;
  gap: var(--e-6);
  font-size: 1rem;
}

.cabecera__explorar,
.cabecera__menu {
  align-items: center;
  gap: 0.625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--e-1);
  border: 0;
  background: none;
  font-size: 1rem;
}

.cabecera__explorar {
  display: none;
}

.cabecera__menu {
  display: inline-flex;
}

.cabecera__puntos {
  font-size: 1.375rem;
  letter-spacing: 2px;
  line-height: 1;
}

@media (min-width: 1024px) {
  .cabecera__nav { display: flex; }
  .cabecera__explorar { display: inline-flex; }
  .cabecera__menu { display: none; }
}

/* ============================================================
   10. PIE — marca, correo, redes, política y créditos
   Es un bloque oscuro (.oscuro en el HTML). Si va justo después de la sección
   de contacto, no repite el espacio de arriba.
   ============================================================ */
.pie {
  padding-block: var(--e-8) var(--e-7);
}

.seccion.oscuro + .pie {
  padding-block-start: 0;
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-6);
  padding-top: var(--e-6);
  border-top: 1px solid var(--regla);
}

.pie__marca {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.pie__subtitulo {
  color: var(--texto-2);
}

.pie__nav {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--e-1) var(--e-6);
}

.pie__creditos {
  max-width: none;
  margin-top: var(--e-6);
  color: var(--texto-2);
  font-size: 0.9375rem;
}

/* ============================================================
   11. PÁGINA DE ERROR (404)
   ============================================================ */
.pagina-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-5);
  min-height: 60vh;
  padding-block: var(--e-9);
}

.pagina-error nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-6);
}