/*
 * AldeOn — Preloader + hero con móvil 3D (fase "hero", 2026-09-07).
 * Solo usado por index.html de momento (el selector de 6 tipos de
 * organización no tiene sentido en las landings de un solo tipo).
 * Depende de tokens.css/effects.css (ya cargados antes que este
 * archivo) para las variables de color/espaciado.
 */

/* ---------- Degradados de los iconos redondos (fase "hero-iconos",
 * 2026-09-10) ----------
 * Un tono plano se notaba plano — esto da a cada color de la app su
 * propio degradado diagonal (más claro arriba-izquierda, más oscuro
 * abajo-derecha) para que los iconos en círculo se sientan con
 * volumen en vez de un simple relleno de color (petición del
 * usuario, 2026-09-10: "más modernos y llamativos"). Se usan tanto
 * en los iconos de las tarjetas-resumen como en el de su cabecera.
 */
:root {
  --icon-gradient-home: linear-gradient(135deg, color-mix(in srgb, var(--home) 100%, white 22%), var(--home) 55%, color-mix(in srgb, var(--home) 100%, black 18%));
  --icon-gradient-events: linear-gradient(135deg, color-mix(in srgb, var(--events) 100%, white 22%), var(--events) 55%, color-mix(in srgb, var(--events) 100%, black 18%));
  --icon-gradient-economy: linear-gradient(135deg, color-mix(in srgb, var(--economy) 100%, white 22%), var(--economy) 55%, color-mix(in srgb, var(--economy) 100%, black 18%));
  --icon-gradient-highlight: linear-gradient(135deg, color-mix(in srgb, var(--highlight) 100%, white 22%), var(--highlight) 55%, color-mix(in srgb, var(--highlight) 100%, black 18%));
  --icon-gradient-votes: linear-gradient(135deg, color-mix(in srgb, var(--votes) 100%, white 22%), var(--votes) 55%, color-mix(in srgb, var(--votes) 100%, black 18%));
  --icon-gradient-hermandad: linear-gradient(135deg, color-mix(in srgb, var(--hermandad) 100%, white 22%), var(--hermandad) 55%, color-mix(in srgb, var(--hermandad) 100%, black 18%));
}

/* ---------- Reveal del titular ----------
 * `display: inline-block` es imprescindible para poder animar
 * transform en cada palabra (un <span> normal, inline, ignora
 * translate/scale). Sin opacity/transform por defecto aquí a
 * propósito — hero.js pone el estado "oculto" justo antes de animar,
 * nunca al revés (ver la nota larga sobre esto en hero.js). */
.reveal-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* ---------- Preloader ----------
 * Puramente CSS para el pulso del logo — no depende de que GSAP haya
 * terminado de cargar. preloader.js (cargado SIN defer, justo después
 * de este div en el HTML) solo decide CUÁNDO ocultarlo.
 */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  transition: opacity 0.4s ease;
}

#preloader.is-done {
  opacity: 0;
  pointer-events: none;
}

#preloader img {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow: 0 20px 40px -16px rgba(46, 42, 34, 0.35);
  animation: preloader-pulse 1s ease-in-out infinite;
}

@keyframes preloader-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* ---------- Columna del móvil (phone-stage + pestañas debajo) ---------- */
.phone-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  /* Encoge la caja a su contenido real (2026-09-17) — sin esto, al
     ser una columna de `.hero-grid` (grid), esta caja se estiraba a
     TODO el ancho de su columna (más de 700px en escritorio) aunque
     el móvil solo ocupa 272px, centrado dentro por el `align-items`.
     hero.js pausa el carrusel automático con el ratón encima de esta
     misma caja — con la caja de sobra ancha, cualquier movimiento del
     ratón por ese hueco invisible a los lados del móvil (sin tocarlo
     ni de lejos) pausaba el ciclo, dando la sensación de que el
     carrusel "se paraba solo" sin motivo aparente (reportado por el
     usuario). No cambia nada visualmente, solo el tamaño real de la
     zona interactiva. */
  width: fit-content;
  justify-self: center;
}

/* ---------- Móvil 3D ---------- */
.phone3d-perspective {
  position: relative;
  z-index: 2;
  perspective: 1400px;
}

.phone3d {
  /* Ancho del canto derecho — lo usan tanto .phone3d-edge-right como
     .phone3d-btn-power (para que el botón cubra exactamente todo el
     gris, ver más abajo), declarado aquí arriba para que ambos lean
     el MISMO valor por herencia en vez de repetirlo dos veces. */
  --edge-w: 7px;
  transform-style: preserve-3d;
  will-change: transform;
  /* Estado de reposo por defecto: ligeramente girado, no a canto
     vivo sino apenas 10°/3° — sin esto se ve un móvil "pegatina"
     totalmente plano; con este giro mínimo permanente se nota que
     tiene volumen incluso parado, y de paso deja ver un poco el
     canto derecho (con su botón). Si JS/GSAP no llega a cargar (CDN
     caído, JS desactivado) el móvil ya nace en esta misma pose, así
     que nunca se queda "de canto" del todo sin nada que lo enderece
     — solo hero.js, si de verdad va a animarlo, lo pone más de canto
     un instante antes de la propia animación de entrada. */
  transform: rotateY(-10deg) rotateX(3deg);
}

.phone3d-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 272px;
  border-radius: 38px;
  /* Degradado de tres paradas (antes solo dos) + un borde biselado
     vía box-shadow inset — luz arriba-izquierda, sombra abajo-
     derecha, como una pieza de metal/cristal real en vez de un
     bloque de color liso (petición del usuario, 2026-09-11: "que
     parezca 3D aunque sea en 2D"). */
  background: linear-gradient(155deg, #4d4638, #34302a 45%, #1c1914 100%);
  border: 9px solid var(--ink);
  box-shadow:
    0 30px 60px -20px rgba(46, 42, 34, 0.45),
    0 10px 24px -8px rgba(46, 42, 34, 0.25),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.2),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* ---------- Botones laterales ----------
 * Antes eran dos rayitas de color plano; ahora cuatro botones reales
 * (silencio + volumen arriba/abajo a la izquierda, encendido a la
 * derecha) con su propio degradado y sombra, como si sobresalieran
 * de verdad del marco — puramente decorativos, sin función.
 */
.phone3d-btn {
  position: absolute;
  /* 3px se notaba fino (petición del usuario, 2026-09-12: "hacer un
     pelin más gordo el botón lateral"). */
  width: 4.5px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #17140f, #3a352b 55%, #17140f);
  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.12), -1px 0 2px rgba(0, 0, 0, 0.5);
}

.phone3d-btn-mute,
.phone3d-btn-vol-up,
.phone3d-btn-vol-down {
  /* Sobresale del marco (ver también .phone3d-btn-power) — se pinta
     DESPUÉS del marco (ver el orden en el HTML) así que sigue
     solapando un poco con el borde de 9px para no dejar hueco de
     fondo de página entre los dos, pero ahora asoma más para notarse
     de verdad como un botón (petición del usuario, 2026-09-11). */
  left: -2.5px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(270deg, #17140f, #3a352b 55%, #17140f);
  box-shadow: -1px 0 1px rgba(255, 255, 255, 0.12), 1px 0 2px rgba(0, 0, 0, 0.5);
}

.phone3d-btn-mute { top: 72px; height: 18px; }
.phone3d-btn-vol-up { top: 104px; height: 34px; }
.phone3d-btn-vol-down { top: 146px; height: 34px; }
.phone3d-btn-power {
  top: 118px;
  height: 52px;
  /* Antes 4.5px con right:-2.5px — solo tapaba parte del canto
     gris, dejando un tramo suelto a su derecha (aviso del usuario,
     2026-09-12: "debería cubrir todo lo gris que hemos puesto").
     Ahora usa el MISMO --edge-w que .phone3d-edge-right (heredado
     desde .phone3d) para que el ancho encaje exacto con el canto
     entero, +1px de margen para seguir solapando un pelín con el
     borde (mismo motivo que siempre: no dejar hueco de fondo de
     página). Reducido 2px (petición del usuario, 2026-09-12: "baja
     2px el ancho del botón") — ya no cubre el canto entero, pero
     tras los últimos ajustes (el botón desplazado y con su propio
     borde) queda mejor un poco más estrecho que la anchura exacta
     del canto. */
  width: calc(var(--edge-w) - 1px);
  /* +2px extra de salida en total (petición del usuario, 2026-09-12:
     "1px o 2px hacia la derecha" → "otro px más" → "muévelo 1px a la
     izquierda") — deja un poco del canto gris visible a la izquierda
     del botón, y el propio botón asoma un pelín más allá del canto
     por la derecha. */
  right: calc(-1 * var(--edge-w) - 2px);
  /* El reparto 3/4 oscuro + 1/4 claro (v1) dejaba la parte clara
     como un filo finito de ~2px sobre 8px de ancho — a tamaño normal
     se leía como una mancha, no como 3D real (aviso del usuario,
     2026-09-12: "lo veo raro, sin efecto de 3D"). v2 probó un pico
     de luz en el centro (oscuro-claro-oscuro), pero tampoco era lo
     que pedían (aviso del usuario, 2026-09-12: "ese degradado no
     es..."). v3 hizo el degradado oscuro→claro a lo largo de TODO
     el ancho, pero resultó demasiado claro en general (aviso del
     usuario, 2026-09-12: "no tanto, solo tiene que haber un poco de
     gris claro a la derecha... con 1/4 o 1/3 va bien"). v4: vuelve
     al reparto 2/3 oscuro + 1/3 claro de la v1, pero esta vez con un
     borde propio (ver abajo) para que el botón se recorte del canto
     que lo rodea y el ojo lea el degradado interior como relieve en
     vez de fundirse con el gris de al lado (aviso del usuario,
     2026-09-12: "hacer un borde negro en el botón para que se vea
     efecto de 3D"). El relleno usaba var(--ink) igual que el borde
     — se veía todo negro de golpe (aviso del usuario, 2026-09-12:
     "baja el tono del color, en vez de negro ponle un gris muy
     oscuro"): el borde se queda en var(--ink) (para el recorte neto
     contra el canto), pero el relleno pasa a un gris oscuro propio,
     más claro que el borde. Y ahora el borde TAMBIÉN pasa a gris
     oscuro (petición del usuario, 2026-09-12: "la línea del contorno
     ponsela en gris oscuro"), mismo tono que el relleno para que se
     lea como una sola pieza de metal, no como un marco negro con
     relleno gris dentro. v5: un pelín más oscuro (poco, no tanto
     como el canto — petición del usuario, 2026-09-12: "el botón un
     pelin más oscuro, pero no mucho"); el propio brillo del extremo
     usa ahora el mismo tono ya oscurecido del canto (#7d745f), para
     que sigan siendo "la misma pieza". */
  box-sizing: border-box;
  border: 1px solid #4c473a;
  background: linear-gradient(90deg, #4c473a 0%, #4c473a 65%, #7d745f 100%);
}

/* ---------- Canto derecho ----------
 * v1 era una tira recta con mask-image (desvanecida cerca de las
 * esquinas) — pero eso hacía que la esquina se quedara "pelada" (sin
 * nada de canto) justo donde más se nota, en vez de seguir la propia
 * curva redondeada del marco (aviso del usuario, 2026-09-11: "las
 * esquinas no se ven... tienen que ser redondeadas, no una línea
 * recta"). v2: en vez de recortar una tira, se clona la silueta
 * ENTERA del marco (mismo `inset:0` + mismo `border-radius: 38px`,
 * ya que `.phone3d` no tiene borde propio y su caja coincide exacto
 * con la del marco) y se desplaza unos px a la derecha con
 * `translateX`. Al quedar DETRÁS del marco (`z-index: -1`, mismo
 * mecanismo de apilamiento ya usado para los botones), lo único que
 * asoma es la porción que el marco no llega a tapar — y como ambas
 * siluetas comparten la misma curva, esa porción sigue la curva de
 * la esquina en vez de cortarse en línea recta. */
.phone3d-edge-right {
  /* --edge-w vive en .phone3d (heredado) — así .phone3d-btn-power
     puede usar el mismo valor exacto para cubrir todo este ancho. */
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 38px;
  /* v6 usaba un linear-gradient(90deg) en coordenadas LOCALES del
     clon (0-272px) — funciona bien en el tramo recto, pero en la
     propia esquina el trocito que asoma no siempre cae en el mismo
     punto del degradado: al acercarse arriba del todo, el hueco
     entre el marco y el clon se hace cada vez más estrecho y además
     se desplaza hacia el CENTRO del degradado (sigue siendo un
     100%-edge-w de ancho, pero medido sobre el propio contorno
     curvo, no en línea recta), así que ahí se asomaba el tramo
     todavía oscuro en vez del gris — se veía como un cachito sin
     redondear, no concéntrico con la curva real del marco (aviso
     del usuario, 2026-09-12: "que el radio de la zona exterior del
     negro sea concéntrico con el radio interior"). v7: en vez de un
     degradado con posiciones fijas, un color LISO — al no depender
     de la posición, se ve igual de gris asome lo que asome en
     cualquier punto de la curva, y el hueco se va estrechando de
     forma natural hasta la propia esquina sin ningún corte.

     v8 vuelve a meter degradado (petición del usuario, 2026-09-12:
     "hacerle un poco de gradiente al gris para dar el efecto de
     3D") pero calculé mal dónde cae el tramo RECTO: puse la meseta
     clara en 78%-90% pensando en la punta de la esquina (que asoma
     como mucho hasta ~86%), sin caer en que el tramo recto (la
     mayor parte del canto, no solo la esquina) asoma mucho más
     pegado al final — con este --edge-w de 7px sobre 272px de ancho
     total, el tramo recto solo enseña del 97.4% al 100%. Ese rango
     caía DESPUÉS de la meseta, ya de vuelta hacia el negro, así que
     todo el tramo recto — lo que más se ve del canto, no la esquina
     — salía oscuro, casi igual que el marco (aviso del usuario,
     2026-09-12: "en la zona media... casi no se distingue con el
     negro"). v9: la meseta clara ahora llega hasta el 100% (sin
     volver a oscurecer al final) y empieza antes (84%), con margen
     de sobra para cubrir TANTO la punta de la esquina (~83%-86%)
     COMO el tramo recto entero (97.4%-100%) — y un tono algo más
     claro también, para que se distinga bien del negro.

     v10 mete un tercer tono, más oscuro, en la propia transición
     (petición del usuario, 2026-09-12: "usa un tono más oscuro en el
     gris más oscuro que hayas puesto, un pelin más") — pero ese
     tramo oscuro (68%-74%) sigue terminando bien antes del ~83%
     donde empieza a asomar la esquina, así que la meseta clara sigue
     totalmente cubierta ahí y en el tramo recto; solo se ve un pelín
     de este gris más oscuro en el propio interior de la curva, nunca
     como una zona plana. v11: un pelín más oscuro todavía ese tono
     intermedio (petición del usuario, 2026-09-12: "dale otro tono
     más al gris más oscuro"). v12: dado por bueno el conjunto, pero
     con el canto un pelín más oscuro que el botón (petición del
     usuario, 2026-09-12: "el canto... un pelin más oscuro... el
     canto un poco más [que el botón]"). */
  background: linear-gradient(90deg,
    var(--ink) 0%,
    var(--ink) 60%,
    #332f24 70%,
    #7d745f 82%,
    #7d745f 100%);
  transform: translateX(var(--edge-w));
  pointer-events: none;
}

/* ---------- Barra de estado (hora, cobertura, wifi, batería) ----------
 * Antes había un notch de cámara aquí que tapaba el nombre de la
 * organización de la propia captura — quitado (petición del usuario,
 * 2026-09-07). Esta barra vive en su PROPIO espacio, encima de la
 * captura, nunca superpuesta — el marco crece esos px de más en vez
 * de recortar nada.
 */
.phone3d-statusbar {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  /* Antes era casi negro sólido (rgba(0,0,0,.32)) y se fundía con el
     marco oscuro del móvil sin distinguirse — un primer intento a
     rgba(255,255,255,.08) quedó demasiado tenue y apenas se leía
     (petición del usuario, 2026-09-10), así que este es el punto
     intermedio: cristal claro, pero con contraste de sobra. */
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.phone3d-statusbar-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  transform: scale(0.82);
  transform-origin: right center;
}

.phone3d-statusbar-icons svg { display: block; }

.phone3d-screen {
  position: relative;
  flex: 1;
  aspect-ratio: 640 / 1326;
  border-radius: 0 0 29px 29px;
  overflow: hidden;
  background: var(--cream);
}

/* Reflejo de cristal — una franja de luz diagonal por encima de todo
   lo que se muestre en la pantalla (tarjetas, capturas...), para que
   se note que hay un cristal delante y no un panel plano pintado
   (petición del usuario, 2026-09-11). `mix-blend-mode: overlay` hace
   que se adapte al contenido de debajo en vez de taparlo con un
   blanco uniforme. */
.phone3d-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: overlay;
}

/* ---------- Aviso de notificación ----------
 * Aparece una vez, poco después de que el móvil termine de girar, y
 * se retira sola — CSS puro (sin JS): `animation-fill-mode: both` la
 * deja oculta antes Y después del propio ciclo, y con
 * `prefers-reduced-motion` (ver la regla global de effects.css, que
 * fuerza `animation-duration` a 0.01ms) simplemente no llega a
 * mostrarse, en vez de quedarse a medias.
 */
.phone3d-notification {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 9px 12px;
  box-shadow: 0 10px 24px -8px rgba(46, 42, 34, 0.4);
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
  animation: phone3d-notification-pop 6s ease-in-out 1.4s 1 both;
}

.phone3d-notification-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--home);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.phone3d-notification-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
}

.phone3d-notification-text strong { font-size: 11px; color: var(--ink); }
.phone3d-notification-text span {
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes phone3d-notification-pop {
  0% { transform: translateY(-160%); opacity: 0; }
  8% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-160%); opacity: 0; }
}

.phone3d-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  /* Se probó a fingir un giro 3D propio aquí (perspective + rotateY)
     para que el contenido "acompañase" el giro real del marco (ver
     `.phone3d`) — en la práctica, a tamaño normal (no en el zoom del
     navegador) quedaba fatal: un trapecio raro, no un tilt sutil
     (aviso del usuario, 2026-09-12: "ahora se ve mil veces peor").
     Revertido — mejor plano, aunque no acompañe el giro del marco al
     milímetro, que con un falso 3D que rompe la lectura de las
     tarjetas. */
  /* Red de apoyo si por lo que sea GSAP no llega a cargar: el propio
     CSS ya sabe hacer un crossfade sencillo al cambiar la clase
     is-active (ver hero.js). */
  transition: opacity 0.45s ease;
}

.phone3d-slide.is-active { opacity: 1; }

/* ---------- Tarjeta de portada por tipo de organización (fase
 * "hero-autoplay-v3-aurora", 2026-09-10) ----------
 * El móvil va solo, en bucle: por cada tipo de organización aparece
 * primero esta tarjeta a pantalla completa y da paso a la captura
 * real de esa organización (ver hero.js). La v2 (color plano con
 * degradado) quedaba "de PowerPoint" (petición del usuario,
 * 2026-09-10) — esta versión sustituye el fondo por dos manchas de
 * luz ("aurora") moviéndose despacio detrás, y el nombre ya no
 * aparece con un fundido sino que se "descifra" letra a letra (ver
 * scrambleText en hero.js). Sigue reutilizando .phone3d-slide para
 * el crossfade entre tarjetas y capturas.
 *
 * Todo el color sale de `--card-color` (fijado por cada .org-* de
 * abajo) con `color-mix()`, para no repetir un degradado/aurora
 * distinto a mano por organización.
 */
.phone3d-titlecard {
  /* Sin `position` aquí a propósito: hereda `position: absolute;
     inset: 0` de .phone3d-slide (misma regla que la coloca encima de
     la pantalla del móvil). Declararlo "relative" aquí lo sacaba de
     ahí por completo — quedaba en flujo normal, empujando el resto
     de la página, y el móvil se veía en blanco. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 0 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--card-color) 62%, black 30%);
}

.phone3d-titlecard-aurora {
  position: absolute;
  inset: -10%;
  z-index: 0;
  filter: blur(28px);
  opacity: 0.9;
}

.aurora-blob {
  position: absolute;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-color) 85%, white 30%);
}

.aurora-blob-b {
  background: color-mix(in srgb, var(--card-color) 65%, white 5%);
}

.aurora-blob-a {
  top: -18%;
  left: -16%;
  animation: aurora-float-a 9s ease-in-out infinite;
}

.aurora-blob-b {
  bottom: -22%;
  right: -18%;
  animation: aurora-float-b 11s ease-in-out infinite;
}

@keyframes aurora-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(16%, 12%) scale(1.18); }
}

@keyframes aurora-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14%, -10%) scale(1.12); }
}

/* Grano sutil — SVG de ruido como fondo, casi imperceptible, encima
   del aurora para que no se vea a base de degradados lisos. */
.phone3d-titlecard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}

.phone3d-titlecard-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Halo detrás del icono, respirando muy despacio — el único
   movimiento continuo de la tarjeta, para que no se quede muerta
   mientras se lee el nombre. */
.phone3d-titlecard-icon::after {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.16);
  animation: titlecard-halo 2.6s ease-in-out infinite;
}

@keyframes titlecard-halo {
  0%, 100% { transform: scale(0.85); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}

.phone3d-titlecard-icon svg { width: 30px; height: 30px; display: block; }

.phone3d-titlecard-name {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
}

.phone3d-titlecard-underline {
  position: relative;
  z-index: 1;
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.65);
  transform-origin: center;
}

.phone3d-titlecard.org-asociaciones { --card-color: var(--home); }
.phone3d-titlecard.org-vecinos { --card-color: var(--economy); }
.phone3d-titlecard.org-residencias { --card-color: var(--votes); }
.phone3d-titlecard.org-hermandades { --card-color: var(--hermandad); }
.phone3d-titlecard.org-penas { --card-color: var(--highlight); }
.phone3d-titlecard.org-negocios { --card-color: var(--events); }

@media (max-width: 600px) {
  .phone3d-titlecard-icon { width: 46px; height: 46px; border-radius: 15px; }
  .phone3d-titlecard-icon svg { width: 25px; height: 25px; }
  .phone3d-titlecard-name { font-size: 1.15rem; }
}

/* ---------- Barra de navegación inferior del móvil ----------
 * No se usa en la home (el móvil ahí va en piloto automático, ver
 * arriba) — se queda lista aquí para las páginas de cada tipo de
 * organización, donde sí interesa que se pueda tocar de verdad.
 */
.phone3d-navbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 4px 14px;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid rgba(46, 42, 34, 0.07);
}

.phone3d-navbar::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 84px;
  height: 4px;
  border-radius: 2px;
  background: rgba(46, 42, 34, 0.22);
}

.phone3d-navtab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.phone3d-navtab .navtab-icon-wrap {
  width: 32px;
  height: 19px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.phone3d-navtab .navtab-icon-wrap svg { width: 15px; height: 15px; display: block; }

.phone3d-navtab.is-active { color: var(--home); }
.phone3d-navtab.is-active .navtab-icon-wrap { background: var(--home-tint); color: var(--home); }

.phone3d-navtab:focus-visible {
  outline: 2px solid var(--home);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .phone3d-navbar { padding: 7px 2px 11px; }
  /* El marco baja a 208px en móvil (5 pestañas en ~35px cada una):
     con 8px, "Incidencias"/"Reuniones" (comunidades de vecinos) se
     pisaban entre sí. 6.6px las deja con margen — comprobado midiendo
     el ancho real del texto de cada pestaña. */
  .phone3d-navtab { font-size: 6.6px; }
  .phone3d-navbar { gap: 0; }
  .phone3d-navtab .navtab-icon-wrap { width: 27px; height: 16px; }
  .phone3d-navtab .navtab-icon-wrap svg { width: 13px; height: 13px; }
}


/* ---------- Pantalla-resumen por tipo de organización (fase
 * "hero-resumen", 2026-09-10) ----------
 * Sustituye a la captura real de la app durante la fase "screen" de
 * cada organización (ver hero.js). Varias capturas reales eran
 * estados vacíos o, en un caso, una pantalla de cámara en negro —
 * nada de eso vendía bien, así que en su lugar esto es una pantalla
 * construida a medida con las funciones más importantes de cada
 * tipo, en el mismo lenguaje visual que la app real (tarjetas
 * blancas redondeadas, iconos de color por función).
 */
.phone3d-summary {
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.phone3d-summary-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 8px 18px -12px rgba(46, 42, 34, 0.3);
}

.phone3d-summary-header-icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

.phone3d-summary-header-icon svg { width: 18px; height: 18px; display: block; }

.phone3d-summary-header-text {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}

.org-asociaciones .phone3d-summary-header-icon { background: var(--icon-gradient-home); }
.org-vecinos .phone3d-summary-header-icon { background: var(--icon-gradient-economy); }
.org-residencias .phone3d-summary-header-icon { background: var(--icon-gradient-votes); }
.org-hermandades .phone3d-summary-header-icon { background: var(--icon-gradient-hermandad); }
.org-penas .phone3d-summary-header-icon { background: var(--icon-gradient-highlight); }
.org-negocios .phone3d-summary-header-icon { background: var(--icon-gradient-events); }

/* Banda de color detrás de la cabecera — antes iba directamente
   sobre el cream, sin separación (petición del usuario, 2026-09-10:
   "está un poco soso"). Usa el mismo tono que la tarjeta de portada
   de esa organización, para que se sienta la misma "familia" de
   color al pasar de una a otra. */
.org-asociaciones .phone3d-summary-header { background: var(--home-tint); }
.org-vecinos .phone3d-summary-header { background: var(--economy-tint); }
.org-residencias .phone3d-summary-header { background: var(--votes-tint); }
.org-hermandades .phone3d-summary-header { background: var(--hermandad-tint); }
.org-penas .phone3d-summary-header { background: var(--highlight-tint); }
.org-negocios .phone3d-summary-header { background: var(--events-tint); }

.phone3d-summary-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
  overflow: hidden;
}

.phone3d-summary-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  /* Blanco sobre el cream de fondo casi no se distinguía — un tono
     apenas del color de esa organización (petición del usuario,
     2026-09-10: "en blanco queda algo soso"). Los overrides de abajo
     lo fijan por tipo; esto es solo el valor por defecto. */
  background: var(--home-tint);
  border-radius: 15px;
  padding: 10px 11px;
  box-shadow: 0 6px 16px -10px rgba(46, 42, 34, 0.28);
}

.org-asociaciones .phone3d-summary-item { background: var(--home-tint); }
.org-vecinos .phone3d-summary-item { background: var(--economy-tint); }
.org-residencias .phone3d-summary-item { background: var(--votes-tint); }
.org-hermandades .phone3d-summary-item { background: var(--hermandad-tint); }
.org-penas .phone3d-summary-item { background: var(--highlight-tint); }
.org-negocios .phone3d-summary-item { background: var(--events-tint); }

.phone3d-summary-item-icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  /* Redondos en vez de cuadrados — junto con el "hilo" de abajo, se
     leen como nodos de un proceso/mapa en vez de simples iconos de
     lista (petición del usuario, 2026-09-10: "algo que las distinga
     más... moderno y tecnológico"). */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone3d-summary-item-icon svg { width: 17px; height: 17px; display: block; }

/* El "hilo" que conecta cada nodo con el siguiente. Se ancla al
   propio icono (que no cambia de tamaño) y no al final del bloque de
   texto (que sí cambia según si la descripción ocupa una o dos
   líneas) — por eso es un tramo corto que se desvanece, no una línea
   exacta hasta el icono siguiente: con alturas de fila variables no
   hay forma de que toque justo ahí sin medir con JS, y un final que
   se desvanece se nota mucho menos que uno que se corta seco. */
.phone3d-summary-item:not(:last-child) .phone3d-summary-item-icon::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 17px;
  background: linear-gradient(to bottom, rgba(46, 42, 34, 0.22), transparent);
}

.phone3d-summary-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.phone3d-summary-item-text strong {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

.phone3d-summary-item-text span {
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Sombra del propio color del icono en vez de una sombra gris
   genérica — un detalle pequeño (glow de color) que se asocia mucho
   con interfaces "premium" recientes, y ayuda a distinguir cada
   tarjeta más allá del texto (petición del usuario, 2026-09-10). */
.icon-tint-home { background: var(--icon-gradient-home); box-shadow: 0 5px 14px -3px var(--home); }
.icon-tint-events { background: var(--icon-gradient-events); box-shadow: 0 5px 14px -3px var(--events); }
.icon-tint-economy { background: var(--icon-gradient-economy); box-shadow: 0 5px 14px -3px var(--economy); }
.icon-tint-highlight { background: var(--icon-gradient-highlight); box-shadow: 0 5px 14px -3px var(--highlight); }
.icon-tint-votes { background: var(--icon-gradient-votes); box-shadow: 0 5px 14px -3px var(--votes); }
.icon-tint-hermandad { background: var(--icon-gradient-hermandad); box-shadow: 0 5px 14px -3px var(--hermandad); }

/* Brillo de "cristal" en la esquina superior — el mismo truco en
   todos los iconos redondos del móvil (tarjetas-resumen, su
   cabecera y el de la propia tarjeta de portada) para que se sientan
   con volumen, no un círculo de color liso. El pseudo-elemento lleva
   su propio border-radius: 50% (en vez de recortar con overflow en
   el contenedor) porque el icono de la lista ya usa su propio
   ::after para el "hilo" que lo conecta con el siguiente, y
   overflow: hidden se lo habría cortado. */
.phone3d-summary-item-icon::before,
.phone3d-summary-header-icon::before,
.phone3d-titlecard-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .phone3d-summary-header { padding: 12px 14px 9px; }
  .phone3d-summary-list { gap: 7px; padding: 2px 11px 11px; }
  .phone3d-summary-item { padding: 8px 9px; border-radius: 13px; }
  .phone3d-summary-item-icon { width: 27px; height: 27px; }
  .phone3d-summary-item-icon svg { width: 14px; height: 14px; }
  .phone3d-summary-item-text strong { font-size: 10.5px; }
  .phone3d-summary-item-text span { font-size: 8.8px; }
}

/* ---------- Barra de progreso por tipo de organización (fase
 * "hero-autoplay-v2", 2026-09-10) ----------
 * Sustituye a los chips de texto de antes (poco vistosos) por algo
 * más reconocible: una barra de segmentos como en Instagram/TikTok
 * stories. Cada segmento se va rellenando con el color de "su"
 * organización mientras el móvil la muestra (ver hero.js, que anima
 * el ancho de la barra interna con la Web Animations API para poder
 * pausarla/reanudarla igual que el resto del autoplay). Tocar un
 * segmento salta directamente a esa organización.
 */
.hero-storybar {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 260px;
}

.hero-storybar-seg {
  flex: 1;
  height: 5px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: rgba(46, 42, 34, 0.12);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.hero-storybar-seg span {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 3px;
  background: var(--seg-color, var(--home));
}

.hero-storybar-seg.is-done span { width: 100%; }

.hero-storybar-seg:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 3px;
}

/* ---------- Degradado en pantallas pequeñas ---------- */
@media (max-width: 600px) {
  .phone3d-frame { width: 208px; }
  .hero-storybar { max-width: 208px; }
}