/* ============================================================
   mobile.css — ajustes responsive globales para Akakua'a
   Se carga en todas las páginas y sólo aplica en pantallas
   pequeñas mediante media queries.
   ============================================================ */

/* --- Seguridad de overflow global ---------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; }

/* --- Botón hamburguesa del homepage: no dejar que el flex lo apachurre --- */
header.site-header .mobile-btn{
  flex-shrink:0!important;
  min-width:44px;min-height:44px;
}
header.site-header .mobile-btn > div{gap:5px!important}
header.site-header .mobile-btn > div > span{
  width:22px!important;height:3px!important;background:var(--green,#2d4a3a)!important;
  border-radius:2px;display:block;
}

/* --- Header sub-páginas: botón hamburguesa ------------------- */
.mobile-menu-btn{
  display:none;
  width:44px;height:44px;border-radius:14px;background:#fff;
  border:1px solid rgba(45,74,58,.12);
  box-shadow:0 4px 14px -6px rgba(43,35,64,.2);
  flex-direction:column;
  align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;padding:0;
}
.mobile-menu-btn span{
  display:block;width:22px;height:3px;background:var(--green,#2d4a3a);border-radius:2px;
  transition:background .2s;
}
.mobile-menu-btn span + span{margin-top:4px}
.mobile-menu-btn[aria-expanded="true"] span{background:var(--rose,#c98a8a)}

.mobile-drawer{
  display:none;
  position:fixed!important;left:12px!important;right:12px!important;top:72px!important;
  background:#fff;border-radius:20px;padding:12px;
  box-shadow:0 20px 50px -20px rgba(45,74,58,.35);
  flex-direction:column;gap:2px;z-index:9999!important;
}
.mobile-drawer.is-open{display:flex}
.mobile-drawer a{
  padding:12px 16px;border-radius:12px;color:var(--green);
  font-weight:600;font-size:15px;text-decoration:none;
}
.mobile-drawer a.active,.mobile-drawer a:hover{background:var(--rose-pale);color:var(--rose)}

/* --- Breakpoints -------------------------------------------- */
@media (max-width:960px){
  /* Mostrar botón hamburguesa en las subpáginas */
  header.site .mobile-menu-btn{display:inline-flex!important}
  header.site{position:relative}
  header.site .wrap{gap:12px}
  /* Ocultar CTA "Escribinos" del header en móviles (inline CSS lo declara
     después, por eso necesita !important) */
  header.site .cta,
  header.site a.cta{display:none!important}
}
@media (max-width:640px){
  /* Header más compacto en móvil */
  header.site,header.site-header{padding:10px 14px!important}
  header.site .brand img{width:44px!important;height:44px!important}
  header.site .brand .name{font-size:19px!important}
  header.site .brand .tag{display:none!important}
}

@media (max-width:820px){
  /* Subpáginas: reducir padding en secciones anchas */
  section.hero,
  section.filters,
  section.catalog,
  section.pricing-note,
  section.cta,
  section.contenido{padding-left:18px!important;padding-right:18px!important}

  /* Historia / grids que no tienen media query específica */
  .grid-2, .cols-2{grid-template-columns:1fr!important}
}

@media (max-width:640px){
  /* Tipografía general un poco más chica en móvil */
  h1{font-size:clamp(30px,8vw,42px)!important;line-height:1.05!important}
  h2{font-size:clamp(24px,6.6vw,34px)!important;line-height:1.1!important}
  h3{font-size:clamp(19px,5vw,24px)!important}

  /* Header brand: reducir logo y tagline */
  header.site .brand img,
  .site-header a img[src*="akakuaa.png"]{width:46px!important;height:46px!important}
  header.site .brand .name{font-size:20px!important}
  header.site .brand .tag{font-size:9px!important;letter-spacing:.12em!important}

  /* Breadcrumb más compacto */
  .breadcrumb{padding:16px 18px 0!important;font-size:12.5px!important}

  /* CTA sections: reducir padding interno */
  section.cta .wrap{padding:36px 22px!important;border-radius:24px!important}
  section.cta .buttons{flex-direction:column}
  section.cta .btn-primary,section.cta .btn-ghost{width:100%;text-align:center}

  /* Pricing note: apilar */
  section.pricing-note .wrap{padding:22px!important;border-radius:22px!important;gap:14px!important}

  /* Footer del sitio: apilar */
  footer.site .wrap{flex-direction:column;text-align:center;gap:18px}
  footer.site .brand{justify-content:center}
}

@media (max-width:520px){
  /* Homepage: forzar que grids que aún no colapsan lo hagan */
  .steps-grid{grid-template-columns:1fr!important;gap:14px!important}
  .fv2-hang,.formas-grid,.dif-cards,.branch-grid,.hero-grid,
  .esencia-wrap,.cv-grid,.cierre-inner,.foot-grid{grid-template-columns:1fr!important;gap:28px!important}
  .vision-path{grid-template-columns:1fr!important;gap:20px!important}
  .ig-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}

  /* Padding interno de secciones */
  section{padding-left:0;padding-right:0}
  section > div[style*="padding"]{padding-left:18px!important;padding-right:18px!important}

  /* Header padding menor */
  header.site,.site-header{padding:10px 14px!important}

  /* Hero perchero: reducir altura y overflow horizontal */
  .perchero-box{overflow-x:hidden!important}
  .perchero-viewport{touch-action:pan-x pan-y!important}

  /* Botones tap target mínimo */
  a[style*="padding:12px 20px"],
  a[style*="padding:14px 26px"],
  button{min-height:44px}
}

/* --- Iframes / mapas responsive ------------------------------ */
iframe{max-width:100%}

/* --- Sucursales: apilar el grid de sucursales ---------------- */
@media (max-width:900px){
  .branch-grid{grid-template-columns:1fr!important;max-width:520px;margin-left:auto;margin-right:auto}
}

/* --- FAQ / historia: tipografía y ancho ---------------------- */
@media (max-width:640px){
  section.contenido .grid{gap:24px!important}
  section.contenido p, .prod__note, .prod__title{overflow-wrap:break-word}
}

/* --- Evitar que texto largo desborde ------------------------- */
p, h1, h2, h3, h4, a, span, div, li{overflow-wrap:break-word;word-wrap:break-word}

/* ============================================================
   Perchero interactivo (homepage) — modo mobile simplificado
   En móvil convertimos el perchero decorativo en una grilla
   uniforme de 2 columnas con todas las categorías (incluyendo
   las que estaban absolutas: calzados y juguetes).
   ============================================================ */
@media (max-width:720px){
  .perchero-box{
    background:transparent;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    padding:8px 14px 8px!important;
    max-width:520px;margin:0 auto;
  }
  .perchero-img{display:none!important}
  .perchero-viewport,.perchero-track{
    display:contents!important;
  }
  /* Card horizontal: icono a la izq, texto a la der, chevron al final */
  .prenda,.prenda-fija{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
    transform:none!important;
    width:100%!important;height:auto!important;min-width:0!important;
    margin:0!important;
    background-color:#fff!important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c98a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>")!important;
    background-repeat:no-repeat!important;
    background-position:right 14px center!important;
    background-size:14px 14px!important;
    border-radius:14px!important;
    padding:10px 34px 10px 10px!important;
    box-shadow:0 6px 18px -12px rgba(45,74,58,.28);
    border:1px solid rgba(228,181,176,.28);
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    text-align:left!important;
    animation:none!important;
  }
  .prenda:hover,.prenda:focus-visible,.prenda.is-active,
  .prenda-fija:hover,.prenda-fija:focus-visible,.prenda-fija.is-active{
    transform:none!important;filter:none!important;
  }
  .prenda-item{
    width:56px!important;height:56px!important;max-width:56px!important;
    object-fit:contain!important;
    filter:none!important;
    margin:0!important;
    transform:none!important;
    animation:none!important;
    position:static!important;
    display:block!important;
    flex-shrink:0!important;
    background:linear-gradient(135deg,var(--rose-pale,#f2d9d5),var(--sand,#e8dcc4))!important;
    border-radius:12px!important;
    padding:6px!important;
  }
  .prenda:hover .prenda-item,.prenda:focus-visible .prenda-item,.prenda.is-active .prenda-item,
  .prenda-fija:hover .prenda-item,.prenda-fija:focus-visible .prenda-item,.prenda-fija.is-active .prenda-item{
    transform:none!important;animation:none!important;filter:none!important;
  }
  .prenda-card{
    position:static!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;
    background:transparent!important;box-shadow:none!important;border:none!important;
    padding:0!important;width:auto!important;flex:1 1 auto!important;min-width:0!important;
    align-items:flex-start!important;text-align:left!important;
    gap:2px!important;
  }
  .prenda-card__chip,.prenda-card__avail,.prenda-card__cta{display:none!important}
  .prenda-card__title{font-size:15px!important;line-height:1.2!important;color:var(--green);margin:0!important;text-align:left!important}
  .prenda-card__cat{font-size:12px!important;color:var(--text-soft);margin:0!important;letter-spacing:.02em;text-align:left!important}
  .perchero-arrow,.perchero-controls{display:none!important}
  .prenda-item.is-placeholder{min-height:0!important;width:56px!important;height:56px!important;border-radius:12px!important}
  /* Reset: en la lista vertical el último no necesita centrado especial */
  .perchero-box > .prenda-fija:last-of-type{
    grid-column:auto!important;justify-self:auto!important;
    width:100%!important;max-width:100%!important;
  }

  /* Sección esencia: imágenes decorativas rotas → ocultar */
  img[src*="public/esencia/"]{max-width:80px}
}

/* Hero homepage — reencuadrar la foto en móvil para que los niños
   no queden tapados por el texto/CTA. Movemos el foco hacia la
   parte baja-derecha de la imagen (donde hay césped y aire). */
@media (max-width:820px){
  section#inicio[data-parallax="true"]{
    background-position:82% 100%, 82% 100%!important;
    background-size:cover,cover!important;
    min-height:auto!important;
  }
  section#inicio .hero-grid{min-height:auto!important;padding:20px 0 320px!important}
  section#inicio .hero-text{padding:24px 20px 8px!important}
}

/* Cinta métrica (sección esencia) — monito más grande en móvil */
@media (max-width:640px){
  .mono-wrap{width:32%!important;left:34%!important}
  .mono-height{font-size:12px!important;padding:3px 8px!important}
  .hotspot--mono{width:26px!important;height:26px!important;font-size:16px!important}
  .cinta{max-width:340px!important;margin:0 auto}
  .cinta__base{max-height:520px!important}
}
@media (max-width:400px){
  .mono-wrap{width:36%!important;left:32%!important}
}

/* ============================================================
   Mascota flotante (jirafita) — mejoras en móvil.
   Anclarla al fondo real, no muy alta. Botón minimizar más
   prolijo (círculo verde en la esquina superior derecha).
   ============================================================ */
@media (max-width:820px){
  .jirafita-mascota{
    right:10px!important;
    bottom:10px!important;
    gap:6px!important;
    align-items:flex-end!important;
  }
  .jirafita-wrap,.jirafita-img{width:78px!important;height:78px!important}
  .jirafita-globo{
    max-width:180px!important;
    font-size:12.5px!important;
    padding:9px 12px!important;
    margin-bottom:8px!important;
  }
  .jirafita-cabeza{width:50px!important;height:50px!important}
  .jirafita-min-btn{
    width:22px!important;height:22px!important;
    top:-4px!important;right:-4px!important;left:auto!important;
    background:var(--green)!important;
    color:#fff!important;
    font-size:14px!important;
    border:2px solid #fff!important;
    box-shadow:0 3px 8px -2px rgba(45,74,58,.5)!important;
  }
}

/* ============================================================
   Sección "Cuidamos cada tesoro" — cards en móvil.
   Los 3 pasos se muestran como cards horizontales compactas
   (icono a la izq, título+descripción a la der).
   ============================================================ */
@media (max-width:820px){
  #diferentes .dif-cards{
    grid-template-columns:1fr!important;
    gap:12px!important;
    max-width:100%!important;
  }
  #diferentes .dif-card{
    flex-direction:row!important;
    align-items:center!important;
    text-align:left!important;
    gap:16px!important;
    padding:14px 16px!important;
    border-radius:16px!important;
    animation:none!important;
  }
  #diferentes .dif-card-img{
    width:64px!important;height:64px!important;max-width:64px!important;
    margin:0!important;flex-shrink:0;
    transform:none!important;
  }
  #diferentes .dif-card-line{display:none!important}
  #diferentes .dif-card h3{
    font-size:15.5px!important;line-height:1.2!important;
    margin:0 0 4px!important;
  }
  #diferentes .dif-card h3 br{display:none}
  #diferentes .dif-card p{
    font-size:13px!important;line-height:1.45!important;
    margin:0!important;
  }
  #diferentes .dif-card p br{display:none}
  /* Envolver texto en un div implícito: aseguramos que h3+p ocupen el resto */
  #diferentes .dif-card > h3,
  #diferentes .dif-card > p{flex:1 1 auto;min-width:0}
  #diferentes .dif-card:hover{transform:none!important}
  #diferentes .dif-card:hover .dif-card-img{transform:none!important}
}

/* ============================================================
   Sección "Cuidamos cada tesoro" — camino con estaciones.
   En móvil las estaciones se posicionan absolutas y las
   etiquetas se recortan. Las convertimos en grilla 2x2.
   ============================================================ */
@media (max-width:820px){
  .dif-camino{
    position:relative;min-height:0!important;max-width:100%!important;
    padding:20px 4px!important;
  }
  /* Reemplazar el path SVG del desktop por uno adecuado a la grilla 2x2:
     un zigzag punteado que va (top-left → top-right → bottom-left → bottom-right) */
  .dif-camino-svg{
    display:block!important;
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    z-index:0!important;pointer-events:none!important;opacity:.75;
  }
  .dif-camino-svg > path{display:none}
  .dif-camino::before{
    content:"";
    position:absolute;inset:20px 4px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M 20 22 C 40 12, 60 12, 80 22 C 90 40, 10 60, 20 78 C 40 88, 60 88, 80 78' stroke='%23c98a8a' stroke-width='.7' fill='none' stroke-dasharray='2 3' stroke-linecap='round'/></svg>");
    background-size:100% 100%;background-repeat:no-repeat;
    pointer-events:none;z-index:0;
  }
  .dif-camino{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:20px 12px!important;
  }
  .dif-estacion{position:relative!important;z-index:1!important}
  .dif-estacion{
    position:static!important;
    flex-direction:column!important;
    text-align:center!important;
    gap:8px!important;
    animation:none!important;
    top:auto!important;left:auto!important;bottom:auto!important;right:auto!important;
  }
  .dif-estacion-img{width:80px!important;height:80px!important;padding:10px!important}
  .dif-estacion span{
    white-space:normal!important;
    font-size:15px!important;
    line-height:1.2!important;
  }
  .dif-jirafa-wrap{
    position:static!important;
    transform:none!important;
    margin:24px auto 0!important;
    grid-column:1/-1!important;
    left:auto!important;
  }
}

/* ============================================================
   Sección "Comunidad viva" — 4 sucursales.
   Grilla 2x2 con la tarjeta al medio spanning 2 columnas.
     [Centro] [Norte]
     [   Tarjeta   ]
     [  Sur  ] [Este]
   ============================================================ */
@media (max-width:820px){
  .cv-scene{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:14px!important;
    min-height:0!important;
    padding:8px 4px!important;
  }
  .cv-curves{display:none!important}
  .cv-card{grid-column:1 / -1!important;grid-row:2!important;justify-self:center!important}
  .cv-branch{
    position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;
    margin:0!important;
    justify-self:stretch!important;
    animation:none!important;
  }
  .cv-branch--tl{grid-column:1!important;grid-row:1!important}
  .cv-branch--tr{grid-column:2!important;grid-row:1!important}
  .cv-branch--bl{grid-column:1!important;grid-row:3!important}
  .cv-branch--br{grid-column:2!important;grid-row:3!important}
}

/* ============================================================
   Puntitos del carrusel de tesoros: círculos pequeños uniformes
   ============================================================ */
@media (max-width:640px){
  .tesoros-dots{gap:8px!important;margin-top:4px;align-items:center}
  .tesoros-dot{
    width:8px!important;height:8px!important;
    min-width:8px!important;min-height:8px!important;
    border-radius:50%!important;
    background:rgba(45,74,58,.25)!important;
    transform:none!important;
    padding:0!important;
    display:inline-block!important;
    flex:0 0 8px!important;
    line-height:0!important;
    font-size:0!important;
  }
  .tesoros-dot.is-active{
    background:var(--rose)!important;
    transform:none!important;
    width:8px!important;height:8px!important;
  }
}

/* ============================================================
   Ocultar SVG decorativos de plantas / ramas / olivos en móvil.
   En pantallas chicas quedan como manchas raras.
   ============================================================ */
@media (max-width:820px){
  .cierre-rama,
  .vision-plant,
  .cv-doodle--3{display:none!important}
}