/*
 * Santuario Winston · Punto 6
 * Capa de pulido visual mobile-first.
 * Se carga después de winston-enhancements.css para mantener los cambios
 * aislados y reversibles sin reescribir la base visual aprobada.
 */

/* El título contiene una palabra larga ("Transparencia").
 * La base heredada limita el bloque a 10/11ch y hace que la palabra desborde
 * su propio h1. Esta capa conserva el corte editorial en dos líneas sin
 * permitir que el texto salga de su caja en ningún breakpoint. */
.transparency-hero h1 {
  max-width: 14ch;
}

/* El badge de Padrinos contiene un span CMS dentro de otro span. La regla
 * heredada de enhancements estiliza todos los descendientes y convertía el
 * texto interior en un segundo pill absoluto, estrecho y vertical. */
.home-padrinos-media > span {
  display: inline-flex;
  width: auto;
  max-width: calc(100% - 40px);
  align-items: center;
  white-space: nowrap;
}

.home-padrinos-media > span > span {
  position: static;
  left: auto;
  bottom: auto;
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: inherit;
}

/* La sección Objetivo aplica estilos de dato a todos sus span. El texto CMS
   de los botones también vive dentro de un span, así que recupera el estilo
   del propio botón para no quedar blanco sobre fondo blanco. */
.goal-grid .button span {
  color: inherit;
  font-size: inherit;
  text-transform: none;
}

/* En escritorio muy ancho el clamp heredado alcanza 7rem y la palabra
 * "Transparencia" vuelve a superar la anchura de su columna. Mantener el
 * tamaño que ya funciona a 1366px evita ese salto sin alterar el layout. */
@media (min-width: 1600px) {
  .transparency-hero h1 {
    font-size: 6.4rem;
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .site-header {
    min-height: 74px;
  }

  .brand {
    min-width: 0;
    gap: 9px;
  }

  .brand img {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: contain;
  }

  .brand span {
    min-width: 0;
    font-size: clamp(.96rem, 4.2vw, 1.08rem);
    line-height: 1.04;
  }

  .home-hero h1,
  .page-hero h1,
  .legal-hero h1 {
    font-size: clamp(2.95rem, 13.2vw, 4.55rem);
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
  }

  .floating-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 30;
  }

  .floating-actions a {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    justify-content: center;
    padding: 0;
  }

  .floating-actions a span:last-child {
    display: none;
  }

  .storefront-hero-grid,
  .storefront-transparency-grid {
    grid-template-columns: 1fr;
  }

  .storefront-steps,
  .storefront-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storefront-books-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .site-header {
    min-height: 76px;
    padding-inline: 16px;
  }

  /* En móvil usamos la marca gráfica oficial como icono y el nombre real que
     ya existe en el HTML. Así no dependemos de la gran zona vacía del logo
     horizontal y la identidad queda legible incluso en 360 px. */
  .brand {
    gap: 10px;
  }

  .brand img {
    display: none;
  }

  .brand::before {
    content: "";
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    background: url("../favicon-winston-heart.svg") center / contain no-repeat;
  }

  .brand > span {
    display: grid;
    min-width: 0;
    gap: 3px;
    font-size: clamp(.95rem, 4.3vw, 1.08rem);
    line-height: 1;
  }

  .brand small {
    display: block;
    font-size: .47rem;
    letter-spacing: .06em;
    line-height: 1.2;
  }

  /* Evita que títulos editoriales largos lleguen al borde y queden cortados
     por el overflow-x de la página en teléfonos de ~360 px. */
  .section-heading h2 {
    max-width: 100%;
    font-size: clamp(2.25rem, 10.8vw, 2.85rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Winston y WhatsApp comparten una única fila inferior en vez de formar
     una columna que tapa texto, fotografías y CTA. */
  body .winston-chat-root {
    right: 66px;
    bottom: 14px;
  }

  .winston-chat-launcher {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
  }

  .winston-chat-launcher img {
    width: 44px;
    height: 44px;
  }

  .winston-chat-launcher span {
    display: none;
  }

  /* El panel se convierte en una columna flexible: cabecera, accesos y
     compositor conservan su tamaño; solo la conversación absorbe el espacio
     disponible. Así el formulario nunca queda recortado por el viewport. */
  .winston-chat-panel {
    position: fixed;
    right: 8px;
    bottom: 72px;
    width: calc(100vw - 16px);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 88px);
    overflow: hidden;
  }

  .winston-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .winston-chat-head,
  .winston-chat-actions,
  .winston-chat-prompt,
  .winston-chat-form,
  .winston-chat-result-actions {
    flex: 0 0 auto;
  }

  body .floating-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .floating-actions a {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .photo-carousel:not(.is-large) .photo-track figure {
    flex-basis: min(84vw, 520px);
    width: min(84vw, 520px);
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .photo-carousel:not(.is-large) .photo-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .resident-profile-photo,
  .resident-profile-photo img {
    min-height: 0;
  }

  .resident-profile-photo {
    aspect-ratio: 4 / 3;
  }

  .resident-profile-photo img,
  .resident-related-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
  }

  .home-discover-card {
    min-height: 340px;
  }

  .home-discover-card div {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
  }

  .storefront-steps,
  .storefront-collection-grid,
  .storefront-books-grid {
    grid-template-columns: 1fr;
  }

  .storefront-card,
  .storefront-book {
    min-width: 0;
  }

  .storefront-book {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 1rem;
  }

  .storefront-book-mark {
    width: 72px;
    height: 96px;
  }

  .content-index {
    min-width: 0;
  }

  .content-card {
    min-width: 0;
  }

  .content-body {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.78;
  }

  .content-related-grid article {
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .content-hero-image {
    max-height: none;
    height: auto;
  }

  .content-card > img,
  .content-related-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 620px) {
  .portal-dashboard,
  .portal-sponsorship-card {
    min-width: 0;
  }

  .portal-payment-row,
  .portal-incident {
    min-width: 0;
  }

  .portal-sponsorship-card > * {
    min-width: 0;
  }

  .portal-card-actions {
    width: 100%;
    justify-content: stretch;
  }

  .portal-card-actions .button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 430px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .site-header {
    min-height: 74px;
    padding-inline: 14px;
  }

  .brand::before {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .brand > span {
    font-size: clamp(.9rem, 4.15vw, 1rem);
  }

  .home-hero h1,
  .page-hero h1,
  .legal-hero h1 {
    font-size: clamp(2.72rem, 12.6vw, 3.85rem);
    line-height: .95;
  }

  .button-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .button-row .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .brand small {
    display: none;
  }

  .home-hero h1,
  .page-hero h1,
  .legal-hero h1 {
    font-size: clamp(2.5rem, 12.2vw, 3.25rem);
  }

  .section-heading h2 {
    font-size: 2.25rem;
  }
}

/* Al abrir Winston en móvil no deben quedar controles flotantes duplicados
   ni el disparador del menú asomando por detrás del panel. */
@media (max-width: 640px) {
  body.winston-chat-open .winston-chat-launcher,
  body.winston-chat-open .floating-actions,
  body.winston-chat-open .menu-toggle {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* En la portada móvil las flechas pertenecen al carrusel, por eso se muestran
   justo debajo de las fotografías y antes del CTA del directorio completo. */
@media (max-width: 640px) {
  .residents-preview .photo-carousel.is-large {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .residents-preview .photo-carousel.is-large .carousel-head {
    display: contents;
  }

  .residents-preview .photo-carousel.is-large .carousel-head > p {
    grid-row: 1;
    width: calc(100vw - 30px);
    margin: 0 auto 18px;
  }

  .residents-preview .photo-carousel.is-large .photo-track {
    grid-row: 2;
    scrollbar-width: none;
  }

  .residents-preview .photo-carousel.is-large .photo-track::-webkit-scrollbar {
    display: none;
  }

  .residents-preview .photo-carousel.is-large .carousel-controls {
    grid-row: 3;
    width: calc(100vw - 30px);
    margin: 22px auto 0;
    justify-content: center;
    gap: 12px;
  }

  .residents-preview .photo-carousel.is-large + .section-action {
    margin-top: 28px;
  }

  /* Las capturas reales muestran que la suma de padding entre secciones sigue
     siendo demasiado alta en teléfono. Compactamos solo la portada móvil. */
  .residents-preview.section-space {
    padding-bottom: 28px;
  }

  .home-padrinos.section-space {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .campaign-section.section-space {
    padding-top: 36px;
  }
}

/* Directorio de habitantes: en móvil la suma del padding de la introducción
   y del directorio generaba un vacío de más de 120 px. La foto de cada ficha
   debe empezar en el borde superior de su contenedor, sin una franja vacía. */
@media (max-width: 640px) {
  .inhabitants-intro.section-space {
    padding-bottom: 32px;
  }

  .resident-section {
    padding-top: 28px;
  }

  .resident-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }
}

/* Guardianes: la composición editorial de escritorio heredaba en móvil
   88 px de padding por sección, texto a 1.25rem/1.75 y otro margen adicional
   antes de las tarjetas. En pantallas estrechas eso convertía dos bloques
   breves en varias pantallas de scroll. Compactamos solo esta página. */
@media (max-width: 640px) {
  .guardianes-intro.section-space {
    padding: 48px 0 44px;
  }

  .guardianes-intro .two-column-editorial {
    gap: 30px;
  }

  .guardianes-intro .two-column-editorial h2 {
    margin-bottom: 0;
    font-size: clamp(2.35rem, 10vw, 2.8rem);
    line-height: .98;
  }

  .guardianes-intro .two-column-editorial > div:last-child {
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .guardianes-intro .two-column-editorial > div:last-child p {
    margin-bottom: 1rem;
  }

  .guardianes-cast.section-space {
    padding: 54px 0 64px;
  }

  .guardianes-cast .section-heading {
    margin-bottom: 28px;
  }

  .guardianes-cast .section-heading h2 {
    font-size: clamp(2.4rem, 10vw, 2.9rem);
    line-height: 1;
  }

  .guardianes-cast .guardianes-grid {
    margin-top: 0;
    gap: 16px;
  }

  .guardianes-cast .guardianes-grid article {
    padding: 1.15rem;
    border-radius: 20px;
  }
}

/* Sobre nosotros: el diseño base fuerza un hero de 720 px en móvil y conserva
   el padding global de 88 px junto con titulares editoriales de hasta 5rem.
   En teléfono eso alarga innecesariamente cada bloque. Se ajusta solo la
   página cuya primera sección es founder-story, sin alterar escritorio. */
@media (max-width: 640px) {
  .page-hero:has(+ .founder-story) {
    min-height: 600px;
  }

  .page-hero:has(+ .founder-story) .page-hero-content {
    padding-block: 58px 46px;
  }

  .page-hero:has(+ .founder-story) h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(2.9rem, 12vw, 3.35rem);
    line-height: .96;
  }

  .page-hero:has(+ .founder-story) .page-hero-content > p:not(.eyebrow) {
    margin-bottom: 24px;
    line-height: 1.55;
  }

  .founder-story.section-space {
    padding: 48px 0 52px;
  }

  .founder-grid {
    gap: 34px;
  }

  .founder-grid h2,
  .board-grid h2,
  .transparency-context h2 {
    margin-bottom: 20px;
    font-size: clamp(2.4rem, 10vw, 2.85rem);
    line-height: 1;
  }

  .founder-grid .story-quote {
    margin-block: 28px;
    padding: 24px;
  }

  .board-section.section-space {
    padding: 52px 0;
  }

  .board-grid {
    gap: 30px;
  }

  .transparency-context.section-space {
    padding: 52px 0;
  }

  .transparency-context > .shell {
    gap: 24px;
  }

  body:has(.founder-story) .footer-cta {
    gap: 28px;
    padding-block: 58px 44px;
  }

  body:has(.founder-story) .footer-cta h2 {
    font-size: clamp(2.45rem, 10vw, 2.9rem);
    line-height: 1;
  }
}