/* ================== Tokens locales ================== */
:root{
  /* Paleta de la marca */
  --celeste:#44a4dc;
  --celeste-claro:#c6e7f8;
  --verde:#7cb928;
  --azul:#314e9d;
  --amarillo:#ffcf18;
  --naranjo:#f8ad26;

  /* Apoyo para el degradé */
  --verde-claro:#d3f3b2;

  /* Tipografía solicitada */
  --font:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* UI */
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --field-bg:#f7f8fb;
  --field-bd:#e7eaf0;
  --field-bd-focus: var(--celeste);
  --ink:#1f2430;
  --muted:#6b7280;
}

/* Forzar Poppins solo en esta vista (respetando tu pedido) */
body{ font-family:var(--font); }

/* ================== Fondo con degradé diagonal que “muere” en blanco ================== */
.hero-list{
  --alto: 95vh;                /* alto visual del bloque (ajustable) */
  --izq:  var(--verde-claro);  /* lado izquierdo del gradiente */
  --der:  var(--celeste-claro);      /* lado derecho del gradiente */

  min-height: var(--alto);
  display:flex;
  align-items:flex-start;
  padding: clamp(28px, 6vw, 56px) 0;

  /* Capa 1: cortina vertical a blanco (suave) */
  /* Capa 2: gradiente diagonal izq→der (paleta) */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 25%,
      rgba(255,255,255,.25) 50%,
      rgba(255,255,255,.55) 75%,
      #ffffff 100%
    ),
    linear-gradient(80deg, var(--izq) 0%, var(--der) 100%);
  background-repeat:no-repeat;
}
@media (max-width:640px){
  .hero-list{ --alto: 520px; }
}

/* ================== Contenido del contacto ================== */
.contact-section{
  width:100%;
}
.contact-wrap{
  width:min(920px, 92%);
  margin: 0 auto;
}

/* Título */
.contact-title{
  margin: 8px 0 22px;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height:1.15;
  letter-spacing:.6px;
  color: var(--azul);
  font-weight: 700;
  text-transform: uppercase;
}

/* Tarjeta del form (opcional: sin borde visible, sobre el degradé) */
.contact-form{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3.2vw, 24px);
}

/* Grid de los dos primeros campos */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 16px);
}
@media (max-width: 640px){
  .grid-2{ grid-template-columns:1fr; }
}

/* Campos */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: clamp(10px, 2vw, 14px);
}
.field label{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
textarea{
  width:100%;
  font: 500 15px/1.4 var(--font);
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
textarea{ resize: vertical; }

input::placeholder, textarea::placeholder{ color:#9aa3af; }

input:focus, textarea:focus{
  border-color: var(--field-bd-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--celeste) 24%, transparent);
  background: #fff;
}

/* Botón enviar: estilo similar a la imagen (negro) */
/* Reemplaza la regla del botón por esta */
.btn-submit{
  display: flex;                 /* permite centrar el contenido */
  align-items: center;
  justify-content: center;       /* centra “Enviar” */
  width: 100%;                   /* ocupa TODO el ancho del .contact-form */
  margin-top: 6px;
  background:#111;
  color:#fff;
  font-weight: 600;
  letter-spacing:.3px;
  border:0;
  border-radius: 10px;
  padding: 14px 18px;            /* puedes subir/bajar el alto si quieres */
  cursor:pointer;
  transition: transform .06s ease, filter .15s ease, background .2s ease;
}


.btn-submit:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.btn-submit:active{ transform: translateY(0); }

/* Accesibilidad: foco visible en el botón */
.btn-submit:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--azul) 40%, transparent);
  outline-offset: 2px;
}

/* Oculto por defecto */
#ok.envio-ok{ 
  display:none;
  position:sticky; top:0; z-index:1000;
  padding:12px 16px;
  background: #e8f7ee;        /* verde muy claro */
  color:#0f5132;               /* verde oscuro legible */
  border-bottom:2px solid #7cb928;
  text-align:center;
  font: 500 14px/1.4 "Poppins", system-ui, sans-serif;
}

/* Se muestra solo cuando llegas con #ok */
#ok:target{ display:block; }