/* daezpro.com — 04-responsive-home-a.css
   Responsive de hero/nav/trust/problem (breakpoints 1024/900/768/520) + prefers-reduced-motion. */

/* ==========================================================================
   RESPONSIVE  (mobile-first overrides · breakpoints 1024 / 900 / 768 / 520)
   ========================================================================== */
@media (max-width:1024px){
  .hero__grid{ gap:44px; }
  .gauge{ width:min(300px, 88%); }
}

@media (max-width:900px){
  /* Nav colapsa a panel desplegable */
  .nav__toggle{ display:flex; }
  .nav__links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px var(--pad) 22px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--sh-lg);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links > a:not(.btn){ padding:12px 4px; font-size:var(--fs-title); border-bottom:1px solid var(--border); }
  .nav__links > a:not(.btn):last-of-type{ border-bottom:0; }
  .nav__cta{ margin-left:0; margin-top:10px; width:100%; }

  /* Dropdown "Servicios" en móvil: panel inline dentro del drawer */
  .nav__drop{ border-bottom:1px solid var(--border); }
  .nav__droptrigger{
    width:100%;
    justify-content:space-between;
    padding:12px 4px;
    font-size:var(--fs-title);
  }
  .nav__panel{
    position:static;
    min-width:0;
    padding:2px 0 10px 14px;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
  }
  .nav__panel.is-open{ display:grid; }
  .nav__svc{ padding:9px 4px; }

  /* Cotas ocultas por debajo de 900px */
  .cota{ display:none; }
}

@media (max-width:768px){
  :root{ --pad:16px; }
  body{ font-size:var(--fs-title); }

  /* Hero a una columna; la tarjeta gauge deja de flotar */
  .hero__grid{ grid-template-columns:1fr; gap:36px; }
  .hero__media{ max-width:440px; }
  .hero__photo{ aspect-ratio:4/5; }
  .gauge{
    position:static;
    width:min(340px, 100%);
    margin:-56px auto 0; /* solapa ligeramente la foto, ya sin rotación fuerte */
    transform:rotate(-1deg);
  }

  /* Barra de confianza en columna */
  .trust__grid{ grid-template-columns:1fr; gap:0; }
  .trust__item{ padding:22px 8px; }
  .trust__item + .trust__item{ border-left:0; border-top:1px solid var(--border); }

  /* Problema apilado */
  .problem .h2{ margin-bottom:36px; }
  .problem__grid{ grid-template-columns:1fr; gap:0; }
  .problem__item{ padding:24px 0; }
  .problem__item + .problem__item{ border-top:1px solid var(--border); }
}

@media (max-width:520px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .gauge{ margin-top:-40px; transform:none; }
}

/* ------------------------------------------------ MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .gauge__needle,.gauge__needle line{ transition:none; }
}