/* ===================================================
   RESPONSIVE MOBILE OVERRIDES — Servinfancia Clone
   Breaks the 980px desktop lock and makes the Wix
   clone render properly at any viewport width.

   Strategy: Override only what causes overflow.
   Preserve Wix's internal CSS Grid layout engine.
   =================================================== */

@media (max-width: 980px) {

  /* ============================================
     PHASE 1: Kill the 980px lock at root level
     ============================================ */

  :root, :host, .spxThemeOverride {
    --site-width: 100% !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body:not(.responsive) #site-root {
    min-width: 0 !important;
    width: 100% !important;
  }

  #site-root {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #masterPage {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  #SITE_CONTAINER {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #PAGES_CONTAINER,
  #SITE_PAGES {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Page background — fixed positioned, needs width fix */
  ._7xVID {
    min-width: 0 !important;
    width: 100% !important;
  }

  #pageBackground_e6zct,
  #bgLayers_pageBackground_e6zct,
  #bgMedia_pageBackground_e6zct {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Pinned layers (nav + chat) */
  .QED8q1 {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Page wrapper and page view */
  .pTvOx2,
  .JJb9Mt,
  .i0StQr,
  .wH18kY {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* The page content layer (.pTvOx2) uses margin-left centering */
  body:not(.device-mobile-optimized) .pTvOx2,
  body:not(.device-mobile-optimized) .H2MmBb {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Strip/section centering override */
  body:not(.device-mobile-optimized) ._c_gnD {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Containere6zct (main page container) */
  #Containere6zct,
  #e6zct {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /* ============================================
     PHASE 2: Main page grid container
     Keep as grid but fix grid-area margin calc
     ============================================ */

  [data-mesh-id="Containere6zctinlineContent"],
  [data-mesh-id="Containere6zctinlineContent-gridContainer"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Fix the grid children: their margin uses calc((100% - 980px) * 0.5) which
     goes negative on small screens. Override to 0. */
  [data-mesh-id="Containere6zctinlineContent-gridContainer"] > * {
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* ALL grid container children need left:0 — the original Wix CSS uses
     [data-mesh-id=X-gridContainer] > [id=Y] with left:Npx.
     This wildcard with !important beats that specificity. */
  [data-mesh-id$="inlineContent-gridContainer"] > [id] {
    left: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }

  /* Margin calc((100% - 980px) * 0.5) goes negative — kill it */
  [data-mesh-id$="inlineContent-gridContainer"] > [id],
  [data-mesh-id$="inlineContent-gridContainer"] > interact-element > [id] {
    margin-left: 0 !important;
    left: 0 !important;
  }


  /* ============================================
     PHASE 3: Column strips → vertical stack
     ============================================ */

  .CeUMmm.wixui-column-strip {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* .Ak0vpt is the inner flex wrapper of column strips */
  .Ak0vpt {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    column-gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Individual columns inside strips */
  .Ak0vpt > * {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Column content wrappers */
  .FDI5TK.wixui-column-strip__column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Column backgrounds */
  .FDI5TK .QG9w8P,
  .FDI5TK .ktMZav {
    width: 100% !important;
  }

  /* Inner inline content inside columns — DON'T force min-height to 0 */
  .FDI5TK [data-mesh-id$="inlineContent"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Column grid containers — make them flow vertically */
  .FDI5TK [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    height: auto !important;
    position: relative !important;
  }

  /* Children of column grid containers — reset absolute positioning */
  .FDI5TK [data-mesh-id$="inlineContent-gridContainer"] > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Background layers inside column strips */
  .CeUMmm .ktMZav,
  .CeUMmm .QG9w8P {
    width: 100% !important;
  }

  /* Overlay layers */
  .EaoiSu, .CmHRsG, .H2MmBb {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Anchor navigation dividers */
  .qe3oTb.ignore-focus {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }


  /* ============================================
     PHASE 4: Header & Navigation
     ============================================ */

  #SITE_HEADER {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #SITE_HEADER .kBvIHj,
  #SITE_HEADER .YmWgf4,
  #SITE_HEADER .EaoiSu,
  #SITE_HEADER .CmHRsG,
  #SITE_HEADER .H2MmBb {
    width: 100% !important;
  }

  /* Hide desktop pinned nav — too wide */
  #comp-igauz7ee-pinned-layer {
    display: none !important;
  }

  /* Logo */
  #comp-jkczldk9 {
    max-width: 180px !important;
  }

  #comp-jkczldk9 img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Header grid container — keep horizontal, just center */
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 12px !important;
    width: 100% !important;
    height: auto !important;
  }

  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > * {
    position: relative !important;
    left: auto !important;
    margin: 0 !important;
  }


  /* ============================================
     PHASE 5: Hero Video
     ============================================ */

  #comp-l3iz7i6v {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
  }

  #comp-l3iz7i6v video,
  #comp-l3iz7i6v_video {
    width: 100% !important;
    height: auto !important;
  }

  #comp-l3iz7i6v_img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Video container has its own inline content grid */
  [data-mesh-id="comp-l3iz7i6vinlineContent"],
  [data-mesh-id="comp-l3iz7i6vinlineContent-gridContainer"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Video overlay controls */
  #comp-l3iz7ia2,
  #comp-l3iz7ia8 {
    position: relative !important;
    left: auto !important;
    margin: 8px auto !important;
  }


  /* ============================================
     PHASE 6: "Nosotros" Section (3-column cards)
     ============================================ */

  /* The three card containers */
  #comp-ig9krioy,
  #comp-ig96d6f5,
  #comp-ig96e99p {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Card images */
  #comp-ig27xhrf,
  #comp-ig27xhr7,
  #comp-ig27xhrf1 {
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .cs40a3 img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }


  /* ============================================
     PHASE 7: Mission text Section
     ============================================ */

  #comp-igcap5nm,
  #comp-jkczr8rr {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ============================================
     PHASE 8: Products Section (background image + text)
     This section has a special structure:
     - Column mediairc22j4k11 with background image
     - Inside: comp-igahubrl (absolutely positioned container)
     ============================================ */

  /* Fix the column that has zero height */
  #mediairc22j4k11 {
    min-height: 500px !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The inline content of this column needs min-height */
  [data-mesh-id="mediairc22j4k11inlineContent"] {
    min-height: 500px !important;
  }

  /* comp-igahubrl — large overlapping container (2001px wide in desktop) */
  #comp-igahubrl {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    position: relative !important;
    left: 0 !important;
    overflow: hidden !important;
  }

  /* Its inner inline content */
  [data-mesh-id="comp-igahubrlinlineContent"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Its inner grid container */
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    height: auto !important;
    position: relative !important;
  }

  /* Children with very large left values (1423px+) */
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > [id="comp-ig97s46y"],
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > interact-element > [id="comp-ig97s46y"],
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > [id="comp-ig97s470"],
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > interact-element > [id="comp-ig97s470"],
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > [id="comp-ig28txpj"],
  [data-mesh-id="comp-igahubrlinlineContent-gridContainer"] > interact-element > [id="comp-ig28txpj"] {
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Background image for this section */
  #bgMedia_mediairc22j4k11 {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
  }

  #bgMedia_mediairc22j4k11 img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }


  /* ============================================
     PHASE 9: Gallery Section (matrix gallery)
     ============================================ */

  /* Matrix gallery container */
  #comp-igay64r8 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Gallery items grid — rearrange to 2 columns */
  #comp-igay64r8 .pSvFkv {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Individual gallery items */
  #comp-igay64r8 .gJsnEs {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }

  #comp-igay64r8 .gJsnEs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }


  /* ============================================
     PHASE 10: Responsibility/Certifications
     ============================================ */

  /* Slider gallery (logos) — allow horizontal scroll */
  #comp-jkd1aolr {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* The items container of the slider stays wide */
  #items_comp-jkd1aolr {
    width: auto !important;
  }

  /* Text blocks in this section */
  #comp-ig99wz1u,
  #comp-jkd14dyu,
  #comp-jkd16yyv,
  #comp-jkd18ko9 {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* ============================================
     PHASE 11: Contact Section
     ============================================ */

  /* Contact text */
  #comp-ig69un0m {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Contact form wrapper and form */
  #comp-ig6a23xj {
    width: 100% !important;
    max-width: 100% !important;
  }

  #comp-keuz2ril {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form inputs */
  .Q1MQrw,
  .fRbOAc {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form inner grid */
  [data-mesh-id="comp-ig6a23xjinlineContent-gridContainer"],
  [data-mesh-id="comp-keuz2rilinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    height: auto !important;
    position: relative !important;
  }

  [data-mesh-id="comp-ig6a23xjinlineContent-gridContainer"] > *,
  [data-mesh-id="comp-keuz2rilinlineContent-gridContainer"] > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
  }

  /* Social media icons */
  #comp-jkd0z3t9,
  #comp-l3j33hxk {
    width: 50px !important;
    height: 50px !important;
    margin: 4px !important;
  }


  /* ============================================
     PHASE 12: Footer
     ============================================ */

  #SITE_FOOTER {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #SITE_FOOTER .kBvIHj,
  #SITE_FOOTER .EaoiSu,
  #SITE_FOOTER .CmHRsG,
  #SITE_FOOTER .H2MmBb,
  #SITE_FOOTER .YmWgf4 {
    width: 100% !important;
  }

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    display: flex !important;
    justify-content: center !important;
    padding: 8px !important;
    width: 100% !important;
    height: auto !important;
  }

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] > * {
    position: relative !important;
    left: auto !important;
    margin: 0 !important;
  }


  /* ============================================
     PHASE 13: Chat Widget
     ============================================ */

  #comp-kyx8kvtk {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
  }


  /* ============================================
     PHASE 14: Global element safety net
     ============================================ */

  /* Fluid images */
  img {
    max-width: 100% !important;
  }

  video {
    max-width: 100% !important;
  }

  /* Rich text — prevent overflow */
  .wixui-rich-text {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Horizontal lines */
  .nJiBti.wixui-horizontal-line {
    width: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
  }

  /* Text alignment for section titles — center on mobile */
  .UwkEpO.wixui-rich-text,
  .N8MGzv.wixui-rich-text {
    text-align: center !important;
  }

  /* Text content containers */
  .gpDCD5 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Image wrappers */
  .W4V2qg.wixui-image {
    max-width: 100% !important;
  }

  /* Background overlay layers */
  .QG9w8P, .LNYVZi, .ROWgFb {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Anchors */
  #nosotros, #productos, #responsabilidad, #contacto {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================
   EXTRA SMALL SCREENS (< 480px phones)
   ============================================ */
@media (max-width: 480px) {

  /* Font scaling */
  .wixui-rich-text h1 span,
  .wixui-rich-text h2 span {
    font-size: clamp(20px, 5vw, 36px) !important;
    line-height: 1.3 !important;
  }

  .wixui-rich-text h3 span,
  .wixui-rich-text h4 span {
    font-size: clamp(16px, 4vw, 24px) !important;
    line-height: 1.3 !important;
  }

  .wixui-rich-text p span,
  .wixui-rich-text p font {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    line-height: 1.5 !important;
  }

  /* Gallery: 1 column on tiny screens */
  #comp-igay64r8 .pSvFkv {
    grid-template-columns: 1fr !important;
  }

  /* Logo */
  #comp-jkczldk9 {
    max-width: 140px !important;
  }
}


/* ============================================
   TABLET SPECIFIC (481–980px)
   ============================================ */
@media (min-width: 481px) and (max-width: 980px) {

  /* Gallery: 3 columns */
  #comp-igay64r8 .pSvFkv {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}