/* ============================================================================
   Mundo Abogadas · ajuste para teléfonos

   La plantilla original no tiene medidas propias para teléfono: usa las de
   escritorio en todas partes. Medido en 375 px antes de tocar nada, la página
   entera medía 12.593 px de alto, unas 15 pantallas, con 200 px de aire solo
   arriba y abajo del hero y círculos de servicio de 170 px.

   Esta hoja NO cambia colores, contenido ni secciones. Solo tamaños y espacios,
   y solo bajo 768 px. En escritorio no altera nada.

   🔴 Por qué todos los selectores empiezan con `html body`: cargar la hoja al
   final NO basta. La plantilla usa cadenas como `.services .service-item .icon`
   (tres clases) y un selector de dos clases pierde por especificidad aunque
   venga después. La primera versión de esta hoja fallaba en 28 declaraciones
   por eso. `html body` suma dos elementos y gana sin recurrir a `!important`,
   que dejaría el archivo imposible de sobreescribir más adelante.
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Encabezado ─────────────────────────────────────────────────────────
     El logo ocupaba 228 px de ancho, el 61% de la pantalla. */
  html body .header-area .main-nav .logo img {
    max-height: 40px;
    width: auto;
  }

  /* ── Hero ───────────────────────────────────────────────────────────────
     100 px de relleno en la sección más 80/120 px dentro del slide. */
  /* 🔴 El encabezado es `position: fixed` y mide 80 px. Bajar este relleno a
     26 px hizo que el logo quedara MONTADO sobre el slide: medido, el slide
     empezaba en y=26 y el encabezado terminaba en y=80. El ahorro de alto no
     sale de aca, sale del relleno interno del slide, que si se puede recortar. */
  html body .main-banner {
    padding: 96px 0 30px;
  }
  /* `!important` aqui NO es pereza: la plantilla ya usa `!important` en su
     propia media query de 767 px para este mismo padding, y a `!important`
     solo lo gana otro `!important`. Es el unico caso del archivo. */
  html body .main-banner .item {
    padding: 42px 22px 50px !important;
    margin-left: 0;
    border-radius: 18px;
  }
  html body .main-banner .item h2,
  html body .main-banner .item h1 {
    font-size: 26px;
    line-height: 34px;
    width: 100%;
    margin-bottom: 16px;
  }
  html body .main-banner .item p {
    width: 100%;
    font-size: 15px;
    line-height: 25px;
  }
  html body .main-banner .item span.category {
    margin-bottom: 20px;
    font-size: 12px;
  }
  html body .main-banner .item .buttons {
    margin-top: 24px;
  }
  /* Las flechas del carrusel quedaban tapadas por el botón de WhatsApp. */
  html body .main-banner .owl-nav {
    display: none;
  }

  /* ── Títulos de sección ─────────────────────────────────────────────────
     h2 y h6 venían los dos en 36 px, así que no se distinguían entre sí. */
  html body .section-heading h2 {
    font-size: 25px;
    line-height: 33px;
  }
  /* Hay DOS tipos de h6 en la plantilla y confundirlos fue un error de la
     primera version: en Especialidades y Servicios el h6 es una etiqueta
     chica (14 px), pero en Quienes somos, Testimonios y Contacto hace de
     titulo grande (36 px). Al segundo solo hay que bajarlo, no achicarlo. */
  html body .about-us .section-heading h6,
  html body .testimonials .section-heading h6,
  html body .contact-us .section-heading h6 {
    font-size: 25px;
    line-height: 33px;
  }
  html body .section-heading p {
    font-size: 15px;
    line-height: 25px;
  }

  /* ── Especialidades ─────────────────────────────────────────────────────
     Círculo de 170 px y 95 px de separación entre tarjetas. */
  html body .services.section {
    margin-top: 34px;
    padding-top: 8px;
  }
  html body .services .service-item {
    margin-top: 58px;
  }
  html body .services .service-item .icon {
    width: 104px;
    height: 104px;
    line-height: 104px;
  }
  html body .services .service-item .icon img {
    max-width: 52px;
  }
  html body .services .service-item .main-content {
    padding: 62px 22px 26px;
  }
  html body .services .service-item h4 {
    font-size: 19px;
    line-height: 26px;
  }
  html body .services .service-item p {
    font-size: 14px;
    line-height: 23px;
  }

  /* ── Quiénes somos ──────────────────────────────────────────────────────── */
  html body .about-us .accordion-button {
    font-size: 15px;
    line-height: 22px;
    padding: 14px 16px;
  }
  html body .about-us .accordion-body {
    font-size: 14px;
    line-height: 23px;
    padding: 14px 16px;
  }

  /* ── Servicios ──────────────────────────────────────────────────────────── */
  html body .courses .events_item .down-content {
    padding: 20px;
  }
  html body .courses .events_item .down-content .author {
    font-size: 14px;
    line-height: 23px;
  }

  /* ── Cifras ─────────────────────────────────────────────────────────────
     120 px de relleno superior y números de 48 px, y las cuatro cifras una
     debajo de otra (unos 900 px de alto). En teléfono van en un cuadrado de
     2 × 2: en una sola fila de cuatro, a 375 px, cada cifra tendría menos de
     90 px y las etiquetas quedarían en tres líneas. */
  html body .fun-facts {
    padding: 40px 0 14px;
  }
  html body .fun-facts::before {
    width: 97%;
    border-top-right-radius: 90px;
    border-bottom-right-radius: 90px;
  }
  html body .fun-facts .wrapper > .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  html body .fun-facts h2 {
    font-size: 32px;
    line-height: 1.1;
  }
  html body .fun-facts .counter {
    margin-bottom: 24px;
  }
  html body .fun-facts .count-text {
    font-size: 13px;
    line-height: 1.35;
    margin-top: 6px;
  }

  /* ── Testimonios ──────────────────────────────────────────────────────────
     La plantilla los sube 50 px sobre las cifras (margin-top: -50px), cosa que
     solo funcionaba mientras las cifras iban en columna y les sobraba aire
     abajo. Con el cuadrado de 2 × 2 esos 50 px tapaban la segunda fila. */
  html body .testimonials {
    margin-top: 16px;
  }
  html body .testimonials .owl-testimonials .item p {
    font-size: 15px;
    line-height: 25px;
  }

  /* ── Asesorías ──────────────────────────────────────────────────────────── */
  /* La clase `py-5` de Bootstrap lleva `!important`, asi que no hay
     especificidad que la gane. */
  html body #precios {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  html body #precios .card {
    margin-bottom: 18px;
  }
  /* Misma cadena que usa la plantilla, por especificidad. */
  html body #precios .card-body h4.fw-bold.text-main {
    font-size: 17px;
    line-height: 24px;
  }
  /* La plantilla lo fija con `#precios .card-body h2.display-6.fw-bold`,
     tres clases. Hay que repetir esa cadena para no perder por especificidad. */
  html body #precios .card-body h2.display-6.fw-bold {
    font-size: 30px;
  }
  html body #precios .card li {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Contacto ───────────────────────────────────────────────────────────── */
  html body .contact-us {
    margin-top: 32px;
    padding: 24px 0;
  }
  html body .contact-us .contact-us-content {
    padding: 24px 20px;
  }

  /* ── Pie ────────────────────────────────────────────────────────────────── */
  html body footer h5 {
    font-size: 16px;
  }
  html body footer .footer-links li {
    font-size: 14px;
  }

  /* ── Botón flotante ─────────────────────────────────────────────────────
     Se comía las flechas del carrusel y una franja del hero. */
  html body .whatsapp-float.btn {
    padding: 9px 13px;
    font-size: 12px;
    bottom: 14px;
    right: 14px;
  }
}

/* Teléfonos angostos, tipo iPhone SE. */
@media (max-width: 390px) {
  html body .main-banner .item h2,
  html body .main-banner .item h1 {
    font-size: 24px;
    line-height: 32px;
  }
  /* Tambien con `!important`: si no, pierde contra la regla de 767 px de
     arriba, que lo necesita para ganarle a la plantilla. */
  html body .main-banner .item {
    padding: 36px 18px 46px !important;
  }
}