@charset "UTF-8";
/* ==========================================================
   El mundo de Ulu · lo propio de mundo.html
   Se apoya en estilos.css (tokens, hero/escena, botones, pie).
   ========================================================== */

/* ---------- Hero: el invernadero a pantalla completa ---------- */
/* Reutiliza .hero/.escena/.lienzo/.capa-ulu/.parpado/.velo-hero de estilos.css. */
.hero-mundo .hero-texto { text-align: center; max-width: 560px; }
.hero-mundo .kicker { color: var(--txt-2); margin-bottom: 0.6rem; }
.hero-mundo h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 1.02; margin-bottom: 0.9rem; }
.hero-mundo .sub { margin: 0 auto; max-width: 34ch; font-size: 1.06rem; }
.hero-marca .marca { color: inherit; }
.hero-marca .marca:hover { color: var(--lavanda); }

/* Ulu de pie en la tarima del invernadero (vertical 720×1280: el suelo empieza al 50 %) */
.hero-mundo .capa-ulu { left: 27.1%; top: 25.9%; width: 34%; }
.hero-mundo .capa-baraja { left: 23%; top: 45.8%; width: 7.5%; }
/* En móvil el invernadero se ve más abajo que en la landing: el velo empieza a
   fundir más tarde para que no quede una franja negra entre Ulu y el título. */
.hero-mundo .velo-hero { background: linear-gradient(180deg, rgba(12, 12, 16, 0.4) 0%, rgba(12, 12, 16, 0) 14%, rgba(12, 12, 16, 0) 56%, rgba(12, 12, 16, 0.55) 72%, rgba(12, 12, 16, 0.92) 86%, var(--bg) 100%); }

/* reflejos: franjas diagonales blancas al 4-6 % que cruzan la parte alta muy despacio */
.reflejos { position: absolute; inset: 0 0 45% 0; overflow: hidden; pointer-events: none; }
.reflejos i {
  position: absolute;
  top: -30%; bottom: -30%;
  width: 9%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg) translateX(var(--x0));
  animation: reflejo var(--dr, 60s) ease-in-out var(--rr, 0s) infinite alternate;
  will-change: transform;
}
.reflejos i:nth-child(1) { left: 14%; --x0: 0; --dr: 64s; --rr: -10s; }
.reflejos i:nth-child(2) { left: 48%; --x0: 0; --dr: 78s; --rr: -30s; width: 6%; }
.reflejos i:nth-child(3) { left: 76%; --x0: 0; --dr: 70s; --rr: -50s; opacity: 0.8; }
@keyframes reflejo { from { transform: skewX(-18deg) translateX(-40%); } to { transform: skewX(-18deg) translateX(140%); } }

/* faroles: resplandor ámbar que titila de forma irregular; solo hay faroles en el panorámico */
.farol {
  display: none;
  position: absolute;
  width: 6%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 90, 0.5) 0%, rgba(255, 160, 60, 0.18) 35%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: titilar 3.4s ease-in-out infinite;
  will-change: opacity, transform;
}
.farol-1 { left: 16%; top: 47.3%; }
.farol-2 { left: 75.3%; top: 47.6%; animation-duration: 4.1s; animation-delay: -1.7s; }
.farol-3 { left: 93.7%; top: 38.5%; width: 9%; display: block; } /* farol de la regadera en el vertical (móvil) */
@keyframes titilar {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  17% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  31% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.97); }
  52% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.03); }
  68% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); }
  84% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.02); }
}

/* luciérnagas: puntos verde-amarillos tenues que derivan y parpadean, mitad baja */
.luciernagas { position: absolute; inset: 45% 0 0 0; pointer-events: none; overflow: hidden; }
.luciernagas i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #d8f5a0;
  box-shadow: 0 0 6px rgba(216, 245, 160, 0.9), 0 0 14px rgba(216, 245, 160, 0.35);
  opacity: 0;
  animation: luciernaga var(--d, 18s) ease-in-out var(--r, 0s) infinite;
  will-change: transform, opacity;
}
.luciernagas i:nth-child(1)  { left: 6%;  top: 30%; --d: 19s; --r: -3s; }
.luciernagas i:nth-child(2)  { left: 14%; top: 55%; --d: 23s; --r: -9s; width: 2px; height: 2px; }
.luciernagas i:nth-child(3)  { left: 23%; top: 18%; --d: 17s; --r: -14s; }
.luciernagas i:nth-child(4)  { left: 31%; top: 66%; --d: 21s; --r: -6s; width: 2px; height: 2px; }
.luciernagas i:nth-child(5)  { left: 40%; top: 40%; --d: 25s; --r: -18s; }
.luciernagas i:nth-child(6)  { left: 48%; top: 72%; --d: 18s; --r: -1s; width: 2px; height: 2px; }
.luciernagas i:nth-child(7)  { left: 57%; top: 26%; --d: 22s; --r: -11s; }
.luciernagas i:nth-child(8)  { left: 65%; top: 58%; --d: 20s; --r: -16s; }
.luciernagas i:nth-child(9)  { left: 73%; top: 36%; --d: 24s; --r: -7s; width: 2px; height: 2px; }
.luciernagas i:nth-child(10) { left: 82%; top: 64%; --d: 19s; --r: -13s; }
.luciernagas i:nth-child(11) { left: 90%; top: 22%; --d: 26s; --r: -4s; width: 2px; height: 2px; }
.luciernagas i:nth-child(12) { left: 95%; top: 48%; --d: 21s; --r: -20s; }
@keyframes luciernaga {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.55; }
  14% { opacity: 0.15; }
  20% { opacity: 0.6; }
  50% { transform: translate3d(18px, -22px, 0); opacity: 0.3; }
  58% { opacity: 0.65; }
  64% { opacity: 0.2; }
  90% { opacity: 0.45; }
  100% { transform: translate3d(-12px, -46px, 0); opacity: 0; }
}

/* ---------- El directo ---------- */
.directo-texto { color: var(--txt-2); font-size: 1.05rem; line-height: 1.65; max-width: 560px; text-wrap: pretty; }
.directo-texto strong { color: var(--txt); font-weight: 600; }
.sin-horario { margin-top: -0.2em; }
.tiktok-linea { margin: 4px 0 28px; }
.tiktok-enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 9999px;
  border: 1px solid var(--borde-hover);
  background: rgba(255, 255, 255, 0.03);
  color: var(--txt);
  font-weight: 500;
  font-size: 0.92rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.tiktok-enlace:hover { color: var(--txt); border-color: rgba(201, 182, 255, 0.45); background: rgba(124, 92, 255, 0.1); }
.tiktok { width: 20px; height: 20px; flex: 0 0 auto; color: #efe8dc; }
.btn .tiktok { width: 18px; height: 18px; color: #fff; }
.mini-tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.mini-tarjetas li {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 18px 18px 16px;
}
.mini-tarjetas svg { width: 26px; height: 26px; color: var(--violeta-2); margin-bottom: 10px; }
.mini-tarjetas li.dorada svg { color: var(--ambar); }
.mini-tarjetas h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.mini-tarjetas p { margin: 0; color: var(--txt-2); font-size: 0.94rem; line-height: 1.55; }

/* ---------- Los seis rincones: una historia por rincón ---------- */
.seccion-rincones { max-width: 1100px; }
.seccion-rincones .cabecera-seccion { margin-bottom: 2.6rem; }
.rincones-historia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.rincon-h { display: grid; gap: 18px; }
.rincon-figura { margin: 0; }
.rincon-figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-hover);
  box-shadow: var(--sombra-xl);
}
.rincon-texto .kicker { margin-bottom: 0.5rem; }
.rincon-texto h3 { font-size: clamp(1.5rem, 5.6vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.6rem; }
.rincon-texto p:last-child { margin: 0; color: var(--txt-2); font-size: 1.02rem; line-height: 1.65; text-wrap: pretty; }

/* ---------- Mis vecinos: retrato a la izquierda, dos líneas ---------- */
.vecinos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.vecino {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 16px 18px 16px 16px;
  transition: border-color 300ms ease, transform 300ms ease;
}
.vecino:hover { border-color: rgba(124, 92, 255, 0.35); transform: translateY(-3px); }
.retrato {
  position: relative;
  flex: 0 0 auto;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(124, 92, 255, 0.42) 0%, rgba(124, 92, 255, 0.14) 55%, rgba(26, 26, 31, 0) 100%);
  display: grid;
  place-items: center;
}
.retrato::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 182, 255, 0.18);
}
.retrato img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.retrato.asoma img { -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); }
.retrato.brillo img { width: 96%; height: 96%; filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 6px rgba(255, 200, 120, 0.6)); }
.vecino-texto { min-width: 0; }
.vecino h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.vecino .caracter { margin: 0 0 0.45rem; color: var(--txt-2); font-size: 0.92rem; line-height: 1.5; text-wrap: pretty; }
.vecino .donde { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--txt-3); line-height: 1.4; }

/* ---------- Cómo se hace ---------- */
.honesto {
  background: var(--elev);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 22px 20px;
  max-width: 640px;
}
.honesto p { margin: 0; color: var(--txt-2); font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
.honesto p + p { margin-top: 0.7em; }
.honesto strong { color: var(--txt); font-weight: 600; }

/* ---------- Cierre ---------- */
.cierre-mundo { text-align: center; }
.cierre-mundo .cabecera-seccion { margin-left: auto; margin-right: auto; text-align: center; }
.cierre-mundo h2 { margin-bottom: 0.8rem; }
.cierre-mundo .intro { margin: 0 auto 1.8rem; }
.acciones-cierre { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.acciones-cierre .btn { width: 100%; max-width: 360px; }
.pie-mundo { padding-bottom: 40px; }

@media (min-width: 640px) {
  .mini-tarjetas { grid-template-columns: repeat(3, 1fr); }
  .rincones-historia { gap: 64px; }
  .vecinos { grid-template-columns: 1fr 1fr; gap: 16px; }
  .acciones-cierre { flex-direction: row; justify-content: center; }
  .acciones-cierre .btn { width: auto; }
}
@media (min-width: 900px) {
  /* panorámico 1536×1024: suelo de madera desde el 66 %; Ulu con los pies al 82 % */
  .hero-mundo .capa-ulu { left: 22%; top: 51.8%; width: 15%; }
  .hero-mundo .capa-baraja { left: 20.2%; top: 75.2%; width: 3.3%; }
  .hero-mundo .hero-texto { text-align: left; translate: 0 11vh; } /* el título baja para no pisar el farol de la regadera */
  /* sin el radial oscuro de la landing detrás del texto: taparía el farol de la regadera */
  .hero-mundo .hero-texto::before { content: none; }
  .hero-mundo .velo-hero { background: linear-gradient(180deg, rgba(12, 12, 16, 0.3) 0%, rgba(12, 12, 16, 0) 22%, rgba(12, 12, 16, 0) 62%, rgba(12, 12, 16, 0.7) 88%, var(--bg) 100%), linear-gradient(90deg, rgba(12, 12, 16, 0) 45%, rgba(12, 12, 16, 0.22) 62%, rgba(12, 12, 16, 0.22) 100%); }
  .hero-mundo .sub { margin: 0; }
  .farol { display: block; }
  .farol-3 { display: none; }
  .reflejos { inset: 0 0 40% 0; }
  .rincon-h { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .rincon-h:nth-child(even) .rincon-figura { order: 2; }
  .rincon-figura img { max-width: 480px; margin: 0 auto; }
  .rincon-texto { max-width: 480px; }
  .rincon-texto h3 { font-size: 2rem; }
  .retrato { width: 124px; height: 124px; }
  .vecino { gap: 22px; padding: 20px 22px 20px 18px; }
}

/* Pie de El mundo de Ulu: el descargo completo vive en la landing; aquí una línea. */
.pie-mundo .nota-pie { color: var(--txt-4); font-size: 0.9rem; text-align: center; margin: 0 0 1.2rem; }