/* ==========================================================================
   Oasis Digital — layout principal
   Escena 3D en un canvas fijo de fondo (#gl-canvas); las secciones usan
   scrims semitransparentes para dejar ver el 3D detrás del texto.
   ========================================================================== */

body {
  background: var(--noche);
  color: var(--text);
  font-family: var(--font-body);
}

#gl-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ===== Capa de desierto (dunas) sobre el agua =====
   --flood: 0% = desierto completo; 115% = totalmente inundado (solo agua).
   La máscara deja "entrar" el agua desde abajo con un borde suave. */
#desert-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --flood: 0%;
  -webkit-mask-image: linear-gradient(to top, transparent var(--flood), #000 calc(var(--flood) + 14%));
  mask-image: linear-gradient(to top, transparent var(--flood), #000 calc(var(--flood) + 14%));
}

/* Capa de composición propia para las dos capas fijas del fondo: obliga al
   navegador a calcular las zonas a repintar POR CAPA en vez de contra toda la
   página, que es donde Opera se equivocaba y dejaba restos del fotograma anterior.

   SOLO en punteros finos (escritorio). El fallo era de Opera de escritorio, y en
   móvil estas dos capas a pantalla completa cuestan ~20 MB de memoria de video
   más dos pasadas de composición por fotograma — caro en GPUs de gama media. */
@media (hover: hover) and (pointer: fine) {
  #gl-canvas,
  #desert-layer { will-change: transform; }
}

.dune {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.dune-1 {
  background-image: url("../assets/img/desert-1-1920.jpg");
}

.dune-2 {
  background-image: url("../assets/img/desert-2-1920.jpg");
  opacity: 0; /* crossfade controlado por scroll-effects.js */
}

/* Velo oscuro sutil sobre el desierto para que el texto claro respire */
#desert-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 19, 26, 0.5), rgba(5, 19, 26, 0.18) 45%, rgba(5, 19, 26, 0.55));
}

@media (max-width: 820px) {
  .dune-1 { background-image: url("../assets/img/desert-1-1200.jpg"); }
  .dune-2 { background-image: url("../assets/img/desert-2-1200.jpg"); }
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

section {
  position: relative;
  padding-block: var(--space-xl);
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.serif em {
  font-style: italic;
  color: var(--oasis);
  font-weight: 500;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oasis);
  margin-bottom: var(--space-sm);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
}

h2 { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
h3 { font-size: var(--fs-h3); }

/* Cuerpo de texto más claro y consistente en todos los slides — se lee mejor
   sobre el 3D. --text-muted queda solo para labels/chips/pies. */
p {
  color: #cfe0e6;
  font-size: var(--fs-body);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
  white-space: nowrap;
}

.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

.btn-primary { background: var(--oasis); color: #04231d; }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--shadow-glow); }

.btn-ghost {
  background: var(--surface-solid);
  border: 1px solid var(--border-glass);
  color: var(--text);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--oasis); box-shadow: var(--shadow-glow); }

:focus-visible { outline: 2px solid var(--oasis-bright); outline-offset: 3px; }

/* ===== Overlay de entrada (COMENZAR) ===== */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(5, 19, 26, 0.55), rgba(5, 19, 26, 0.9) 80%),
    url("../assets/img/desert-1-1920.jpg") center / cover no-repeat var(--noche);
  transition: opacity 0.8s var(--ease-smooth), visibility 0.8s;
}
#intro-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-inner { padding: var(--space-md); max-width: 640px; }
.intro-logo { display: inline-block; margin-bottom: var(--space-sm); animation: float-soft 5s ease-in-out infinite; }
.intro-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: var(--space-md);
}
.intro-brand span { color: var(--oasis); }
.intro-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--text);
  margin-bottom: var(--space-lg);
}
.begin-btn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  color: var(--noche);
  background: var(--oasis);
  padding: 1.1rem 3rem;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.begin-btn:hover, .begin-btn:focus-visible { transform: scale(1.05); box-shadow: var(--shadow-glow); }
.skip-intro {
  display: block;
  margin: var(--space-md) auto 0;
  color: var(--text-dim);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.skip-intro:hover { color: var(--text-muted); }

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to bottom, rgba(5, 19, 26, 0.85), transparent);
}
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
/* El espacio va solo entre el ícono y el wordmark; "OASIS" y "DIGITAL" quedan
   unidos (antes el gap del flex los separaba) */
.logo svg { margin-right: 0.5rem; }
.logo span { color: var(--oasis); transition: color 0.6s var(--ease-smooth); }

/* La "gota" del logo (círculo central) parpadea suavemente */
.logo svg circle:first-child { animation: drop-blink 3.2s ease-in-out infinite; }

/* Al salir del hero, el header REFUERZA el mismo negro difuminado — nunca
   cambia de color. Los colores de marca (logo blanco, "DIGITAL" turquesa,
   barras de sonido turquesa) se conservan en todo el recorrido.

   El refuerzo no es estético, es de legibilidad: el header es fijo y se monta
   sobre la sección de portafolio, que tiene fondo claro (#f4ead9). Con el
   degradado base, a la altura del logo (50% del header) solo llega alpha 0.43,
   y ahí el turquesa daba 2.08:1 — ilegible (el mínimo es 4.5:1). Estos topes
   dejan alpha 0.84 en esa línea, que rinde 7.9:1 sobre el portafolio y 7.5:1
   incluso sobre blanco puro. */
.site-header {
  transition: background 0.6s var(--ease-smooth), box-shadow 0.6s var(--ease-smooth);
}
.site-header.scrolled {
  background: linear-gradient(to bottom,
    rgba(5, 19, 26, 0.92) 0%,
    rgba(5, 19, 26, 0.82) 60%,
    rgba(5, 19, 26, 0) 100%);
  box-shadow: 0 6px 30px rgba(5, 19, 26, 0.35);
}
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.site-header .btn { padding: 0.65rem 1.3rem; font-size: 0.8rem; }

/* Toggle de sonido (barras animadas tipo ecualizador) */
.sound-toggle {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  padding: 4px;
}
.sound-toggle .bar {
  width: 3px;
  height: 6px;
  background: var(--oasis);
  border-radius: 2px;
}
.sound-toggle.is-on .bar { animation: eq 0.9s ease-in-out infinite; }
.sound-toggle.is-on .bar:nth-child(2) { animation-delay: 0.15s; }
.sound-toggle.is-on .bar:nth-child(3) { animation-delay: 0.3s; }
.sound-toggle.is-on .bar:nth-child(4) { animation-delay: 0.45s; }
.sound-toggle:not(.is-on) .bar { height: 6px; opacity: 0.4; }
@keyframes eq {
  0%, 100% { height: 5px; }
  50% { height: 20px; }
}

/* ===== Hero ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--space-xl);
}
/* svh = alto visible con la barra del navegador desplegada. Sin esto, los CTA y
   el indicador SCROLL quedan por debajo del corte en Safari iOS (ver reset.css) */
@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* El velo de #desert-layer ya oscurece; aquí solo un refuerzo lateral suave */
  background: linear-gradient(100deg, rgba(5, 19, 26, 0.55) 0%, rgba(5, 19, 26, 0.2) 55%, transparent 100%);
  pointer-events: none;
}
.hero-content { position: relative; max-width: 820px; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--space-md); }
.hero-subtitle { font-size: 1.15rem; max-width: 52ch; margin-bottom: var(--space-md); }
/* Tercera línea del subtítulo: mismo tipo de letra, color y separación que las
   dos primeras líneas — solo en cursiva */
.subtitle-accent {
  display: block;
  font-style: italic;
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-cue::before {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--oasis), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ===== Capítulos narrativos (Atracción / Emoción / Acción) ===== */
.chapter {
  min-height: 92vh;
  display: flex;
  align-items: center;
}
@supports (min-height: 92svh) {
  .chapter { min-height: 92svh; }
}
.chapter-inner { max-width: 640px; }
/* Sombra reforzada: el texto se lee igual de nítido sobre las dunas brillantes
   (desktop) que sobre el fondo oscuro (móvil), sin cambiar el color de la letra.
   El contraste real lo da la primera sombra (0 1px 3px); la segunda solo asienta
   el bloque. Se bajó de 28px a 12px de desenfoque: un blur grande agranda mucho
   el área que el navegador debe repintar por cada titular al hacer scroll, y era
   lo que hacía visible el rastro oscuro en Opera. */
.chapter-inner h2,
.chapter-inner p,
.bridge-line,
.hero-content h1,
.hero-subtitle { text-shadow: 0 1px 3px rgba(5, 19, 26, 0.85), 0 2px 12px rgba(5, 19, 26, 0.85); }
.chapter:nth-child(even) .chapter-inner { margin-left: auto; text-align: right; }
.chapter-num {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arena);
  display: block;
  margin-bottom: var(--space-sm);
}
.chapter h2 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: var(--space-md); }
.chapter p { font-size: 1.15rem; }

/* ===== Puente / origen ===== */
.bridge { text-align: center; }
.bridge-line {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  max-width: 22ch;
  margin-inline: auto;
  color: var(--text);
}

/* Scrims para las secciones brand-first (dejan ver el 3D, pero legibles) */
.positioning { background: rgba(5, 19, 26, 0.55); }
.services { background: rgba(5, 19, 26, 0.78); }
.portfolio { background: rgba(8, 34, 44, 0.72); }
.plans { background: rgba(5, 19, 26, 0.82); }
.audit { background: rgba(8, 34, 44, 0.6); }
.contact { background: rgba(5, 19, 26, 0.85); }
.closing { background: rgba(8, 34, 44, 0.5); text-align: center; }

/* ===== Posicionamiento ===== */
.positioning .wrap { max-width: 900px; }
.positioning h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: var(--space-md); }
.positioning p { max-width: 60ch; font-size: 1.1rem; }

/* ===== Marquee de servicios (banda que se desliza de lado, patrón Crafted) ===== */
.services-marquee {
  overflow: hidden;
  padding-block: 1.1rem;
  background: #04141b;
  border-block: 1px solid rgba(124, 255, 230, 0.08);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-lg);
  padding-left: var(--space-lg);
  animation: marquee 26s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.marquee-track span.dot { color: var(--oasis); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* la pista está duplicada → loop perfecto */
}

/* ===== Servicios (lista tipo Crafted) ===== */
.services-header { max-width: 640px; margin-bottom: var(--space-lg); }
/* En Planes, igualar el hueco texto→planes (32px) al de título→texto (32px),
   igual que se hizo en Contacto (Servicios y Trabajo mantienen 64px). */
.plans .services-header { margin-bottom: var(--space-md); }
.service-cta {
  grid-column: 2;
  justify-self: start;
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--oasis-bright);
  border-bottom: 1px solid var(--oasis-deep);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.service-cta:hover, .service-cta:focus-visible { color: var(--arena); border-color: var(--arena); }

/* ===== Acordeón de servicios (patrón Crafted: +/− y visual al costado) ===== */
.services-accordion {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-lg);
  align-items: start;
}

.acc-item { border-top: 1px solid var(--border-glass); }
.acc-item:last-child { border-bottom: 1px solid var(--border-glass); }

.acc-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  text-align: left;
  padding-block: 1.4rem;
  cursor: pointer;
}
.acc-head h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  color: var(--text);
  transition: color var(--dur-fast);
}
.acc-head:hover h3, .acc-head:focus-visible h3 { color: var(--oasis-bright); }

/* Icono +/− en círculo, como Crafted */
.acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: var(--surface-glass);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform 0.4s var(--ease-smooth);
}
.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--oasis-bright);
  border-radius: 1px;
  transition: transform 0.4s var(--ease-smooth), opacity 0.3s;
}
.acc-icon::before { width: 12px; height: 2px; }
.acc-icon::after { width: 2px; height: 12px; }
.acc-item.is-open .acc-icon { background: var(--oasis); border-color: var(--oasis); transform: rotate(180deg); }
.acc-item.is-open .acc-icon::before { background: var(--noche); }
.acc-item.is-open .acc-icon::after { opacity: 0; transform: rotate(90deg); }

/* Cuerpo expandible (grid-rows: técnica de animación de altura fluida) */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-smooth);
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-bottom: 0;
  /* min-height:0 mantiene el colapso del acordeón (grid-rows 0fr → 1fr) sin
     que se asome texto en los ítems cerrados */
  min-height: 0;
}
.acc-item.is-open .acc-body-inner { padding-bottom: var(--space-md); }
.acc-body-inner > p { max-width: 52ch; }
.acc-body-inner .service-cta { margin-top: 0.2rem; }

.service-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.service-subs li {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-glass);
  border-radius: 999px;
}

/* --- Panel visual del servicio activo (sticky al costado) --- */
.services-visual {
  position: sticky;
  top: 110px;
}
.svc-panel { display: none; }
.svc-panel.is-active { display: block; animation: panel-in 0.5s var(--ease-smooth); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mockup de informe de diagnóstico (panel Auditoría) */
.report-mock {
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  background: var(--noche-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-display);
}
.report-score { font-family: var(--font-serif); font-size: 1.9rem; color: var(--arena); }
.report-score i { font-style: normal; font-size: 0.9rem; color: var(--text-dim); }
.report-list { display: grid; gap: 0.65rem; padding: 1.1rem 1.2rem; }
.report-list li { position: relative; padding-left: 1.7rem; font-size: 0.9rem; color: var(--text-muted); }
.report-list li b { color: var(--arena); font-weight: 600; }
.report-list li.ok::before { content: "✓"; position: absolute; left: 0; color: var(--oasis); font-weight: 700; }
.report-list li.fail::before { content: "✗"; position: absolute; left: 0; color: var(--arena); font-weight: 700; }
.report-foot {
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--border-glass);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--oasis-bright);
}

/* Marco de navegador para la captura de web */
.browser-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--noche-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.browser-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.browser-frame img { width: 100%; height: auto; display: block; }

/* Etiqueta que aclara qué es cada panel visual */
.panel-tag {
  display: block;
  text-align: center;
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arena);
}

/* Mockup de post de Instagram */
.ig-mock {
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--noche-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.ig-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
}
.ig-result {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--oasis-bright);
  white-space: nowrap;
}
.ig-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--oasis-bright), var(--oasis-deep));
}
.ig-mock img { width: 100%; height: auto; display: block; }

/* Mockup de dispositivo (laptop) themed — mismo ancho que los otros paneles,
   formato apaisado para que armonice (no ocupa tanto alto como un post) */
/* ---- Muestra de contenido para redes (imagen de piezas) ---- */
.redes-shot {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.ig-caption { padding: 0.7rem 0.2rem 0; font-size: 0.85rem; color: var(--text-muted); text-align: center; }
.ig-actions { padding: 0.6rem 0.9rem 0.2rem; letter-spacing: 0.4em; color: var(--text-muted); }
.ig-caption { padding: 0 0.9rem 0.9rem; font-size: 0.85rem; color: var(--text-muted); }
.ig-caption strong { color: var(--text); }

/* Mockup de chat de WhatsApp automatizado */
.chat-mock {
  max-width: 400px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: #0b141a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: #1f2c33;
  font-family: var(--font-display);
}
.chat-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oasis-deep);
  font-size: 1rem;
}
.chat-head strong { display: block; font-size: 0.9rem; color: var(--text); }
.chat-head em { font-style: normal; font-size: 0.72rem; color: var(--oasis); }
/* align-content: start evita que un mensaje solo se estire hasta llenar
   todo el alto del chat */
.chat-body { display: grid; gap: 0.5rem; padding: 1rem; align-content: start; }
.msg {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
}
.msg.in { background: #1f2c33; justify-self: start; border-top-left-radius: 0.2rem; }
.msg.out { background: #005c4b; justify-self: end; border-top-right-radius: 0.2rem; }
.chat-note {
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

/* Chat de cotización (sección contacto): reutiliza la estética .chat-mock */
.quote-chat {
  max-width: 560px;
  /* mismo espacio que hay entre el título y la descripción (32px), para que el
     hueco sobre la cabecera del chat no sea el doble */
  margin-top: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: #0b141a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
/* Markdown dentro de las burbujas de Duna (negritas y listas) */
.msg strong { color: var(--oasis-bright); font-weight: 700; }
.msg p { margin: 0; }
.msg p + p { margin-top: 0.4rem; }
.msg ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.msg li { margin-bottom: 0.2rem; }
.quote-chat .chat-head { background: #14232b; border-bottom: 1px solid rgba(124, 255, 230, 0.1); }
/* Avatar de Duna (logo) con un halo que respira */
.chat-avatar-logo { background: rgba(47, 230, 196, 0.12); animation: avatar-breathe 3s ease-in-out infinite; }
@keyframes avatar-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 230, 196, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(47, 230, 196, 0); }
}
.quote-chat .chat-body {
  min-height: 260px;
  max-height: 360px;
  overflow-y: auto;
  gap: 0.6rem;
  scroll-behavior: smooth;
}
/* Aparición suave de cada mensaje */
.quote-chat .msg { animation: msg-in 0.35s var(--ease-smooth); }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Indicador "escribiendo…" con 3 puntos animados */
.msg.typing { display: inline-flex; gap: 4px; align-items: center; }
.msg.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--oasis-bright);
  animation: typing-dot 1s ease-in-out infinite;
}
.msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.chat-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.8rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-chip {
  font-family: var(--font-display);
  font-size: 0.82rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--oasis-deep);
  color: var(--oasis-bright);
  transition: all var(--dur-fast);
}
.chat-chip:hover, .chat-chip:focus-visible { background: var(--oasis); color: var(--noche); }
.chat-text-input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  /* 16px exactos: por debajo de ese umbral Safari iOS hace zoom a la página al
     enfocar el campo y NO vuelve solo — justo al momento de cotizar */
  font-size: 1rem;
}
.chat-send {
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: var(--oasis);
  color: var(--noche);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}
.chat-send:disabled { opacity: 0.4; cursor: default; }
.msg.typing { color: var(--text-dim); font-style: italic; }
.chat-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: var(--success-whatsapp);
  color: #08210f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  justify-self: start;
}

/* ===== Portafolio — fondo claro con imágenes grandes (patrón Crafted) ===== */
.portfolio.light {
  background: #f4ead9; /* arena clara de marca (equivale al celeste claro de Crafted) */
}
.portfolio.light .eyebrow { color: var(--arena-deep); }
.portfolio.light h2,
.portfolio.light h3 { color: #1c2b31; }
.portfolio.light p { color: #4c5e66; }

.case-tag { font-family: var(--font-display); font-size: var(--fs-small); color: var(--oasis); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-xs); display: block; }
.portfolio.light .case-tag { color: var(--arena-deep); }
.case-link { margin-top: var(--space-sm); display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 600; color: var(--oasis-deep); }

/* ===== Showcase de trabajos: iPhone + geometría de fondo ===== */

/* Estructuras geométricas decorativas */
.geo-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.geo { position: absolute; display: block; opacity: 0.35; }
.geo-circle-1 {
  width: 340px; height: 340px;
  border: 1.5px solid var(--arena-deep);
  border-radius: 50%;
  top: 8%; left: -90px;
}
.geo-circle-2 {
  width: 180px; height: 180px;
  border: 1.5px solid var(--arena-deep);
  border-radius: 50%;
  bottom: 12%; right: 6%;
  opacity: 0.25;
}
.geo-square {
  width: 220px; height: 220px;
  border: 1.5px solid var(--arena-deep);
  transform: rotate(28deg);
  top: 18%; right: -60px;
  opacity: 0.22;
}
.geo-line {
  width: 42%; height: 1.5px;
  background: linear-gradient(to right, transparent, var(--arena-deep), transparent);
  bottom: 22%; left: 4%;
  opacity: 0.3;
}

/* Layout: iPhone + caption al costado (columna en móvil) */
.phone-showcase {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
  justify-content: center;
}

/* iPhone 17 Pro Max en CSS (marco titanio + isla dinámica) */
.iphone {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 390 / 800;
  border-radius: 52px;
  background: #101418;
  border: 3px solid #3a3f45;
  box-shadow:
    inset 0 0 0 2px #0a0d10,
    0 40px 90px rgba(28, 43, 49, 0.4);
  padding: 10px;
  margin-inline: auto;
}
.iphone-island {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 22px;
  background: #060809;
  border-radius: 999px;
  z-index: 3;
}
.iphone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #05131a;
  /* Barra de estado superior: deja la isla dinámica sobre una franja oscura,
     así el encabezado real del sitio del cliente empieza DEBAJO y no se pierde */
  padding-top: 46px;
}
.iphone-screen::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46px;
  background: #05131a;
  z-index: 2;
}
.phone-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.phone-track::-webkit-scrollbar { display: none; }
.phone-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}
.phone-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.phone-invite {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(47, 230, 196, 0.16), transparent 70%),
    #07202b;
}
.phone-invite-inner { text-align: center; padding: var(--space-md); }
.phone-invite-inner p {
  font-size: 1.3rem;
  color: var(--text);
  line-height: 1.3;
  margin: 0.6rem 0 1rem;
}

/* Caption sincronizada + "cómo lo hicimos" en 3 pasos */
.phone-caption { max-width: 440px; }
.phone-caption h3 { color: #1c2b31; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin: 0.2rem 0 0.4rem; }

.work-steps {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  border-top: 1px solid rgba(28, 43, 49, 0.18);
  padding-top: var(--space-md);
}
.work-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: baseline;
}
.work-steps .step-num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--arena-deep);
  line-height: 1;
}
.work-steps strong { display: block; color: #1c2b31; font-family: var(--font-display); font-size: 0.98rem; }
.work-steps em { font-style: normal; color: #4c5e66; font-size: var(--fs-small); }

.work-nav { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }
.work-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(28, 43, 49, 0.3);
  color: #1c2b31;
  font-size: 1.1rem;
  transition: all var(--dur-fast);
}
.work-arrow:hover, .work-arrow:focus-visible { background: #1c2b31; color: #f4ead9; }

/* ===== Planes (carrusel para compactar) ===== */
.plans-carousel { position: relative; }
.plans-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.plans-track::-webkit-scrollbar { display: none; }
.plans-track .plan-card {
  flex: 0 0 min(86%, 380px);
  scroll-snap-align: start;
}
/* Aire arriba para que el badge "Más elegido" (top negativo) no se corte
   contra el overflow del carrusel */
.plans-track { padding-top: 1rem; }
.plans-nav { justify-content: flex-end; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: transform var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast);
}
.plan-card:hover { transform: translateY(-6px); border-color: var(--oasis); }
.plan-card.featured { border-color: var(--oasis); box-shadow: var(--shadow-glow); }
.plan-badge {
  position: absolute;
  top: -0.75rem; left: 50%;
  transform: translateX(-50%);
  background: var(--oasis);
  color: #04231d;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}
.plan-name { font-family: var(--font-serif); font-weight: 500; font-size: 2rem; color: var(--text); margin-bottom: 0.1rem; }
.plan-tier {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 0.8rem;
}
.plan-desc { margin-bottom: var(--space-md); }
.plan-desc em { font-style: italic; color: var(--text); }

/* Lista maestra idéntica en los 3 planes: lo incluido destaca, lo no incluido
   va tachado y atenuado — se VE lo que te pierdes al elegir el plan menor */
.plan-includes { display: grid; gap: 0.6rem; margin-bottom: var(--space-md); flex: 1; }
.plan-includes li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; }
.plan-includes li.on { color: var(--text); }
.plan-includes li.on::before { content: "✓"; position: absolute; left: 0; color: var(--oasis); font-weight: 700; }
.plan-includes li.off {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(159, 180, 188, 0.6);
  opacity: 0.55;
}
.plan-includes li.off::before { content: "—"; position: absolute; left: 0; color: var(--text-dim); }
.plan-cta { justify-content: center; }

.inline-link { color: var(--oasis-bright); border-bottom: 1px solid var(--oasis-deep); }
.inline-link:hover { color: var(--arena); border-color: var(--arena); }

/* ===== Auditoría ===== */
.audit-inner { max-width: 720px; text-align: center; margin-inline: auto; }
.audit-inner h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: var(--space-sm); }
.audit-inner p { max-width: 54ch; margin: 0 auto var(--space-md); }

/* ===== Contacto ===== */
.contact .wrap { max-width: 760px; }
.contact-form { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--surface-solid); border: 1px solid var(--border-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-small); color: var(--text-muted); }
.field input, .field select, .field textarea { padding: 0.8rem 1rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-glass); color: var(--text); }
.field textarea { resize: vertical; min-height: 100px; }
/* Fila de contacto del footer (WhatsApp / Instagram / email al final) */
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-glass);
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
}
.footer-contact a:hover { color: var(--oasis-bright); }
/* Ficha del ícono de la app: glifo en color de marca (oasis) sobre fondo oasis
   translúcido — sin colores externos (mismo recurso que el avatar de Duna) */
.contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(47, 230, 196, 0.12);
  color: var(--oasis);
}
.contact-ico svg { width: 18px; height: 18px; display: block; }

/* ===== Cierre ===== */
.closing-line { font-size: clamp(1.8rem, 4.5vw, 3.4rem); color: var(--text); margin-bottom: var(--space-md); }

/* ===== Footer ===== */
.site-footer { padding-block: var(--space-lg); border-top: 1px solid var(--border-glass); background: rgba(8, 34, 44, 0.92); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--fs-small); color: var(--text-muted); }
.footer-tagline { margin-top: 0.6rem; font-style: italic; color: var(--text-muted); font-size: 1rem; line-height: 1.4; }
.footer-bottom { margin-top: var(--space-md); font-size: 0.8rem; color: var(--text-dim); }

/* ===== Área táctil en dispositivos de dedo =====
   Enlaces medidos entre 21 y 30 px de alto (menú del pie, "Cotizar →", el toggle
   de sonido a 29×22): por debajo de los 44 px recomendados hay que apuntar con
   precisión. Un pseudo-elemento invisible y centrado agranda el blanco del dedo
   SIN mover ni agrandar nada de lo que se ve — por eso no se toca el layout.
   Va por tipo de puntero y no por ancho: importa el dedo, no la pantalla.
   (hover: none) cubre además los táctiles que se declaran de puntero fino. */
@media (pointer: coarse), (hover: none) {
  .logo,
  .sound-toggle,
  .skip-intro,
  .footer-links a,
  .footer-contact a,
  .service-cta,
  .case-link,
  .chat-chip { position: relative; }

  .logo::after,
  .sound-toggle::after,
  .skip-intro::after,
  .footer-links a::after,
  .footer-contact a::after,
  .service-cta::after,
  .case-link::after,
  .chat-chip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== Botones flotantes ===== */
#chat-widget:empty { display: none; }

/* ===== Desktop-first: pantallas anchas ===== */
@media (min-width: 1440px) {
  :root { --max-width: 1360px; --fs-hero: clamp(4rem, 6vw, 7rem); }
  .hero-content { max-width: 900px; }
}
@media (min-width: 1920px) { :root { --max-width: 1600px; } }

/* ===== Responsive (angosto) ===== */
@media (max-width: 900px) {
  /* iPhone showcase: en pantallas angostas el teléfono queda arriba y la
     caption debajo, centrados */
  .phone-showcase { grid-template-columns: 1fr; text-align: center; }
  .phone-caption { margin-inline: auto; }
  .work-nav { justify-content: center; }
  .work-steps { justify-items: start; text-align: left; }
  /* Pie de contacto en vertical: WhatsApp / Instagram / correo uno bajo otro */
  .footer-contact { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  /* Acordeón: en pantallas angostas el visual pasa a ocultarse (el contenido
     de cada ítem ya es completo por sí solo) */
  .services-accordion { grid-template-columns: 1fr; }
  .services-visual { display: none; }
  .work-item { grid-template-columns: 1fr; gap: var(--space-md); }
  .work-item.reverse .work-media { order: 0; }
  .services-bar { gap: 0 var(--space-md); }
  .chapter:nth-child(even) .chapter-inner { text-align: left; margin-left: 0; }
}
@media (max-width: 640px) {
  section { padding-block: var(--space-lg); }

  /* .btn lleva white-space: nowrap, así que no puede encoger. En pantallas
     angostas eso cortaba el CTA principal ("Quiero mi Diagnóstico Oasis Gratis →"):
     medido a 320px pedía 398px y se salía 46px, ocultos por overflow-x: hidden.
     Se le permite saltar de línea y se centra el texto resultante. */
  .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    /* 28px de padding lateral dejaban el CTA principal 9px corto a 390px y lo
       hacían saltar de línea sin necesidad; con 20px entra de una sola línea */
    padding-inline: 1.25rem;
  }

  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero::before { background: linear-gradient(to bottom, rgba(5, 19, 26, 0.55), rgba(5, 19, 26, 0.8)); }
  .chapter { min-height: 80vh; }
  @supports (min-height: 80svh) {
    .chapter { min-height: 80svh; }
  }

  /* Header móvil ordenado: solo logo + sonido (sin botón "Cotizar ahora") */
  .site-header { padding-inline: var(--space-md); }
  .site-header .btn { display: none; }
  .logo { font-size: 1rem; }
  .sound-toggle { height: 22px; }

  /* Servicios: las píldoras se ven amontonadas en móvil → checklist limpio */
  .service-subs { flex-direction: column; gap: 0.5rem; }
  .service-subs li {
    border: none;
    padding: 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text);
    animation: none; /* sin pulso en móvil: prioriza legibilidad */
  }
  .service-subs li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--oasis);
    font-weight: 700;
  }

  /* Trabajo: en móvil se ocultan los pasos "cómo lo hicimos" para no alargar */
  .work-steps { display: none; }

  /* ---- Planes: recuperar el ancho que se perdía en cadena ----
     Antes, en una pantalla de 375px al texto llegaban solo 201px (54%):
     375 − 64 (padding del .wrap) = 311 → ×86% (flex-basis) = 267 → −64 (padding
     de la tarjeta) = 201. Con eso 6 de los 9 ítems de la lista se partían en dos
     líneas y la tarjeta medía 739px de alto.
     Se recupera ancho en los tres puntos: el carrusel sale del margen del .wrap,
     la tarjeta ocupa 88vw y el padding interno baja de 32px a 20px. */
  .plans-carousel { margin-inline: calc(var(--space-md) * -1); }
  .plans-track {
    padding-inline: var(--space-md);
    gap: var(--space-sm);
  }
  /* 88vw deja asomar la tarjeta siguiente — la señal de que se desliza */
  .plans-track .plan-card { flex: 0 0 88vw; }
  .plan-card { padding: 1.25rem; }
  .plans-nav { margin-inline: var(--space-md); }
}

/* Pantallas muy angostas (≤360px: iPhone SE, Android de entrada). El ítem más
   largo de la lista de planes ("Anuncios locales segmentados") necesita 260px
   para entrar en una línea; a 88vw con 20px de padding solo quedan 240. Se
   aprieta el padding y se ensancha la tarjeta para no volver a las dos líneas. */
@media (max-width: 360px) {
  .plans-track { padding-inline: var(--space-sm); }
  .plans-track .plan-card { flex: 0 0 92vw; }
  .plan-card { padding: 1rem; }
}