/* ============================================================
   AROCA CONSULTING — Estilos específicos de Contacto (04)
   Solo clases prefijadas; no redefine clases globales.
   ============================================================ */

/* ---------- Hero de contacto ---------- */
.contact-hero__title {
  font-size: var(--fs-hero);
  line-height: 1.14;
  color: #000;
  max-width: 16ch;
}
.contact-hero__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text);
  max-width: none;
  margin-top: var(--sp-24);
}

/* Hero + formulario: más ancho al copy (~40px del formulario) */
.contact__grid {
  grid-template-columns: 1.012fr 1fr;
}

/* ---------- Métodos de contacto (C2) ---------- */
.contact-method {
  padding: 40px 48px;
}
.contact-method + .contact-method {
  margin-top: var(--sp-32);
}

/* ---------- Formulario: filas de 2 columnas (C5) ---------- */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-32);
}

/* ---------- Autodiagnóstico Interactivo ---------- */
#autodiagnostico {
  padding-block: clamp(56px, 7vw, 96px);
}
.selfcheck__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.selfcheck__actions {
  margin-top: var(--sp-40);
}
.selfcheck__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.selfcheck__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.selfcheck__media:hover img {
  transform: scale(1.04);
}

/* ============================================================
   AUTODIAGNÓSTICO — cuestionario interactivo (fondo claro, 2 columnas)
   ============================================================ */
/* El atributo hidden debe ocultar de verdad: las clases con display:grid/flex
   (p.ej. .selfcheck__grid) pisan al [hidden] del navegador si no forzamos esto. */
[data-autodiag] [hidden] { display: none !important; }
[data-autodiag].is-ad-transitioning { position: relative; }

/* Intro → cuestionario: salida suave del estado inicial */
.ad-intro--leave {
  animation: adIntroLeave 480ms var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes adIntroLeave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* Cuestionario: revelado escalonado de arriba hacia abajo */
.ad-quiz--enter .ad-progress  { animation: adRevealDown 620ms var(--ease-out) both; animation-delay: 60ms; }
.ad-quiz--enter .ad-qbody     { animation: adRevealDown 680ms var(--ease-out) both; animation-delay: 140ms; }
.ad-quiz--enter .ad-nav       { animation: adRevealDown 620ms var(--ease-out) both; animation-delay: 240ms; }
.ad-quiz--enter .ad-aside     { animation: adRevealDown 720ms var(--ease-out) both; animation-delay: 180ms; }
@keyframes adRevealDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: none; }
}

.ad-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 550px);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}
.ad-main { min-width: 0; }

/* Barra de progreso (fina, junto al contador) */
.ad-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.ad-progress__label {
  flex: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--muted);
}
.ad-progress__track {
  width: 160px;
  max-width: 40%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.ad-progress__fill {
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 2px;
  transition: width var(--dur-mid) var(--ease-out);
}

/* Pregunta */
.ad-question__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  font-weight: var(--fw-bold);
  color: var(--ink);
  min-height: 2.6em;   /* reserva 2 líneas para que las opciones no "brinquen" */
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Respuestas (tarjetas blancas) */
.ad-answers { list-style: none; display: flex; flex-direction: column; gap: var(--sp-16); }
.ad-answer {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--border);
  padding: clamp(16px, 1.4vw, 20px) clamp(18px, 1.8vw, 26px);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.ad-answer:hover { border-color: var(--green); transform: translateX(8px); }
.ad-answer:focus-visible { outline: none; box-shadow: var(--ring-green); }
.ad-answer.is-selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ad-answer__badge {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  color: var(--navy);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.ad-answer:hover .ad-answer__badge,
.ad-answer.is-selected .ad-answer__badge {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.ad-answer__text {
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--ink);
}

/* Navegación */
.ad-nav {
  margin-top: clamp(28px, 3vw, 44px);
  min-height: 38px;
}
.ad-back,
.ad-restart {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 6px 0;
  transition: color var(--dur-fast) ease;
}
.ad-back:hover,
.ad-restart:hover { color: var(--green); }
.ad-back--hidden {
  visibility: hidden;
  pointer-events: none;
}

/* Pixel-art (columna derecha) */
.ad-aside { display: flex; justify-content: center; }
.ad-board { width: 100%; max-width: 550px; --ad-hue: #00bf63; }
/* Cuestionario: celdas 7×7, separación 7px (pitch 14) → panel ~469×469 (34 columnas) */
.ad-quiz .ad-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; /* Centrado vertical en el medio de la sección */
  row-gap: 51px;
  column-gap: clamp(77px, 6vw, 109px);
}
.ad-quiz .ad-board {
  width: 469px;
  max-width: 100%;
  flex: none;
}
.ad-board--compact { max-width: 385px; }
.ad-board__svg { width: 100%; height: auto; display: block; }
.ad-board__svg rect { transition: fill 380ms ease; }        /* al apagar (hover-out): lento */
/* Hover con radio (JS marca .ad-hot alrededor del cursor): enciende rápido; se apaga lento al salir */
.ad-board__svg rect.ad-hot,
.ad-board__svg rect:hover { fill: var(--ad-hue) !important; transition: fill 70ms ease; }
.ad-pixel {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}
.ad-pixel--gray {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 41 / 49;
  background: url(../assets/icons/pixel/grid.svg) center / contain no-repeat;
}

/* Resultado */
.ad-result__eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-16);
}
.ad-result__title {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
  font-weight: var(--fw-black);
  color: var(--navy);
  margin-bottom: var(--sp-24);
}
.ad-result__desc,
.ad-result__risk {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text);
  max-width: 60ch;
}
.ad-result__desc strong,
.ad-result__risk strong { color: var(--ink); font-weight: var(--fw-bold); }
.ad-hr { border: 0; border-top: 1px solid var(--border); margin: clamp(24px, 3vw, 36px) 0; }
.ad-result__risklabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e5484d;
  margin-bottom: var(--sp-16);
}
.ad-warn--red { color: #e5484d; }
.ad-result__perilabel {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--sp-16);
}
.ad-peri { list-style: none; display: flex; flex-direction: column; gap: var(--sp-16); }
.ad-peri li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); color: var(--text); }
.ad-peri__ico { flex: none; color: #f0a020; font-size: 16px; line-height: 1; }

/* CTA del resultado (recuadro) */
.ad-cta {
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--border);
  background: var(--white);
  padding: clamp(24px, 3vw, 40px);
  transition: padding var(--dur-mid) var(--ease-out);
}
.ad-cta.is-open {
  padding-bottom: clamp(28px, 3.2vw, 44px);
}
.ad-cta__title { font-size: clamp(20px, 2vw, 26px); font-weight: var(--fw-bold); color: var(--ink); }
.ad-cta__text { font-size: var(--fs-body); color: var(--text); margin-top: var(--sp-8); }
.ad-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-16); margin-top: var(--sp-24); }
.ad-cta__actions .ico { font-size: 18px; }
.ad-cta__actions [data-ad-email-toggle][aria-expanded="true"] {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Panel de correo expandible */
.ad-cta__panel:not([hidden]) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out), opacity 280ms ease, margin-top 420ms var(--ease-out);
  opacity: 0;
  margin-top: 0;
}
.ad-cta__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--sp-24);
}
.ad-cta__panel-inner {
  overflow: hidden;
  min-height: 0;
  border-top: 1px solid var(--border);
  padding-top: 0;
  transition: padding-top 420ms var(--ease-out);
}
.ad-cta__panel.is-open .ad-cta__panel-inner {
  overflow: visible; /* deja ver el aura verde de focus en laterales */
  padding-top: var(--sp-24);
  padding-inline: 4px;
  margin-inline: -4px;
}
.ad-cta__context {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  margin-bottom: var(--sp-24);
}
.ad-cta__context strong {
  color: var(--navy);
  font-weight: var(--fw-bold);
  font-size: inherit;
}
.ad-cta__form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--sp-16);
}
.ad-cta__form .form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.ad-cta__form .field {
  min-width: 0; /* evita desborde en grid */
}
.ad-cta__form .field label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  font-weight: var(--fw-medium);
}
.ad-cta__form .field input:not([type="hidden"]),
.ad-cta__form .field textarea {
  font-size: var(--fs-body);
  line-height: 1.35;
  background: var(--bg-tint);
  border-color: var(--border);
}
.ad-cta__form .field input:not([type="hidden"]) {
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
}
.ad-cta__form .field__optional {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--muted-2);
  text-transform: none;
  letter-spacing: 0;
}
.ad-cta__form textarea {
  min-height: 96px;
  padding: 14px 16px;
  resize: vertical;
}
.ad-cta__form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 191, 99, 0.22);
}
.ad-cta__form .btn--block {
  width: 100%;
  margin-top: var(--sp-8);
  font-size: var(--fs-body);
}

@media (max-width: 900px) {
  .ad-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ad-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .ad-cta {
    padding: var(--sp-24);
  }
  .ad-cta__form .form__row {
    grid-template-columns: 1fr;
  }
  .ad-cta__form .field input:not([type="hidden"]) {
    height: 48px;
    min-height: 48px;
    padding: 0 14px;
  }
}

.ad-result__foot { margin-top: clamp(28px, 3vw, 40px); }
.ad-disclaimer {
  margin-top: var(--sp-16);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 80ch;
}

/* Animaciones de entrada */
.ad-qbody {
  transition: opacity 200ms ease;
}
.ad-qbody.ad-qbody--leave { opacity: 0; }
.ad-qbody.ad-enter { animation: adQuestionIn 340ms var(--ease-out) both; }
.ad-result.ad-enter { animation: adResultIn 640ms var(--ease-out) both; }
.ad-quiz { transition: opacity 420ms ease; }
@keyframes adQuestionIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes adResultIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Grilla del resultado: sticky acotado a .ad-result (no sigue fuera de la sección) */
.ad-result {
  --ad-header-h: 92px;      /* altura del nav (main.css) */
  --ad-sticky-gap: 100px;   /* separación bajo el header cuando está fijo */
  --ad-sticky-top: calc(var(--ad-header-h) + var(--ad-sticky-gap));
}
.ad-result .ad-grid--result {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: clamp(77px, 6vw, 109px); /* Consistente con el cuestionario */
}
.ad-result .ad-aside {
  align-self: stretch;
}
.ad-result .ad-board {
  position: sticky;
  top: var(--ad-sticky-top);
  align-self: flex-start;
  width: 469px;
  max-width: 100%;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .ad-intro--leave,
  .ad-quiz--enter .ad-progress,
  .ad-quiz--enter .ad-qbody,
  .ad-quiz--enter .ad-nav,
  .ad-quiz--enter .ad-aside { animation: none; }
  .ad-qbody.ad-enter,
  .ad-result.ad-enter,
  .ad-qbody.ad-qbody--leave { animation: none; transition: none; opacity: 1; }
  .ad-board__svg rect { transition: none !important; }
  .ad-answer:hover { transform: none; }
}

/* El board del cuestionario (30×34, pixeles 10×10) es demasiado ancho para 2 columnas en
   tablets/laptops chicos, así que ≤1200px se apila: pixel-art arriba, contenido
   a todo el ancho. El board se centra y baja a ancho de columna en teléfonos. */
@media (max-width: 1200px) {
  .ad-grid,
  .ad-quiz .ad-grid,
  .ad-result .ad-grid--result {
    grid-template-columns: 1fr;
    row-gap: var(--sp-32);
  }
  .ad-aside { order: -1; }
  .ad-result .ad-board { position: static; }
  .ad-quiz .ad-board,
  .ad-result .ad-board {
    width: 100%;
    max-width: min(469px, 100%);
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .ad-answer__text { font-size: var(--fs-body); }
  .ad-answer__badge { width: 36px; height: 36px; }
  .ad-answer:hover { transform: none; }
  .ad-question__title { min-height: 0; font-size: clamp(20px, 5.2vw, 24px); }
  .contact-hero__title {
    max-width: none;
    font-size: 36px;
    letter-spacing: -0.015em;
  }
  .contact-hero__lead { margin-top: var(--sp-16); }
  .selfcheck__media {
    aspect-ratio: 16 / 10;
    max-height: 200px;
    width: 100%;
  }
}

/* ---------- Preguntas Frecuentes (acordeón nativo) ---------- */
.faq {
  margin-top: var(--sp-48);
  border-top: 1px solid var(--border);
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: 32px 16px;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--navy); }

/* Icono "+" en CSS puro que rota a "×" al abrir */
.faq__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform var(--transition), background var(--transition);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] > summary { color: var(--navy); }
.faq__item[open] .faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); background: var(--green); }
.faq__item[open] .faq__icon::after  { transform: translate(-50%, -50%) rotate(-45deg); background: var(--green); }

/* El padding va en el inner para que la animación de altura colapse a 0 limpio */
.faq__answer { overflow: hidden; max-width: 90ch; }
.faq__answer-inner {
  padding: 0 16px var(--sp-24);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

/* ---------- Responsive (4.E) ---------- */
@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; }
  /* Tarjeta del formulario: padding reducido solo en Contacto */
  .contact__grid .form { padding: var(--sp-32); }

  .selfcheck__grid { grid-template-columns: 1fr; }
  .selfcheck__media { max-width: 100%; width: 100%; }
}

/* Tablet: ritmo y tipografía (sin tocar móvil ≤768 ni desktop) */
@media (min-width: 769px) and (max-width: 1024px) {
  .contact-hero__title {
    font-size: clamp(36px, 4.5vw, 44px);
    letter-spacing: -0.015em;
  }
  .contact-hero__lead { margin-top: var(--sp-16); max-width: 54ch; }
  .contact-method { padding: 36px 40px; }
  .contact-method + .contact-method { margin-top: var(--sp-24); }
  .selfcheck__media {
    aspect-ratio: 16 / 10;
    max-height: 320px;
  }
  .faq__item > summary { padding: 28px 16px; }
  .ad-question__title { font-size: clamp(24px, 3vw, 28px); }
}

/* Fila de 2 columnas rompe pronto (campo Cargo/Rol queda estrecho) */
@media (max-width: 820px) {
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Botones internos de los métodos a ancho completo */
  .contact-method .btn { width: 100%; }
  .contact-method { padding: var(--sp-32); }
  .contact-method + .contact-method { margin-top: var(--sp-24); }
  .faq__item > summary { padding: 22px 12px; font-size: var(--fs-body-lg); }
}

@media (max-width: 480px) {
  .contact-method { padding: 22px; }
  .contact__grid .form { padding: 22px; }
  .faq__item > summary { padding: 18px 8px; font-size: 16px; }
  .contact-hero__title { font-size: 36px; }
  .selfcheck__media { max-height: 168px; }
}