/* =========================================================
   MOBILE FIX (portrait) — no toca desktop
   - Corrige: portada cortada, tarjeta hero mal posicionada
   - Corrige: Servicios “alargados” por columnas estrechas
   ========================================================= */

/* MÓVIL general */
@media (max-width: 820px){

  /* Header fijo limpio en móvil (evita superposición rara) */
  .topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background: rgba(251,250,247,.92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Asegura que el contenido no quede debajo del header */
  .hero{
    padding-top: 92px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* La imagen del hero NO debe forzar 92vh en móvil */
  .hero-image img{
    height: auto !important;
    max-height: none !important;
    object-fit: cover;
    object-position: 60% 35%;
  }

  /* Tarjeta del hero: pasa a flujo natural, centrada */
  .hero-card{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin: 18px auto 0 !important;
  }

  /* Evita “columnas estrechas” que alargan textos */
  .services-grid{
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .services-grid > .service-card{
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  /* La wide, en móvil: normal y centrada */
  .services-grid > .service-card.service-card-wide{
    grid-column: auto !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 18px auto 0 !important;
  }

  /* Imagen “pausa editorial” móvil, centrada y con aire */
  .services-editorial-mobile{
    max-width: 560px !important;
    margin: 18px auto 0 !important;
  }
  .services-editorial-mobile img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* MÓVIL muy pequeño */
@media (max-width: 420px){
  .topbar-inner{
    padding: 14px 16px !important;
  }
  .hero{
    padding-top: 86px !important;
  }
  .hero-card{
    width: calc(100% - 24px) !important;
  }
}
/* MOBILE PORTRAIT FIX — no afecta a desktop ni a landscape */
@media (max-width: 920px) and (orientation: portrait){

  /* 1) Header fijo: que no tape contenido */
  .topbar{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
  }

  /* 2) HERO: que no recorte (tu CSS actual fuerza alturas grandes) */
  .hero{
    padding-top: 96px !important;   /* espacio real bajo el header */
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* 3) Imagen hero: sin “92vh” en vertical */
  .hero-image img{
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover;
  }

  /* 4) Tarjeta hero: apilada, centrada, sin posición absoluta */
  .hero-card{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(100% - 32px) !important;
    max-width: 560px !important;
    margin: 18px auto 0 !important;
  }

  /* 5) SERVICIOS: 1 columna en vertical (evita textos “en columna”) */
  .services-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .services-grid > .service-card{
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  /* La wide se comporta como card normal en 1 columna */
  .services-grid > .service-card.service-card-wide{
    grid-column: auto !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }

  /* 6) Un poco de aire lateral premium */
  .services-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* =========================================================
   NAV MÓVIL (portrait) — mostrar Blog + Contacto
   No toca desktop ni móvil horizontal
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait){

  .topbar-inner{
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    padding: 14px 16px !important;
  }

  /* La marca arriba y la nav debajo, en 2 líneas si hace falta */
  .brand{
    width: 100% !important;
    line-height: 1.1;
  }

  .nav{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    justify-content: flex-start !important;
  }

  /* OJO: en tu CSS hay un bloque que mete margin-left: 28px en .topbar .nav a */
  .topbar .nav a{
    margin-left: 0 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .nav-cta{
    margin-left: 0 !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
  }
}
/* =========================================================
   FORM CONTACTO (portrait) — evitar cortes de placeholder
   ========================================================= */
@media (max-width: 820px) and (orientation: portrait){

  .contact-grid{
    grid-template-columns: 1fr !important; /* una columna: más lujo y legible */
    gap: 14px !important;
  }

  .contact-form input,
  .contact-form textarea{
    font-size: 15px !important;
    padding: 14px 14px !important;
  }
}