/* Cobalto v2 — piezas compartidas por carta, nosotros y reserva.
   Replica el lenguaje visual de la portada: hero neutro con letrero de neón SVG,
   hojas de temporada, hilo de neón, tarjetas en forma de hoja y botón flotante.
   La portada (index.html) lleva estos mismos estilos en línea. */

/* ── Hero neutro ── */
#hero { background: #0a1612; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(26,46,30,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #0d1e10 0%, #0a1612 100%);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 55px 55px;
  opacity: 0.5;
}
.hero-halo {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 36% at 50% 50%, rgba(74,181,232,0.17), transparent 72%);
  opacity: calc(0.12 + var(--neon-level, 1) * 0.88);
}
.leaf-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#leafBack { z-index: 1; }
#leafFront { z-index: 6; }

/* ── Letrero de neón (SVG, letra a letra) ── */
.neon-sign-wrap { position: relative; display: inline-block; }
.neon-sign { margin: 0; font-weight: 300; line-height: 1; }
.neon-sign svg {
  display: block;
  width: var(--sign-w, clamp(280px, 52vw, 680px));
  height: auto;
  overflow: visible;
}
.neon-sign text { font-family: 'Cocogoose', 'Nunito', 'Quicksand', sans-serif; font-weight: 300; }
.neon-fallback {
  display: block;
  font-family: 'Cocogoose', 'Jost', sans-serif;
  font-size: clamp(3rem, 10vw, 8.5rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 18px var(--neon-glow), 0 0 35px var(--neon-glow), 0 0 70px rgba(74,181,232,0.6);
}
.neon-js .neon-fallback,
.neon-sign-wrap.js-neon .neon-fallback {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.nl-tube { fill: rgba(200,215,220,0.035); stroke: rgba(200,222,230,0.24); stroke-width: 1.6; }
.nl-glow-far { fill: var(--neon-glow); opacity: calc(var(--on, 0) * 0.9); }
.nl-glow-near { fill: #9fdcf7; opacity: calc(var(--on, 0) * 0.95); }
.nl-core { fill: #fff; opacity: var(--on, 0); }
.nl-gas {
  fill: none;
  stroke: #c8eeff;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 2400 2400;
  stroke-dashoffset: 2400;
  opacity: 0;
  transition: stroke-dashoffset 0.55s cubic-bezier(.5,0,.2,1), opacity 0.4s;
}
.nl.gas .nl-gas { stroke-dashoffset: 0; opacity: 0.9; }
.nl.lit .nl-gas { opacity: 0; }
.neon-hw path { fill: none; stroke: rgba(150,172,178,0.26); stroke-width: 1.6; stroke-linecap: round; }
.neon-hw-dot { fill: rgba(170,192,198,0.34); }
.neon-ambient {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 220%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(74,181,232,0.12), transparent 70%);
  opacity: var(--neon-level, 1);
  pointer-events: none;
}
.neon-reflection {
  position: absolute;
  bottom: -14px; left: 6%; right: 6%;
  height: 36px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(74,181,232,0.22), transparent);
  filter: blur(10px);
  opacity: var(--neon-level, 1);
  pointer-events: none;
}

/* ── Logo de la navegación encendido ── */
.nav-logo.is-lit {
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(74,181,232,0.9)) drop-shadow(0 0 12px rgba(74,181,232,0.55));
}

/* ── Hilo de neón que recorre la página ── */
.neon-thread {
  position: absolute; left: 0;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.thread-base { fill: none; stroke: rgba(168,216,240,0.08); stroke-width: 1.5; }
.thread-lit {
  fill: none;
  stroke: #bfe9ff;
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--neon-glow)) drop-shadow(0 0 8px rgba(74,181,232,0.6));
}
.thread-head { fill: #fff; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--neon-glow)); transition: opacity 0.3s; }
footer > * { position: relative; z-index: 5; }
/* El hilo llega al botón y lo enciende */
[data-thread-end].is-lit {
  border-color: #bfe9ff;
  color: #fff;
  text-shadow: 0 0 8px rgba(74,181,232,0.9);
  box-shadow: 0 0 0 1px rgba(191,233,255,0.6), 0 0 18px rgba(74,181,232,0.55), inset 0 0 14px rgba(74,181,232,0.35);
  animation: btnIgnite 0.9s steps(1) both;
}
@keyframes btnIgnite {
  0% { opacity: 0.4; } 15% { opacity: 1; } 25% { opacity: 0.5; } 40% { opacity: 1; } 50% { opacity: 0.7; } 60%, 100% { opacity: 1; }
}

/* ── Tarjeta en forma de hoja con luz que recorre el contorno ── */
@property --edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.leaf-card {
  position: relative;
  border-radius: 0 var(--leaf-r, 110px) 0 var(--leaf-r, 110px);
  border-color: transparent !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(74,181,232,0.07), transparent 60%),
    linear-gradient(155deg, rgba(22,36,32,0.88), rgba(12,22,19,0.72));
  box-shadow: 0 30px 90px rgba(4,10,8,0.45);
}
.leaf-card::after,
.edge-light::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background:
    conic-gradient(from var(--edge), transparent 0deg, rgba(220,246,255,1) 40deg, rgba(74,181,232,0.7) 95deg, transparent 160deg, transparent 360deg),
    linear-gradient(rgba(168,216,240,0.16), rgba(168,216,240,0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(74,181,232,0.9)) drop-shadow(0 0 12px rgba(74,181,232,0.4));
  animation: edgeRun var(--edge-dur, 9s) linear infinite;
  pointer-events: none;
}
@keyframes edgeRun { to { --edge: 360deg; } }
/* Solo la luz del contorno, para fotos y mapas que ya tienen su propio fondo */
.edge-light { position: relative; }
.edge-light::after { z-index: 3; }
/* Tarjetas pequeñas: luz más lenta y desfasada entre vecinas para que no giren a la vez */
.leaf-card--calm { --edge-dur: 15s; }
.leaf-card:nth-child(3n+2)::after { animation-delay: -4s; }
.leaf-card:nth-child(3n)::after { animation-delay: -8s; }

/* ── Títulos: la palabra en cursiva va en contorno, como en la portada ── */
.section-title em, .csec-title em, .cta-title em, .pilar-title em, .manifesto-lead em, .plato-hero-name em {
  color: transparent;
  -webkit-text-stroke: 1px rgba(240,235,227,0.65);
  text-shadow: none;
}

/* ── Plato en aro de neón ── */
.neon-ring {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(191,233,255,0.5), 0 0 24px rgba(74,181,232,0.35), 0 30px 80px rgba(0,0,0,0.5);
}

/* ── Botón flotante de reserva (móvil) ── */
.float-reserve {
  position: fixed;
  right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90;
  display: none; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.3rem;
  background: rgba(15,26,22,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(191,233,255,0.45);
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(74,181,232,0.3), 0 10px 30px rgba(0,0,0,0.4);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.3s;
}
.float-reserve.is-on { transform: none; opacity: 1; }
.float-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #bfe9ff;
  box-shadow: 0 0 8px var(--neon-glow), 0 0 14px var(--neon-glow);
  animation: floatDot 2s ease-in-out infinite;
}
@keyframes floatDot { 50% { opacity: 0.45; } }

@media (max-width: 900px) {
  .float-reserve { display: inline-flex; }
  .thread-lit { filter: none; stroke: #9fdcf7; }
  .leaf-card { --leaf-r: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-card::after, .edge-light::after { animation: none; --edge: 200deg; }
  .float-dot, [data-thread-end].is-lit { animation: none; }
  .nl-gas { transition: none; }
}