/* Santa Orla · calibración visual final · bloque A · 2026-08-31
   La cabecera/hero conserva la geometría de producción. Sólo el bloque Foto de grup
   se calibra al montaje final; los stickers aparecen exclusivamente en panorámico. */

.deco{
  display:none!important;position:absolute!important;pointer-events:none!important;z-index:8!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;
}

@media (min-width:768px){
  #foto-de-grupo .group-carousel{aspect-ratio:3/2!important;height:auto!important;max-height:none!important;background:#e8e9e5!important}
  #foto-de-grupo .group-slide img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
}


/* Tablet 768–1023: evita el desbordamiento heredado del baseline sin afectar portátil. */
@media (min-width:768px) and (max-width:1023px){
  #foto-de-grupo{
    min-height:700px!important;padding:54px 28px 48px!important;display:grid!important;
    grid-template-columns:250px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto auto!important;
    column-gap:28px!important;row-gap:8px!important;align-content:center!important;overflow:hidden!important;
  }
  #foto-de-grupo .group-tag{font-size:34px!important;line-height:.9!important}
  #foto-de-grupo h2{width:250px!important;max-width:250px!important;margin-top:7px!important;font-size:36px!important;line-height:.93!important}
  #foto-de-grupo .group-subtitle{width:240px!important;max-width:240px!important;margin-top:14px!important;font-size:18px!important;line-height:1!important}
  #foto-de-grupo .group-highlight{width:238px!important;max-width:238px!important;margin-top:11px!important;font-size:13px!important;line-height:1.06!important}
  #foto-de-grupo .group-detail{width:235px!important;max-width:235px!important;margin-top:11px!important}
  #foto-de-grupo .group-promo,#foto-de-grupo .carousel-wrap,#foto-de-grupo .group-carousel{width:100%!important;max-width:100%!important}
  #foto-de-grupo .group-promo{height:44px!important;min-height:44px!important;overflow:hidden!important}
  #foto-de-grupo .group-carousel{aspect-ratio:3/2!important;height:auto!important;max-height:none!important}
  #foto-de-grupo .dots{margin-top:9px!important;gap:7px!important}
  #foto-de-grupo .dot{width:8px!important;height:8px!important}
}

/* Tablet / desktop estrecho: misma arquitectura, escalada sin stickers. */
@media (min-width:1024px) and (max-width:1359px){
  #foto-de-grupo{
    min-height:700px!important;padding:58px var(--prelaunch-gutter) 58px var(--prelaunch-gutter)!important;display:grid!important;
    grid-template-columns:300px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto auto!important;
    column-gap:40px!important;row-gap:8px!important;align-content:center!important;overflow:visible!important;
  }
  #foto-de-grupo .group-tag{font-size:40px!important;line-height:.9!important}
  #foto-de-grupo h2{width:300px!important;max-width:300px!important;margin-top:7px!important;font-size:43px!important;line-height:.93!important}
  #foto-de-grupo .group-subtitle{width:290px!important;max-width:290px!important;margin-top:18px!important;font-size:21px!important;line-height:1!important}
  #foto-de-grupo .group-highlight{width:285px!important;max-width:285px!important;margin-top:14px!important;font-size:15px!important;line-height:1.05!important}
  #foto-de-grupo .group-detail{width:280px!important;max-width:280px!important;margin-top:14px!important}
  #foto-de-grupo .group-promo,#foto-de-grupo .carousel-wrap,#foto-de-grupo .group-carousel{width:100%!important}
  #foto-de-grupo .group-promo{height:50px!important;min-height:50px!important}
  #foto-de-grupo .dots{margin-top:11px!important;gap:8px!important}
  #foto-de-grupo .dot{width:9px!important;height:9px!important}
}

/* Portátil grande / desktop: núcleo exacto de la composición aprobada. */
@media (min-width:1360px){
  #foto-de-grupo{
    position:relative!important;min-height:760px!important;padding:72px var(--prelaunch-gutter) 64px var(--prelaunch-gutter)!important;display:grid!important;
    grid-template-columns:330px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto auto!important;
    column-gap:100px!important;row-gap:10px!important;justify-content:normal!important;align-content:center!important;overflow:visible!important;
  }
  #foto-de-grupo .group-tag{font-size:46px!important;line-height:.9!important;letter-spacing:-.035em!important}
  #foto-de-grupo h2{margin-top:8px!important;width:330px!important;max-width:330px!important;font-size:50px!important;line-height:.93!important;letter-spacing:-.038em!important}
  #foto-de-grupo .group-subtitle{margin-top:22px!important;width:315px!important;max-width:315px!important;font-size:24px!important;line-height:1!important}
  #foto-de-grupo .group-highlight{margin-top:18px!important;width:305px!important;max-width:305px!important;font-size:17px!important;line-height:1.05!important}
  #foto-de-grupo .group-detail{margin-top:18px!important;width:300px!important;max-width:300px!important}
  #foto-de-grupo .group-promo{width:100%!important;height:56px!important;min-height:56px!important;align-self:end!important}
  #foto-de-grupo .carousel-wrap{width:100%!important;position:relative!important;overflow:visible!important;align-self:start!important}
  #foto-de-grupo .group-carousel{width:100%!important;aspect-ratio:3/2!important;height:auto!important;max-height:none!important;overflow-x:auto!important}
  #foto-de-grupo .dots{margin-top:13px!important;gap:9px!important}
  #foto-de-grupo .dot{width:10px!important;height:10px!important}
}

/* Sólo panorámico: decoración oficial en el espacio lateral. */
@media (min-width:1800px){
  #foto-de-grupo .deco{display:block!important}
  #foto-de-grupo .deco-sello-a{
    width:90px!important;
    height:90px!important;
    left:-60px!important;
    top:80px!important;
    background-image:url('../../images/marca/aprobados-20260829/circulo-rosa-berenjena.png')!important;
  }
  #foto-de-grupo .deco-sello-b{
    width:360px!important;
    height:293px!important;
    left:-160px!important;
    bottom:-30px!important;
    background-image:url('../../images/marca/aprobados-20260829/isotipo-marron-amarillo.png')!important;
    transform:rotate(-9deg)!important;
  }
  #foto-de-grupo .deco-sello-c{
    width:308px!important;
    height:216px!important;
    right:-170px!important;
    bottom:-20px!important;
    background-image:url('../../images/marca/aprobados-20260829/santa-orla-naranja-beige_2Líneas.png')!important;
    transform:rotate(9deg)!important;
  }
    #foto-de-grupo .deco-sello-d{
    display:none!important;
  }
   #foto-de-grupo .deco-sello-e{
    width:300px!important;
    height:300px!important;
    right:-220px!important;
    top:-70px!important;
    background-image:url('../../images/marca/aprobados-20260829/círculo.svg')!important;
  }

}

@media (max-width:1799px){#foto-de-grupo .deco{display:none!important}}

/* 2026-08-31 · correcciones de revisión PATCH-02 */
@media (min-width:768px){
  :host{background:#f9f3dd!important}

  /* HERO: el marco termina exactamente con la fotografía; sin franja gris inferior. */
  .hero-media{inset:26px 0 0!important;overflow:hidden!important;background:transparent!important}
  .hero-frame{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;transform:none!important}

  /* FOTO DE GRUPO: un único marfil, también en el espacio extra de 24/27 pulgadas. */
  #foto-de-grupo{
    background:#f9f3dd!important;
    box-shadow:0 0 0 100vmax #f9f3dd!important;
    clip-path:inset(0 -100vmax)!important;
  }
  #foto-de-grupo .carousel-wrap,
  #foto-de-grupo .group-carousel,
  #foto-de-grupo .group-slide,
  #foto-de-grupo .group-slide img{background:#f9f3dd!important}
}

/* Header fijo: dos líneas verticales invisibles atraviesan toda la página --
   borde izq del texto (foto-de-grupo/hero) y borde der de la foto/carrusel.
   Nada de contenido real puede salir de esas dos líneas, el header incluido.
   Todo vive dentro de main.integrated-page{max-width:1440px} centrado en
   pantallas anchas; el header es el único que se escapa de ese contenedor
   (width:100vw) para ir de borde a borde, así que su padding tiene que
   compensar ese corrimiento para caer exacto en las mismas dos líneas:
   - izquierda: borde del contenedor + gutter (así arranca el texto)
   - derecha: borde del contenedor + gutter (así arranca la foto/carrusel
     desde el recorte de 2026-09-13 -- antes llegaba a ras del contenedor,
     sin gutter, y esta regla compensaba eso; si se vuelve a sacar el
     gutter de la foto, hay que revertir esto también) */
@media (min-width:980px){
  .header{
    padding-left:max(var(--prelaunch-gutter), calc((100vw - 1440px)/2 + var(--prelaunch-gutter)))!important;
    padding-right:max(var(--prelaunch-gutter), calc((100vw - 1440px)/2 + var(--prelaunch-gutter)))!important;
  }
}