/* =========================================================
   QUANTASPORT · PÁGINAS INTERIORES
   ---------------------------------------------------------
   Estilos propios de funcionalidades.html y contacto.html:
   cabecera de página, bloques explicativos y formulario.
   Comparten con la portada el fondo, la barra y el pie.
   ========================================================= */

/* ---------------------------------------------------------
   Cabecera de página interior
   --------------------------------------------------------- */

.page-head{
  padding:clamp(48px,9vh,96px) var(--pad) clamp(28px,5vh,52px);
  text-align:center;
}

.page-head-inner{max-width:760px;margin:0 auto;}

.page-eyebrow{
  margin:0 0 14px;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand-ink);
}

.page-title{
  margin:0;font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--fg);
  font-size:clamp(2rem,5vw,3.1rem);
}

.page-lead{
  margin:20px auto 0;max-width:60ch;
  color:var(--fg-soft);line-height:1.66;
  font-size:clamp(1rem,1.6vw,1.12rem);
}

/* ---------------------------------------------------------
   Bloques explicativos
   --------------------------------------------------------- */

.explainers{
  max-width:960px;margin:0 auto;
  padding:0 var(--pad) clamp(60px,10vh,120px);
  display:grid;gap:18px;
}

.explainer{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:clamp(16px,3vw,26px);
  padding:clamp(22px,3vw,30px);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper-2);
  box-shadow:0 1px 2px rgba(11,18,32,.04);
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.explainer:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(11,18,32,.25);}

.explainer-ic{
  display:grid;place-items:center;
  width:56px;height:56px;border-radius:16px;
  color:var(--brand-ink);
  background:var(--brand-tint);
  border:1px solid rgba(2,132,199,.22);
}

.explainer h2{
  margin:0 0 10px;
  font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:800;letter-spacing:-.015em;color:var(--fg);
}
.explainer p{margin:0 0 12px;color:var(--fg-soft);line-height:1.7;font-size:clamp(.95rem,1.4vw,1.02rem);}
.explainer p:last-child{margin-bottom:0;}

/* ---------------------------------------------------------
   Formulario de contacto
   --------------------------------------------------------- */

.form-wrap{
  max-width:720px;margin:0 auto;
  padding:0 var(--pad) clamp(60px,10vh,120px);
}

.contact-form{
  padding:clamp(24px,4vw,38px);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper-2);
  box-shadow:0 20px 50px -24px rgba(11,18,32,.28);
}

.field{margin-bottom:20px;}
.field:last-of-type{margin-bottom:0;}

.field label{
  display:block;margin-bottom:8px;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;color:var(--fg);
}
.field .opt{font-weight:600;color:var(--fg-faint);}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--fg);
  font:inherit;font-size:.98rem;line-height:1.5;
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.field textarea{min-height:150px;resize:vertical;}

.field input::placeholder,
.field textarea::placeholder{color:#94a3b8;}

.field input:hover,
.field select:hover,
.field textarea:hover{border-color:#94a3b8;}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--brand);
  background:#fff;
  box-shadow:0 0 0 3px rgba(2,132,199,.18);
}

/* La flecha nativa del select no es igual en todos los navegadores: se
   dibuja una propia, en el azul de marca. */
.field select{
  -webkit-appearance:none;appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230369a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.field select option{background:#fff;color:var(--fg);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.consent{
  display:flex;align-items:flex-start;gap:11px;
  margin:22px 0 0;
  font-size:.88rem;line-height:1.55;color:var(--fg-mute);
}
.consent input{
  width:18px;height:18px;flex:0 0 auto;margin-top:2px;
  accent-color:var(--accent);
}

.form-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  margin-top:26px;
}

.form-note{margin:0;font-size:.8rem;color:var(--fg-faint);}

/* Aviso que sale al enviar mientras el formulario no tiene destino */
.form-status{
  display:none;
  margin-top:22px;padding:16px 18px;
  border-radius:var(--radius-sm);
  border:1px solid #fcd34d;
  background:#fffbeb;
  color:#713f12;
  font-size:.9rem;line-height:1.6;
}
.form-status.is-on{display:block;}
.form-status strong{color:#92400e;}

/* El aviso tiene tres caras: ambar por defecto (pendiente o enviando), verde
   cuando el mensaje sale y rojo cuando falla. El color no va solo: el texto ya
   dice lo que ha pasado, para quien no lo distinga. */
.form-status.is-ok{
  border-color:#86efac;
  background:#f0fdf4;
  color:#14532d;
}
.form-status.is-ok strong{color:#166534;}

.form-status.is-error{
  border-color:#fca5a5;
  background:#fef2f2;
  color:#7f1d1d;
}
.form-status.is-error strong{color:#991b1b;}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width:640px){
  .explainer{grid-template-columns:1fr;gap:16px;}
  .explainer-ic{width:46px;height:46px;border-radius:13px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .field-row .field{margin-bottom:20px;}
  .form-actions{gap:12px;}
  .form-actions .btn{width:100%;justify-content:center;}
}

@media (hover:none){
  .explainer:hover{transform:none;border-color:var(--line);}
}