/* ============================================================
   componentes.css — botones, tarjetas, campos, píldoras.
   Piezas reutilizables. Lo específico de cada sección va en
   secciones.css.
   ============================================================ */

/* ---------- Botones -----------------------------------------
   REGLA DEL CORAL (sección 4.1): .boton--primario es el único
   elemento coral de la página y aparece exactamente tres veces:
     1. "Cotizar ahora"      — header
     2. "Pedir presupuesto"  — hero
     3. "Enviar consulta"    — formulario
   No usar coral en ningún otro lado, por ningún motivo.
   ----------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-block-size: 44px; /* objetivo táctil mínimo (sección 7) */
  padding: var(--e-3) var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--radio-pildora);
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.boton--primario {
  background: var(--coral);
  color: var(--tinta);
}

/* Sin movimiento en el hover, solo cambio de color (sección 8.3) */
.boton--primario:hover {
  background: var(--coral-alto);
  color: var(--tinta);
}

.boton--secundario {
  background: transparent;
  border-color: var(--tinta-borde);
  color: var(--papel);
}

.boton--secundario:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.boton--grande {
  min-block-size: 52px;
  padding: var(--e-4) var(--e-6);
  font-size: var(--t-cuerpo);
}

.boton[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* ---------- Píldoras ---------------------------------------- */

.pildora {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-pildora);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

/* La píldora de la promesa de 24 h: borde violeta */
.pildora--promesa {
  border-color: var(--violeta);
  color: var(--papel);
}

.pildora--promesa::before {
  content: "";
  inline-size: var(--e-2);
  block-size: var(--e-2);
  border-radius: 50%;
  background: var(--cian);
  flex: none;
}

/* Píldora de filtro del portfolio: es un <button> */
.pildora-filtro {
  padding: var(--e-3) var(--e-4);
  min-block-size: 44px;
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-pildora);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
  transition: border-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.pildora-filtro:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.pildora-filtro[aria-pressed="true"] {
  border-color: var(--violeta);
  background: var(--tinta-alta);
  color: var(--papel);
}

/* ---------- Tarjetas ---------------------------------------- */

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6);
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
}

/* Realce del paso 2 del proceso y de los bloques de promesa */
.tarjeta--realce {
  border-color: var(--violeta);
}

/* ---------- Campos de formulario ---------------------------- */

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

.campo-etiqueta {
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--papel-tenue);
}

.campo-control {
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--e-3) var(--e-4);
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--papel);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  transition: border-color var(--dur-rapida) var(--ease);
}

.campo-control::placeholder {
  color: var(--papel-tenue);
  opacity: 0.7;
}

.campo-control:hover {
  border-color: var(--violeta);
}

textarea.campo-control {
  min-block-size: 0;
  resize: vertical;
  line-height: 1.6;
}

/* El select nativo en fondo oscuro necesita su propia flecha */
select.campo-control {
  appearance: none;
  padding-inline-end: var(--e-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238D91AD' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* El desplegable se dibuja con los colores del sistema operativo:
   forzarlo evita texto blanco sobre fondo blanco en Windows. */
select.campo-control option {
  background: var(--tinta-alta);
  color: var(--papel);
}

/* El desplegable de canal respira un poco más abajo: separa la
   elección del dato que le sigue. */
.campo-canal {
  margin-block-end: var(--e-4);
}

/* Estado de error (sección 9) */
.campo-control[aria-invalid="true"] {
  border-color: var(--coral);
}

.campo-error {
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  line-height: 1.5;
  color: var(--coral);
}

/* El honeypot de Netlify: oculto para humanos, visible para bots.
   No usar display:none — algunos bots lo detectan y lo saltean. */
.trampa {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Revelado en viewport (sección 8.1) -------------- */

.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-lenta) var(--ease),
              transform var(--dur-lenta) var(--ease);
  transition-delay: var(--retraso, 0ms);
}

.revelar.visible {
  opacity: 1;
  transform: none;
}

/* Sin JS la página tiene que verse igual: el revelado se activa
   solo cuando main.js le pone la clase al <html>. */
html:not(.js) .revelar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}