/* ==========================================================================
   OMI DENTAL — Responsive
   Breakpoints: 1180 · 980 · 760 · 560
   ========================================================================== */

@media (max-width: 1180px) {
  .header__nav {
    gap: 1rem;
  }
}

/* Entre 981 y 1300px el hero sigue en 2 columnas pero la columna de texto es
   angosta: los dos botones ya no caben uno junto al otro y el segundo
   terminaba envolviendo solo a si mismo en su propia linea, descuadrado.
   Mas limpio: que ambos se apilen a lo ancho, igual que en movil. */
@media (min-width: 981px) and (max-width: 1300px) {
  .hero__actions .btn {
    flex: 1 1 100%;
  }
}

/* Tarjetas flip un 15% más grandes en pantallas anchas. El ancho ya está
   fijado por las 4 columnas del grid (agrandarlo de ese lado haría que se
   encimaran), así que el 15% de más entra por el alto: aspect-ratio 4/3.45
   en vez de 4/3. En móvil (donde el pedido fue dejarlo igual) no se toca. */
@media (min-width: 981px) {
  .flip-card {
    aspect-ratio: 4 / 3.45;
  }
}

@media (max-width: 980px) {
  :root {
    --header-h: 66px;
  }

  .header__nav {
    display: none;
  }

  .burger {
    display: block;
  }

  .header__cta {
    display: none;
  }

  .cursor {
    display: none;
  }

  /* En una sola columna, ningun texto debe quedar pegado a un lado: se
     centra el bloque completo (titulo, parrafo, botones, eyebrow). */
  .section__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    justify-items: center;
    text-align: center;
  }

  .section__head .eyebrow,
  .section__head .lead {
    margin-inline: auto;
  }

  /* El eyebrow es un inline-flex con una rayita decorativa antes del texto.
     Si el texto envuelve a 2 lineas en pantallas angostas, flexbox termina
     ocupando todo el ancho disponible y ni justify-content lo centra bien.
     Mas simple y confiable: en movil se quita el flex y la rayita, y el
     texto se centra como bloque normal. */
  .eyebrow {
    display: block;
    text-align: center;
  }

  .eyebrow::before {
    display: none;
  }

  .section__head-visual {
    margin-inline: auto;
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .hero__title,
  .hero__line {
    justify-items: center;
  }

  .hero__type,
  .hero__lead,
  .hero__actions,
  .hero__trust {
    margin-inline: auto;
    justify-content: center;
  }

  .calm__grid {
    justify-items: center;
    text-align: center;
  }

  .calm__grid .eyebrow,
  .calm__grid .lead {
    margin-inline: auto;
  }

  .calm__grid .check-list {
    justify-items: center;
  }

  .calm__grid .check-list li {
    padding-left: 0;
  }

  .calm__grid .check-list li::before {
    position: static;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
  }

  .hero__art {
    order: -1;
    width: min(100%, 360px);
    margin: 0 auto 2.5rem;
  }

  .hero__float--1 {
    top: 32%;
    left: 0;
  }

  .hero__float--2 {
    right: 0;
  }

  .solutions__grid,
  .locale-grid,
  .results-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .location-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .specialties-head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .specialties-head__art {
    order: -1;
  }

  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-art {
    position: static;
    max-width: 340px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }

  .calm__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calm__art {
    order: -1;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }

  .chips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
  }

  .footer__brand-col {
    grid-column: span 2;
  }

  .footer__inner,
  .footer__col {
    justify-items: center;
  }

  /* En escritorio va alineado a la izquierda (sections.css); aquí se centra como los demás enlaces. */
  .footer__jobs {
    justify-self: center;
  }

  .footer__brand,
  .footer__social {
    justify-content: center;
  }

  .footer__addr,
  .footer__seal {
    margin-inline: auto;
  }
}

@media (max-width: 420px) {
  .hero__float {
    font-size: 0.72rem;
    padding: 0.5rem 0.85rem;
  }
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + 3.5rem) 5.5rem;
  }

  /* El boton de la oferta se desbordaba: su texto es largo y el boton no
     se encogia ni envolvia en pantallas angostas. Que ocupe todo el ancho
     y pueda pasar a una segunda linea si hace falta. */
  .offer .btn {
    width: 100%;
    white-space: normal;
  }

  .hero__echo {
    display: none;
  }

  .hero__scroll {
    display: none;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-right: 0;
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 560px) {
  :root {
    --radius-lg: 18px;
    --radius-xl: 22px;
  }

  .chips-grid,
  .flip-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__brand-col {
    grid-column: span 1;
  }

  .wa-float {
    width: 50px;
    height: 50px;
  }

  .wa-float svg {
    width: 26px;
    height: 26px;
  }

  .countdown__box {
    min-width: 74px;
    padding: 0.85rem 0.9rem;
  }
}

@media (min-width: 1600px) {
  :root {
    --shell: 1440px;
  }
}

@media (hover: none) {
  .cursor {
    display: none;
  }

  .card--glow::before {
    display: none;
  }
}

/* ==========================================================================
   Ancho minimo soportado: 360 px (celulares Android pequeños). Nada debe
   generar scroll horizontal a partir de este ancho.
   ========================================================================== */

/* Red de seguridad: los titulos ahora son editables desde el admin; si
   alguien escribe una palabra muy larga, se parte en vez de desbordar. */
.section__head > * {
  min-width: 0;
  max-width: 100%;
}

h1,
h2,
h3,
.section__title {
  overflow-wrap: break-word;
}

@media (max-width: 420px) {
  /* "ODONTOPEDIATRÍA:" (una sola palabra) medía 380 px con el tamaño minimo
     de titulo; a 1.8rem entra holgado en 320 px de contenido. */
  :root {
    --fs-h2: 1.8rem;
  }

  /* Visítanos: los botones iban alineados a la derecha sin poder envolver
     su texto ("Ver opiniones de nuestros pacientes") y se salian de la
     tarjeta. En pantallas chicas ocupan todo el ancho y pueden ir en 2 lineas. */
  .location-card__actions {
    width: 100%;
    align-items: stretch;
  }

  .location-card__actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}