/* =========================================================================
   Página de contacto — grupodov.net
   =========================================================================

   Se encola SOLO en la página de contacto (ver page-contacto.php).
   Depende de los tokens de base.css: aquí no hay ni un color ni un tamaño
   escrito a mano.

   Incluye el estilado del formulario de Drunel Forms Lite, que expone sus
   clases .drunel-form__* precisamente para que el tema las vista.
   ========================================================================= */

/* ===== Cabecera ===== */
  .hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--gd-e-7); align-items: center; }
  .hero-texto { max-width: 56ch; }
  .hero h1 { color: var(--gd-blanco); margin-bottom: var(--gd-e-4); }
  .hero p.gd-texto { color: var(--gd-acero-300); font-size: 1.0625rem; margin-bottom: var(--gd-e-6); }
  .hero strong { color: var(--gd-amarillo); font-weight: 600; }

  .accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gd-e-3); }
  .acceso {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--gd-e-4);
    background: var(--gd-marino-claro);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--gd-radio-sm);
    text-decoration: none;
    transition: border-color var(--gd-transicion), transform var(--gd-transicion);
  }
  .acceso:hover { border-color: var(--gd-amarillo); transform: translateY(-2px); }
  .acceso .qué { font: 700 12px/1 var(--gd-fuente-titular); letter-spacing: .1em; text-transform: uppercase; color: var(--gd-amarillo); }
  .acceso .dato { font: 600 15px/1.3 var(--gd-fuente-texto); color: var(--gd-blanco); }
  .acceso .nota { font-size: 12.5px; color: var(--gd-acero-400); }

  /* ===== Formulario + datos ===== */
  .bloque-form { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--gd-e-7); align-items: start; }

  .ayuda-campo {
    background: var(--gd-acero-50);
    border-left: 3px solid var(--gd-amarillo);
    padding: var(--gd-e-3) var(--gd-e-4);
    margin-bottom: var(--gd-e-5);
    font-size: .9375rem; line-height: 1.55; color: var(--gd-texto);
    border-radius: 0 var(--gd-radio-xs) var(--gd-radio-xs) 0;
  }
  .ayuda-campo b { color: var(--gd-marino); }

  .datos-panel { position: sticky; top: var(--gd-e-5); }
  .dato-linea { display: flex; gap: var(--gd-e-3); padding-block: var(--gd-e-3); border-bottom: 1px solid var(--gd-acero-200); }
  .dato-linea:last-child { border-bottom: none; }
  .dato-linea .k { font: 700 11.5px/1.6 var(--gd-fuente-titular); letter-spacing: .1em; text-transform: uppercase; color: var(--gd-acero-600); width: 92px; flex: none; }
  .dato-linea .v { font-size: .9375rem; color: var(--gd-texto); }
  .dato-linea .v a { color: var(--gd-enlace); text-decoration: none; font-weight: 600; }
  .dato-linea .v a:hover { color: var(--gd-enlace-hover); text-decoration: underline; }
  .dato-linea .v small { display: block; color: var(--gd-texto-suave); font-size: 13px; margin-top: 2px; }

  /* ===== Estilo del formulario de Drunel con nuestros tokens ===== */
  .drunel-form-wrapper { --f-gap: var(--gd-e-4); }
  .drunel-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-gap); }
  .drunel-form__group { display: flex; flex-direction: column; gap: 6px; }
  .drunel-form__group--full, .drunel-form__group--custom-que-equipo-necesita { grid-column: 1 / -1; }
  .drunel-form__label {
    font: 600 13.5px/1.4 var(--gd-fuente-texto);
    color: var(--gd-marino);
  }
  .drunel-form__label::after { content: " *"; color: var(--gd-atencion); font-weight: 700; }
  .drunel-form__input,
  .drunel-form__select,
  .drunel-form__textarea {
    font: 400 1rem/1.5 var(--gd-fuente-texto);
    color: var(--gd-texto);
    background: var(--gd-blanco);
    border: 1px solid var(--gd-acero-300);
    border-radius: var(--gd-radio-sm);
    padding: 11px 13px;
    width: 100%;
    transition: border-color var(--gd-transicion), box-shadow var(--gd-transicion);
  }
  .drunel-form__textarea { min-height: 150px; resize: vertical; }
  .drunel-form__input:focus,
  .drunel-form__select:focus,
  .drunel-form__textarea:focus {
    outline: none;
    border-color: var(--gd-enlace);
    box-shadow: 0 0 0 3px rgba(34,80,160,.14);
  }
  .drunel-form__input::placeholder, .drunel-form__textarea::placeholder { color: var(--gd-acero-400); }
  .drunel-form__button {
    grid-column: 1 / -1;
    justify-self: start;
    font: 700 .9375rem/1.2 var(--gd-fuente-titular);
    background: var(--gd-amarillo);
    color: var(--gd-marino);
    border: 1px solid transparent;
    border-radius: var(--gd-radio-sm);
    padding: var(--gd-e-3) var(--gd-e-6);
    cursor: pointer;
    box-shadow: var(--gd-sombra-sutil);
    transition: background var(--gd-transicion), transform var(--gd-transicion), box-shadow var(--gd-transicion);
  }
  .drunel-form__button:hover { background: var(--gd-amarillo-oscuro); box-shadow: var(--gd-sombra); transform: translateY(-1px); }
  .drunel-form__button:focus-visible { outline: 3px solid var(--gd-enlace); outline-offset: 2px; }
  .form-nota { grid-column: 1/-1; font-size: 13px; color: var(--gd-texto-suave); margin: 0; }

  /* ===== Cobertura ===== */
  .paises { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gd-e-5); }
  .pais { background: var(--gd-blanco); border: 1px solid var(--gd-acero-200); border-radius: var(--gd-radio-md); padding: var(--gd-e-5); display: flex; flex-direction: column; gap: var(--gd-e-2); }
  .pais h3 { font: 700 1.125rem/1.2 var(--gd-fuente-titular); color: var(--gd-marino); margin: 0; }
  .pais .rol { font: 700 11px/1 var(--gd-fuente-titular); letter-spacing: .1em; text-transform: uppercase; color: var(--gd-acero-600); }
  .pais p { margin: 0; font-size: .9375rem; color: var(--gd-texto-suave); }

  /* ===== Proceso ===== */
  .pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gd-e-5); counter-reset: paso; }
  .paso { display: flex; flex-direction: column; gap: var(--gd-e-2); padding-top: var(--gd-e-4); border-top: 3px solid var(--gd-amarillo); }
  .paso .n { font: 700 12px/1 var(--gd-fuente-titular); letter-spacing: .12em; color: var(--gd-acero-600); }
  .paso h3 { font: 700 1.0625rem/1.25 var(--gd-fuente-titular); color: var(--gd-marino); margin: 0; }
  .paso p { margin: 0; font-size: .9375rem; color: var(--gd-texto-suave); }

  /* ===== FAQ ===== */
  .faq { max-width: 800px; }
  .faq details { border-bottom: 1px solid var(--gd-acero-200); }
  .faq summary {
    cursor: pointer; list-style: none;
    padding: var(--gd-e-4) var(--gd-e-5) var(--gd-e-4) 0;
    font: 700 1.0625rem/1.35 var(--gd-fuente-titular);
    color: var(--gd-marino);
    position: relative;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; font-weight: 400; color: var(--gd-amarillo-oscuro); line-height: 1;
  }
  .faq details[open] summary::after { content: "−"; }
  .faq summary:focus-visible { outline: 3px solid var(--gd-enlace); outline-offset: 2px; }
  .faq .respuesta { padding: 0 var(--gd-e-6) var(--gd-e-5) 0; color: var(--gd-texto); max-width: 68ch; }
  .faq .respuesta a { color: var(--gd-enlace); }

  /* ===== Locales ===== */
  .locales { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gd-e-5); }
  .local {
    background: var(--gd-marino-claro);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--gd-radio-md);
    padding: var(--gd-e-5);
    display: flex; flex-direction: column; gap: var(--gd-e-2);
  }
  .local .rol-local {
    font: 700 11px/1 var(--gd-fuente-titular); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gd-amarillo);
  }
  .local h3 { font: 700 1.125rem/1.2 var(--gd-fuente-titular); color: var(--gd-blanco); margin: 0; }
  .local p { margin: 0; font-size: .9375rem; color: var(--gd-acero-300); }
  .local p.funcion { color: var(--gd-acero-400); font-size: .875rem; }
  .local a { font-size: .875rem; font-weight: 600; margin-top: auto; padding-top: var(--gd-e-2); }

  /* ===== Cierre ===== */
  .cierre { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--gd-e-7); align-items: center; }

  @media (max-width: 900px) {
    .hero, .bloque-form, .cierre { grid-template-columns: 1fr; gap: var(--gd-e-6); }
    .paises, .pasos { grid-template-columns: 1fr 1fr; }
    .datos-panel { position: static; }
  }
  @media (max-width: 620px) {
    .accesos, .paises, .pasos { grid-template-columns: 1fr; }
    .drunel-form { grid-template-columns: 1fr; }
  }