/* =========================
   FIXES MOBILE — VeriDigital
   ========================= */

html, body { overflow-x: hidden; }

img, video { max-width: 100%; height: auto; }

/* Evita que algo se “escape” del ancho del móvil */
* { box-sizing: border-box; }

/* -------------------------
   MOBILE (<= 767px)
   ------------------------- */
@media screen and (max-width: 767px) {

  /* Contenedor: menos padding lateral */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 1) El bug del texto “partido” (columna estrecha / spacing raro) */
  p, .text-block, .subheading, .paragraph {
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    max-width: 100% !important;
  }

  /* Si hay grids Webflow, en móvil siempre 1 columna */
  .w-layout-grid {
    grid-template-columns: 1fr !important;
    grid-auto-columns: 1fr !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
  }

  /* Si hay “columns/rows” legacy */
  .w-row, .w-col { width: 100% !important; display: block !important; }

  /* 2) Header roto: hacer que respire y que el botón no invada */
  .w-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ajusta logo */
  .w-nav-brand {
    max-width: 55% !important;
  }

  /* Botón CTA en header: más pequeño en móvil */
  .w-button {
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  /* Si tu CTA del header tiene clase propia, fuerza ancho auto */
  a.w-button, .button, .nav-button {
    width: auto !important;
    white-space: nowrap !important;
  }

  /* Botón hamburguesa: que no quede aplastado */
  .w-nav-button {
    margin-left: 8px !important;
  }

  /* 3) Hero: evitar tamaños gigantes */
  h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  /* Secciones: menos aire vertical */
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* -------------------------
   EXTRA SMALL (<= 479px)
   iPhone típico
   ------------------------- */
@media screen and (max-width: 479px) {

  .w-nav-brand { max-width: 50% !important; }

  /* CTA aún más compacta para que conviva con el menú */
  .w-button {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
}
/* =========================
   AJUSTES MOBILE — VeriDigital
   (pegar al final de custom.css)
   ========================= */

@media screen and (max-width: 767px) {

  /* 1) Arreglo del texto “en columnas raras” / huecos entre palabras */
  #Nosotros p,
  #Nosotros .paragraph,
  #Nosotros .text-block,
  #Nosotros .rich-text,
  #Nosotros .w-richtext,
  #Nosotros .w-richtext p {
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* Forzar 1 columna en grids (Webflow) dentro de Nosotros */
  #Nosotros .w-layout-grid {
    grid-template-columns: 1fr !important;
    grid-auto-columns: 1fr !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
  }

  /* Si el bloque "Nosotros" usa flex en horizontal, apílalo */
  #Nosotros [class*="flex"],
  #Nosotros [class*="wrapper"],
  #Nosotros [class*="container"] {
    flex-wrap: wrap !important;
  }

  /* 2) Header: que el CTA no se coma el espacio del menú */
  .w-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .w-nav-brand {
    max-width: 52% !important;
  }

  /* CTA (botón “Solicitar evaluación”) compacto en móvil */
  .w-nav a.w-button,
  .navbar a.w-button,
  .w-button {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Menú hamburguesa con aire */
  .w-nav-button {
    margin-left: 10px !important;
  }

  /* 3) Sección Servicios / tarjetas: menos aire y alineación */
  #Servicios .w-layout-grid {
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
  }

  /* Imágenes dentro de tarjetas: que no queden gigantes */
  #Servicios img {
    border-radius: 16px !important;
  }

  /* Titulares más equilibrados */
  h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  /* Padding general secciones */
  .section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* iPhone muy pequeño */
@media screen and (max-width: 479px) {
  .w-nav-brand { max-width: 48% !important; }

  .w-nav a.w-button,
  .w-button {
    padding: 9px 10px !important;
    font-size: 12.5px !important;
  }
}
/* =========================
   FIX DEFINITIVO MOBILE (Webflow export)
   ========================= */
@media screen and (max-width: 767px) {

  /* 1) Mata cualquier grid en 2+ columnas (causa típica del texto estrecho) */
  .w-layout-grid,
  [class*="grid"],
  [class*="Grid"]{
    grid-template-columns: 1fr !important;
    grid-auto-columns: 1fr !important;
    column-gap: 16px !important;
    row-gap: 24px !important;
    justify-items: stretch !important;
    align-items: start !important;
  }

  /* 2) Si algún bloque usa flex en horizontal, apílalo */
  [class*="flex"],
  [class*="Flex"],
  [class*="wrap"],
  [class*="Wrap"]{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 3) Anula anchos “fijos” que dejan el texto en una columna ridícula */
  p, .text-block, .paragraph, .subheading,
  .w-richtext, .w-richtext p,
  [class*="text"], [class*="Text"]{
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
  }

  /* 4) La imagen que acompaña al texto: centrada y con buen tamaño */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Si la imagen del bloque “Quiénes somos” está en una columna, que se centre */
  .w-layout-grid img,
  [class*="grid"] img {
    margin: 0 auto !important;
    display: block !important;
  }
}
/* =========================
   FIX QUIÉNES SOMOS (mobile) — fuerza 1 columna real
   ========================= */
@media screen and (max-width: 767px) {

  /* En móvil, cualquier layout de columnas basado en inline-block/float se rompe:
     forzamos a que todo ocupe el 100% del ancho. */
  section * {
    float: none !important;
  }

  /* Wrapper típicos de Webflow que a veces van en inline-block */
  section div,
  section p,
  section a,
  section img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Evita que un contenedor se quede en 50% o 35% por culpa de una clase */
  section [class*="col"],
  section [class*="column"],
  section [class*="Column"],
  section [class*="half"],
  section [class*="left"],
  section [class*="right"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Texto: sin justificado raro ni spacing */
  section p,
  section [class*="text"],
  section [class*="Text"] {
    text-align: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: normal !important;
  }

  /* Imagen del bloque: centrada y con tamaño razonable */
  section img {
    margin: 16px auto 0 auto !important;
    height: auto !important;
  }
}
/* =========================
   HOTFIX: Formulario (no romper Webflow form messages)
   ========================= */
@media screen and (max-width: 767px) {

  /* El formulario debe conservar su layout propio */
  #Contacto section *,
  section#Contacto *,
  #Contacto .w-form * {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Inputs y textarea sí deben ser full width */
  #Contacto input[type="text"],
  #Contacto input[type="email"],
  #Contacto input[type="tel"],
  #Contacto textarea {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Mensajes de Webflow: que se vean normales */
  #Contacto .w-form-done,
  #Contacto .w-form-fail {
    display: none; /* los ocultamos, porque tú ya rediriges a /gracias.html */
  }
}
/* =========================
   FIXES MOBILE — VeriDigital
   Pegar al FINAL de custom.css
   ========================= */

/* Evita desbordes horizontales */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }

/* =========================
   MOBILE (<= 767px)
   ========================= */
@media screen and (max-width: 767px) {

  /* ---------- CABECERA / NAV ---------- */
  /* Asegura que el header pueda “respirar” y no se monte el logo con el CTA */
  .navbar,
  .nav-bar,
  .navigation,
  .nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Si tu cabecera usa contenedor Webflow típico */
  .navbar .container,
  .nav .container,
  .navigation .container,
  .w-nav .w-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* Logo más compacto en móvil (evita que invada el CTA) */
  .brand,
  .w-nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 48% !important;
    min-width: 0 !important;
  }

  /* Si el logo es imagen dentro del brand */
  .brand img,
  .w-nav-brand img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }

  /* Texto del logo (si existe) que no empuje */
  .brand, .w-nav-brand {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Botón principal en header (Solicitar evaluación) */
  .navbar .w-button,
  .w-nav .w-button,
  a.w-button {
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Si hay menú hamburguesa */
  .menu-button,
  .w-nav-button {
    margin-left: 6px !important;
    flex: 0 0 auto !important;
  }


  /* ---------- IMAGEN “Conoce nuestra experiencia” ---------- */
  /* Esto recorta “bonito” en móvil para que no quede tan vertical */
  /* (Ajusta el selector si tu imagen tiene una clase concreta) */
  #Nosotros img,
  #QuienesSomos img,
  section#Nosotros img,
  section#QuienesSomos img {
    width: 100% !important;
    max-height: 240px !important;   /* prueba 220–280 según te guste */
    object-fit: cover !important;
    border-radius: 16px !important;
  }


  /* ---------- BOTONES “Consúltanos / Servicios” ---------- */
  /* Más consistentes en móvil */
  .button-group,
  .buttons,
  .cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .button-group .w-button,
  .buttons .w-button,
  .cta-buttons .w-button {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }


  /* ---------- FORMULARIO (MÓVIL) ---------- */
  /* Contenedor */
  #Contacto .form-block.w-form {
    width: 100% !important;
  }

  /* Form en columna y sin “cosas raras” */
  #Contacto form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Labels legibles (no partir “Correo electrónico” en mil líneas) */
  #Contacto label {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Inputs/textarea full width */
  #Contacto input[type="text"],
  #Contacto input[type="email"],
  #Contacto input[type="tel"],
  #Contacto textarea {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    font-size: 16px !important; /* evita zoom raro en iOS */
  }

  #Contacto textarea {
    min-height: 120px !important;
    resize: vertical !important;
  }

  /* Botón enviar */
  #Contacto input[type="submit"],
  #Contacto button[type="submit"] {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  /* Mensajes success/error: que no ocupen media pantalla en móvil */
  #Contacto .w-form-done > div,
  #Contacto .w-form-fail > div {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
}

/* =========================
   IMPORTANTE: Webflow + Formspree
   Evita “Gracias” y “Error” a la vez
   ========================= */
/* Si estás usando redirect (_redirect a gracias.html), NO quieres que Webflow
   intente manejar success/fail en la misma página. Esto minimiza efectos visuales. */
.w-form-done, .w-form-fail { display: none; }
/* =========================
   HEADER / NAV — MOBILE FIX
   ========================= */
@media screen and (max-width: 767px) {

  /* La barra de navegación (Webflow suele usar .w-nav) */
  .w-nav {
    position: sticky; /* si no quieres sticky, cambia a: position: relative; */
    top: 0;
    z-index: 9999;
    background: #fff; /* evita transparencias raras */
  }

  /* Contenedor interno del nav */
  .w-nav .w-container,
  .w-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Logo/brand (con texto) */
  .w-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 48%;
    z-index: 2;
  }

  /* Imagen del logo dentro del brand */
  .w-nav-brand img {
    height: 34px;        /* ajusta si quieres */
    width: auto;
    max-width: 100%;
    display: block;
  }

  /* Botón "Solicitar evaluación" (normalmente .w-button) */
  .w-nav .w-button {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
    z-index: 2;
  }

  /* Hamburguesa */
  .w-nav-button {
    margin-left: 6px;
    z-index: 3;
  }
}
/* =========================
   FORM — FULL WIDTH MOBILE
   ========================= */
@media screen and (max-width: 767px) {

  /* Asegura que el bloque y el form ocupen todo */
  .form-block,
  .w-form,
  .w-form form {
    width: 100%;
    max-width: 100%;
  }

  /* Inputs + textarea a ancho completo */
  .w-form input.w-input,
  .w-form textarea.w-input,
  .w-form input[type="text"],
  .w-form input[type="email"],
  .w-form input[type="tel"],
  .w-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block;
  }

  /* Botón del form a ancho completo (queda más pro en móvil) */
  .w-form input[type="submit"],
  .w-form .w-button {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
  }
}
/* =========================
   HEADER (MOBILE FIX)
   ========================= */
@media screen and (max-width: 767px) {

  /* Asegura que el contenedor de la cabecera sea flex y alinee todo */
  .navbar,
  .nav-bar,
  .nav {
    position: relative;
    z-index: 999;
  }

  /* En Webflow suele ser .container dentro de la navbar */
  .navbar .container,
  .nav .container,
  .nav-bar .container,
  .nav-container,
  .navigation-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* Logo/brand por delante (evita que quede “detrás” del botón) */
  .brand,
  .navbar-brand,
  .nav-brand {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 46% !important; /* deja sitio al CTA */
    overflow: hidden !important;
  }

  /* Imagen del logo: que no se coma el layout */
  .brand img,
  .navbar-brand img,
  .nav-brand img {
    height: 34px !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Si el texto “VeriDigital” va como texto, que no empuje */
  .brand,
  .navbar-brand,
  .nav-brand {
    white-space: nowrap !important;
  }

  /* Botón CTA: más pequeño en mobile */
  .w-button,
  .button,
  .btn {
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
  }

  /* Menú hamburguesa: que no quede pegado al borde derecho */
  .menu-button,
  .w-nav-button {
    margin-left: 6px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    position: relative !important;
    z-index: 6 !important;
  }
}
/* =========================
   FORM (MOBILE FIX)
   ========================= */
@media screen and (max-width: 767px) {

  /* Que el formulario ocupe el ancho del móvil */
  #Contacto .form-block,
  #Contacto .w-form,
  #Contacto form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inputs y textarea a 100% */
  #Contacto input.w-input,
  #Contacto textarea.w-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Textarea más grande para escribir cómodo */
  #Contacto textarea {
    min-height: 160px !important;
    resize: vertical !important;
  }

  /* Botón a ancho completo (opcional pero suele quedar mejor) */
  #Contacto input[type="submit"].w-button {
    width: 100% !important;
    display: block !important;
  }

  /* Oculta el honeypot pase lo que pase */
  #Contacto input[name="_gotcha"] {
    display: none !important;
  }

  /* Checkbox alineado bonito */
  #Contacto .privacy-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  #Contacto .privacy-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 3px !important;
  }

  #Contacto .privacy-row label {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}