/*
Theme Name: Cortade
Theme URI: https://cortade.tech
Author: Roberto Cortade
Author URI: https://cortade.tech
Description: Tema a medida para Cortade — estudio digital con IA. Diseño editorial cinematográfico con vídeos sincronizados al scroll. Incluye home, página de servicio QR interactivo y zona editable mediante ACF.
Version: 2.1.5
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Propietaria — uso exclusivo de Cortade
Text Domain: cortade

v2.1.5 — secciones nuevas de la página QR Interactivo:
  · 01 Tipos de QR        (.tipos-grid, .tipo-card, .tipo-icono, ...)
  · 04 Para quién         (.sectores-grid, .sector-card, .sector-imagen, ...)
  · 06 Confía en Cortade  (.trust-grid, .trust-card, .trust-icono, ...)
  · 07 Lista de espera    (.qr-waitlist-section, .qr-waitlist-title, ...)
  · .btn-large
  · .qr-section-subtitle
  Reglas añadidas al final del archivo (sin tocar nada anterior).
*/

/* ==========================================================================
   VARIABLES Y BASE
   ========================================================================== */
:root{
  --bg: #02050E;
  --bg-2: #060A18;
  --bg-3: #0B1224;
  --ink: #ECF1F9;
  --ink-2: #B8C2D6;
  --ink-3: #7B8699;
  --ink-mute: #4A5670;
  --ink-line: rgba(236, 241, 249, 0.08);
  --ink-line-2: rgba(236, 241, 249, 0.14);
  --cyan: #22D3EE;
  --cyan-soft: #67E8F9;
  --warm: #D4A574;
  --warm-2: #B8956A;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior: auto;
  /* overflow-x clip en html (no en body) NO rompe position:sticky de los hijos */
  overflow-x: clip;
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  /* IMPORTANTE: el body NO debe llevar overflow — rompería el position:sticky
     del contenedor de vídeo. El control de scroll horizontal va en html. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grano fotográfico sutil */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: overlay;
}

::selection{ background: var(--cyan); color: var(--bg); }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   BOTÓN ACTIVAR VÍDEOS — detección real de autoplay (no media query)
   --------------------------------------------------------------------------
   El botón está OCULTO por defecto en TODOS los dispositivos. Un detector
   en functions.php (Sección 10) prueba si el navegador permite autoplay
   silenciado al cargar la página:
     · Si lo permite (Android Chrome, escritorio, etc.) → el botón sigue oculto.
     · Si lo rechaza (iOS Safari, ahorro de energía, navegadores estrictos)
       → el JS añade la clase .is-visible y el botón aparece para que el
       usuario pueda desbloquear los vídeos con un toque.
   Esto sustituye al media query de S5 (que mostraba el botón en cualquier
   móvil, incluyendo Android donde no hace falta). La regla de tamaño en
   móvil del bloque responsive sigue siendo válida porque solo aplica
   cuando el botón es visible.
   ========================================================================== */
.unlock{
  display: none;  /* Oculto por defecto en todos los dispositivos */
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 200;
  border: 1px solid var(--ink-line-2);
  border-radius: 100px;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  align-items: center;
  gap: 0.5rem;
}

.unlock::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  animation: pulse 1.4s ease infinite;
}

.unlock:hover{ transform: translateY(-2px); background: var(--cyan); color: var(--bg); }
.unlock.activated{ opacity: 0; pointer-events: none; transform: translateY(-10px); }

/* El JS añade .is-visible solo cuando detecta que el autoplay está bloqueado */
.unlock.is-visible{
  display: inline-flex;
}

@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ==========================================================================
   NAV — header con fondo opaco al hacer scroll
   --------------------------------------------------------------------------
   El header empieza transparente (sobre el hero, donde queda bien sin fondo).
   Al hacer scroll, JS le añade la clase .scrolled y aparece un fondo oscuro
   semitransparente con blur tipo cristal esmerilado para que los textos del
   menú siempre se lean sin mezclarse con el contenido que pasa por detrás.
   ========================================================================== */
.site-nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), padding 0.4s var(--ease);
}

.site-nav.scrolled{
  background: rgba(2, 5, 14, 0.78);
  border-bottom-color: var(--ink-line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nav-brand{
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.nav-brand .paren{ color: var(--warm); font-style: italic; }

.nav-meta{ display: flex; gap: 2rem; align-items: center; list-style: none; }
.nav-meta a{ color: var(--ink-2); transition: color 0.3s; }
.nav-meta a:hover{ color: var(--cyan); }

.nav-cta{
  border: 1px solid var(--ink-2);
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  color: var(--ink) !important;
  transition: all 0.3s var(--ease);
}
.nav-cta:hover{ background: var(--ink); color: var(--bg) !important; border-color: var(--ink); }

/* ==========================================================================
   SCROLL-SCENE (vídeo FIJO mientras se pasa la sección + bucle fluido)
   --------------------------------------------------------------------------
   El vídeo se reproduce nativo en bucle (fluido 100%) y se queda PEGADO
   en su sitio mientras el usuario hace scroll por toda la sección, gracias
   a position:sticky en .sticky-wrap.
     · .scroll-scene es alto (200vh) → da recorrido de scroll
     · .sticky-wrap mide 100vh y se queda pegado arriba (top:0)
     · cuando la sección termina, el vídeo se libera y sigue la página
   --p (0→1) lo calcula main.js para el parallax/zoom sutil del contenido.
   ========================================================================== */
.scroll-scene{
  /* 200vh: el vídeo permanece fijo durante 1 pantalla completa de scroll */
  height: 200vh;
  position: relative;
  background: var(--bg);
}

.sticky-wrap{
  height: 100vh;
  position: -webkit-sticky; /* compatibilidad Safari */
  position: sticky;
  top: 0;
  overflow: hidden;
  /* z-index bajo para que las secciones siguientes pasen por encima */
  z-index: 1;
}

/* Canvas del scroll-sync: aquí se dibujan los frames */
.scroll-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  background: var(--bg-2);
}

/* Poster de respaldo: visible mientras los frames precargan.
   Cuando la escena tiene la clase .frames-ready, se desvanece. */
.scroll-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-2);
  transition: opacity 0.6s ease;
}

.scroll-scene.frames-ready .scroll-poster{
  opacity: 0;
}

.video-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(2,5,14,0.95) 0%, rgba(2,5,14,0.65) 45%, rgba(2,5,14,0.1) 100%),
    linear-gradient(180deg, rgba(2,5,14,0.55) 0%, rgba(2,5,14,0.15) 50%, rgba(2,5,14,0.85) 100%);
}

.video-grid{
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(236,241,249,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,241,249,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  /* Parallax sutil de la rejilla */
  transform: translateY(calc(var(--p,0) * -80px));
  opacity: 0.5;
  will-change: transform;
}

.hero-content{
  position: relative;
  z-index: 3;
  height: 100%;
  padding: 8rem 7vw 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1400px;
  /* Parallax suave del contenido + leve desvanecido al salir */
  transform: translateY(calc(var(--p,0) * -50px));
  opacity: calc(1 - var(--p,0) * 0.55);
  will-change: transform, opacity;
}

.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 2rem;
}

.hero-eyebrow::before{
  content:'';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 1.4s ease infinite;
}

.hero-h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 7.5vw, 7.5rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 2rem;
  max-width: 1200px;
}

.hero-h1 .italic{ font-style: italic; font-weight: 300; color: var(--warm); }

.hero-h1 .glow{
  background: linear-gradient(135deg, var(--ink) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub{
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  max-width: 580px;
  line-height: 1.5;
  margin-bottom: 3rem;
}

.hero-ctas{ display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary{ background: var(--ink); color: var(--bg); }
.btn-primary:hover{ background: var(--cyan); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(34,211,238,0.3); }

.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink-line-2); }
.btn-ghost:hover{ border-color: var(--ink); background: rgba(236,241,249,0.05); }

.btn .arrow{ font-family: var(--serif); font-style: italic; font-size: 1.2em; }

.hero-progress{
  position: absolute;
  left: 7vw;
  bottom: 3rem;
  width: min(380px, 60vw);
  height: 2px;
  background: rgba(236,241,249,0.1);
  border-radius: 100px;
  overflow: hidden;
  z-index: 4;
}

.hero-progress span{
  display: block;
  height: 100%;
  width: calc(var(--p,0) * 100%);
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  transition: width 0.1s linear;
}

.hero-meta-right{
  position: absolute;
  right: 7vw;
  bottom: 3rem;
  z-index: 4;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
}

.hero-meta-right .big{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  display: block;
  line-height: 1;
  margin-bottom: 0.3rem;
}

/* Variante QR: composición invertida */
.scroll-scene-qr .video-overlay{
  background:
    linear-gradient(90deg, rgba(2,5,14,0.1) 0%, rgba(2,5,14,0.4) 50%, rgba(2,5,14,0.95) 100%),
    linear-gradient(180deg, rgba(2,5,14,0.55) 0%, rgba(2,5,14,0.15) 50%, rgba(2,5,14,0.85) 100%);
}
.scroll-scene-qr .hero-content{ align-items: flex-end; text-align: right; margin-left: auto; }
.scroll-scene-qr .hero-eyebrow{ justify-content: flex-end; }
.scroll-scene-qr .hero-h1,
.scroll-scene-qr .hero-sub{ margin-left: auto; }
.scroll-scene-qr .hero-progress{ left: auto; right: 7vw; }
.scroll-scene-qr .hero-meta-right{ right: auto; left: 7vw; text-align: left; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-wrap{
  padding: 1.8rem 0;
  background: var(--bg-2);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  position: relative;
  z-index: 20;
}

.marquee{
  display: flex;
  gap: 4rem;
  animation: marqueeMove 50s linear infinite;
  white-space: nowrap;
  width: max-content;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.marquee .item{ display: flex; align-items: center; gap: 4rem; }
.marquee .item::after{ content: '✦'; color: var(--warm); font-style: normal; font-size: 0.8em; }
.marquee .alt{
  color: var(--ink-3);
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
}

@keyframes marqueeMove{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
.section-container{ max-width: 1400px; margin: 0 auto; }

.section-label{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-label .number{
  font-family: var(--serif);
  font-size: 3.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--warm);
  line-height: 0.8;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   MANIFIESTO
   ========================================================================== */
.manifesto{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.manifesto-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  align-items: start;
}

.manifesto-text{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
}

.manifesto-text .italic{ font-style: italic; color: var(--warm); }
.manifesto-text p{ margin-bottom: 1.5rem; }
.manifesto-text p:last-child{ margin-bottom: 0; }

.manifesto-sig{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-3);
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.services{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.services-header{
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: end;
}

.services-title{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.services-title .italic{ font-style: italic; color: var(--warm); }

.services-header-right{
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  text-align: right;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.services-header-right span{ color: var(--cyan); }

.services-list{ border-top: 1px solid var(--ink-line); }

.service-row{
  display: grid;
  grid-template-columns: 80px 1fr 2fr 100px;
  gap: 3rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--ink-line);
  align-items: center;
  transition: all 0.4s var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.service-row::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,0.04) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
}

.service-row:hover::before{ transform: translateX(0); }
.service-row:hover{ padding-left: 1.5rem; padding-right: 1.5rem; }
.service-row:hover .s-name{ color: var(--cyan); }
.service-row:hover .s-arrow{ transform: translateX(10px); color: var(--cyan); }

.s-num{
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}

.s-name{
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: color 0.4s var(--ease);
}

.s-name .italic{ font-style: italic; color: var(--ink-3); }

.s-desc{
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
  font-weight: 300;
}

.s-arrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  text-align: right;
  transition: all 0.4s var(--ease);
}

/* ==========================================================================
   TEASER QR (en el home — solo invita a la página propia)
   ========================================================================== */
.qr-teaser{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  overflow: hidden;
  background: var(--bg);
}

.qr-teaser::before{
  content: '';
  position: absolute;
  top: 50%; right: -10%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.qr-teaser-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.qr-teaser-tag{
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.qr-teaser-tag::before{ content: '◆'; }

.qr-teaser h2{
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.qr-teaser h2 .italic{ font-style: italic; color: var(--warm); }
.qr-teaser h2 .glow{
  background: linear-gradient(135deg, var(--ink) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qr-teaser p{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 520px;
  margin-bottom: 2.5rem;
}

.qr-teaser-video{
  aspect-ratio: 1/1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ink-line-2);
  position: relative;
  background: var(--bg-2);
}

.qr-teaser-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   PRODUCTO — Claude Máster 2026
   ========================================================================== */
.product{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.product-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.product-visual{
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border: 1px solid var(--ink-line);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-visual::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(34,211,238,0.08) 0%, transparent 60%);
}

.product-visual img{
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative; z-index: 2;
}

.product-mockup{
  width: 72%;
  background: var(--ink);
  color: var(--bg);
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 100px rgba(0,0,0,0.6);
}

.mock-tag{
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--warm-2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.mock-title{
  font-family: var(--serif);
  font-size: 2.1rem;
  font-style: italic;
  line-height: 0.95;
  color: var(--bg);
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.mock-subtitle{
  font-family: var(--sans);
  font-size: 0.55rem;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.mock-line{ height: 3px; background: var(--warm); width: 45%; margin-bottom: 1.5rem; }

.mock-data{
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-mute);
  line-height: 1.85;
}

.mock-data span{ color: var(--warm-2); font-weight: 600; }

.product-info-tag{
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.product-info-tag::before{ content: '◆'; }

.product-title{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.product-title .italic{ font-style: italic; color: var(--warm); }

.product-info > p{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 2.5rem;
  max-width: 480px;
  font-weight: 300;
}

.product-specs{
  list-style: none;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--ink-line);
}

.product-specs li{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.product-specs li span:first-child{
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}

.product-price-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-2);
  margin-bottom: 2rem;
}

.product-price-row .label{
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.product-price{
  font-family: var(--serif);
  font-size: 3.5rem;
  font-style: italic;
  color: var(--ink);
  line-height: 0.9;
  font-weight: 400;
}

.product-price .currency{ font-size: 1.3rem; vertical-align: top; color: var(--warm); }

.btn-product{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.15rem 1.75rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease);
}

.btn-product::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
}

.btn-product:hover::before{ transform: translateY(0); }
.btn-product span{ position: relative; z-index: 2; }

.btn-product .arrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  transition: transform 0.4s var(--ease);
}

.btn-product:hover .arrow{ transform: translateX(10px); }

/* ==========================================================================
   PROCESO
   ========================================================================== */
.process{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.process-header{
  margin-bottom: 5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.process-header h2{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-weight: 400;
  max-width: 900px;
  margin-top: 1.5rem;
}

.process-header h2 .italic{ font-style: italic; color: var(--warm); }

.process-steps{ max-width: 1400px; margin: 0 auto; }

.process-step{
  display: grid;
  grid-template-columns: 110px 1fr 2fr;
  gap: 3.5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--ink-line);
  align-items: start;
}

.process-step:last-child{ border-bottom: 1px solid var(--ink-line); }

.process-step-num{
  font-family: var(--serif);
  font-size: 4.5rem;
  font-style: italic;
  color: var(--cyan);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-weight: 400;
}

.process-step-title{
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 400;
}

.process-step-desc{
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 300;
}

.process-step-desc .step-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--cyan);
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.2);
  padding: 0.25rem 0.6rem;
  margin-bottom: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
}

/* ==========================================================================
   ADMISIÓN / CTA FINAL
   ========================================================================== */
.admission{
  padding: 10rem 2rem;
  border-top: 1px solid var(--ink-line);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 20;
  background: var(--bg);
}

.admission::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.admission-content{ position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }

.admission-label{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.admission-label::before,
.admission-label::after{ content: ''; width: 30px; height: 1px; background: var(--cyan); }

.admission h2{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 2.5rem;
}

.admission h2 .italic{ font-style: italic; color: var(--warm); font-weight: 300; }

.admission > .admission-content > p{
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.admission-email{
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-style: italic;
  color: var(--ink);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--ink);
  transition: all 0.4s var(--ease);
}

.admission-email:hover{ color: var(--cyan); border-color: var(--cyan); }

.admission-note{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: 4rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Formulario admisión (opcional, conectado a Formspree) */
.admission-form{
  display: flex;
  gap: 0.75rem;
  max-width: 520px;
  margin: 0 auto 1rem;
  flex-wrap: wrap;
}

.admission-form input[type="email"]{
  flex: 1;
  min-width: 240px;
  background: rgba(236,241,249,0.04);
  border: 1px solid var(--ink-line-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 1rem 1.25rem;
  border-radius: 100px;
  outline: none;
  transition: all 0.3s var(--ease);
}
.admission-form input[type="email"]:focus{ border-color: var(--cyan); background: rgba(34,211,238,0.04); }
.admission-form input[type="email"]::placeholder{ color: var(--ink-mute); }

.admission-form button{
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 1rem 1.75rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.admission-form button:hover{ background: var(--cyan); transform: translateY(-2px); }

/* ==========================================================================
   PÁGINA QR INTERACTIVO — secciones propias
   ========================================================================== */
.qr-page-section{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.qr-intro-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  align-items: start;
}

.qr-intro-text{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.qr-intro-text .italic{ font-style: italic; color: var(--warm); }
.qr-intro-text p{ margin-bottom: 1.5rem; }
.qr-intro-text p:last-child{ margin-bottom: 0; }

/* Características QR en grid */
.qr-features{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.qr-feature{
  border: 1px solid var(--ink-line);
  padding: 2.5rem 2rem;
  border-radius: 8px;
  background: var(--bg-2);
  transition: all 0.4s var(--ease);
}

.qr-feature:hover{ border-color: var(--ink-line-2); transform: translateY(-4px); }

.qr-feature-num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 1rem;
}

.qr-feature h3{
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.qr-feature p{
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.6;
  font-weight: 300;
}

/* Planes QRverse (teaser de suscripción futura) */
.qr-plans{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.qr-plan{
  border: 1px solid var(--ink-line);
  padding: 2.5rem 2rem;
  border-radius: 8px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease);
}

.qr-plan.featured{
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(34,211,238,0.05) 0%, var(--bg-2) 100%);
}

.qr-plan:hover{ transform: translateY(-4px); }

.qr-plan-name{
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
}

.qr-plan.featured .qr-plan-name{ color: var(--cyan); }

.qr-plan-price{
  font-family: var(--serif);
  font-size: 3rem;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.qr-plan-price .per{ font-size: 0.9rem; color: var(--ink-3); font-style: normal; }

.qr-plan-desc{
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.qr-plan ul{
  list-style: none;
  margin-bottom: 2rem;
  flex: 1;
}

.qr-plan li{
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ink-line);
  font-weight: 300;
}
.qr-plan li::before{ content: '— '; color: var(--cyan); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  padding: 5rem 2rem 2rem;
  border-top: 1px solid var(--ink-line);
  background: var(--bg);
  position: relative;
  z-index: 20;
}

.footer-grid{
  max-width: 1400px;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
}

.footer-brand{
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.footer-brand .paren{ color: var(--warm); font-style: italic; }

.footer-brand p{
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: 1.5rem;
  max-width: 300px;
  line-height: 1.6;
  font-weight: 300;
}

.footer-col h5{
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--warm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-col ul{ list-style: none; }
.footer-col li{ margin-bottom: 0.75rem; }

.footer-col a{
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  transition: color 0.3s;
}
.footer-col a:hover{ color: var(--cyan); }

.footer-no-social{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.footer-bottom{
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.footer-bottom a{ color: var(--ink-3); }
.footer-bottom a:hover{ color: var(--cyan); }

/* ==========================================================================
   ERROR DE CARGA DE VÍDEO
   ========================================================================== */
.video-error{
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.5rem 2rem;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FECACA;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-align: center;
  display: none;
  max-width: 500px;
}

/* ==========================================================================
   PÁGINAS GENÉRICAS (blog, páginas internas, 404)
   ========================================================================== */
.page-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 12rem 2rem 6rem;
  min-height: 70vh;
}

.page-wrap h1{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 2rem;
}

.page-wrap h2{
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}

.page-wrap p{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
  font-weight: 300;
}

.page-wrap a{ color: var(--cyan); }

.page-wrap ul, .page-wrap ol{ color: var(--ink-2); margin: 0 0 1.25rem 1.5rem; font-weight: 300; }
.page-wrap li{ margin-bottom: 0.5rem; }

.post-meta{
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .manifesto-grid,
  .services-header,
  .product-grid,
  .qr-teaser-grid,
  .qr-intro-grid,
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .service-row{ grid-template-columns: 60px 1fr 80px; }
  .s-desc{ display: none; }

  .process-step{ grid-template-columns: 80px 1fr; gap: 2rem; }
  .process-step-desc{ grid-column: 1 / -1; }

  .qr-features,
  .qr-plans{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .site-nav{ padding: 1.2rem 1.2rem; }
  .nav-meta{ display: none; }
  .nav-cta{ display: inline-flex; }

  /* Tamaño compacto del botón cuando es visible en pantallas estrechas.
     Solo aplica si el JS le ha puesto .is-visible; en otro caso sigue oculto. */
  .unlock{ font-size: 0.7rem; padding: 8px 12px; right: 12px; top: 12px; }

  .hero-content{ padding: 7rem 1.5rem 5rem; }
  .hero-h1{ font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-progress, .hero-meta-right{ display: none; }

  .scroll-scene-qr .hero-content{ text-align: left; align-items: flex-start; }
  .scroll-scene-qr .hero-eyebrow{ justify-content: flex-start; }

  /* ----------------------------------------------------------------------
     NUEVO 2.1.4 — Padding vertical compacto en móvil
     ----------------------------------------------------------------------
     En desktop cada sección tiene padding 8rem (10rem la admission) arriba
     y abajo para respirar bien. En pantallas pequeñas eso suma 256px (320px
     en admission) entre el contenido de dos secciones contiguas, lo que crea
     huecos de fondo negro antes incluso de empezar la siguiente sección.
     Aquí lo bajamos a un ritmo más natural para móvil:
       · 5rem (80px) en secciones normales
       · 6rem (96px) en la admission (la del cierre, le va bien algo más).
     El padding horizontal se mantiene en 1.5rem en todos los casos.
     ---------------------------------------------------------------------- */
  .manifesto, .services, .product, .process,
  .qr-teaser, .qr-page-section{
    padding: 5rem 1.5rem;
  }

  .admission{
    padding: 6rem 1.5rem;
  }

  .footer-bottom{ flex-direction: column; gap: 1rem; text-align: center; }

  .page-wrap{ padding: 9rem 1.5rem 4rem; }
}

/* ==========================================================================
   SECCIÓN "EL SISTEMA" — vídeo del cubo explotando (página QR)
   ========================================================================== */
.qr-system{
  padding: 8rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}

.qr-system-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.qr-system-video{
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ink-line-2);
  background: var(--bg-2);
  position: relative;
}

.qr-system-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qr-system-text h2{
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.qr-system-text h2 .italic{ font-style: italic; color: var(--warm); }

.qr-system-text p{
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 300;
  max-width: 480px;
}

@media (max-width: 1024px){
  .qr-system-grid{ grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 640px){
  /* Ritmo compacto también para la sección "El sistema" de la página QR */
  .qr-system{ padding: 5rem 1.5rem; }
}

/* ==========================================================================
   FUNDIDOS AL ENTRAR EN PANTALLA (.reveal)
   --------------------------------------------------------------------------
   Las secciones con la clase .reveal empiezan ocultas y aparecen con un
   fundido + leve subida cuando entran en el viewport. main.js les añade
   la clase .is-visible mediante IntersectionObserver.
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Retardo escalonado para elementos consecutivos (efecto cascada sutil) */
.reveal.delay-1{ transition-delay: 0.08s; }
.reveal.delay-2{ transition-delay: 0.16s; }
.reveal.delay-3{ transition-delay: 0.24s; }

/* Accesibilidad: si el usuario prefiere menos movimiento, lo respetamos */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scroll-canvas{ transform: none !important; }
  .video-grid{ transform: none !important; }
  .hero-content{ transform: none !important; opacity: 1 !important; }
  .marquee{ animation: none; }
}

/* ==========================================================================
   v2.1.5 — SECCIONES NUEVAS DE LA PÁGINA QR INTERACTIVO
   --------------------------------------------------------------------------
   Reglas para las 4 secciones añadidas en la reestructuración de la
   landing /qr-interactivo/. Mantienen la paleta y los patrones del resto
   del tema (border + bg-2 + radius 8px + transition + hover translateY).
   
   Bloques:
     1. Subtítulos pequeños bajo títulos de sección (compartido)
     2. .tipos-grid / .tipo-card        — 01 Tipos de QR
     3. .sectores-grid / .sector-card   — 04 Para quién
     4. .trust-grid / .trust-card       — 06 Confía en Cortade
     5. .qr-waitlist-section            — 07 Lista de espera
     6. .btn-large                      — variante grande del botón
     7. Responsive de las 4 secciones nuevas
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. Subtítulo compartido (bajo .services-title en secciones nuevas)
   ----------------------------------------------------------------------
   Las secciones 01 Tipos, 04 Sectores y 06 Trust tienen título grande
   (.services-title) + subtítulo en serif itálica. Esta clase unifica
   el estilo de ese subtítulo. Si el template ya pasa estilos inline,
   estos también valen; esta clase es por si quieres limpiar el HTML.
   ---------------------------------------------------------------------- */
.qr-section-subtitle{
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-3);
  font-size: 1.1rem;
  margin-top: 1rem;
  max-width: 640px;
  line-height: 1.55;
}

/* ----------------------------------------------------------------------
   2. TIPOS DE QR (01) — grid 4x2 (8 tarjetas)
   ----------------------------------------------------------------------
   Cada tarjeta = icono SVG + nombre Fraunces + descripción Inter.
   Patrón de tarjeta heredado de .qr-feature pero más compacto.
   El SVG hereda color de currentColor y tamaño con em (font-size).
   ---------------------------------------------------------------------- */
.tipos-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.tipo-card{
  border: 1px solid var(--ink-line);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  background: var(--bg-2);
  transition: all 0.4s var(--ease);
}

.tipo-card:hover{
  border-color: var(--cyan);
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(34,211,238,0.04) 0%, var(--bg-2) 100%);
}

.tipo-icono{
  color: var(--cyan);
  font-size: 1.75rem;  /* el SVG hereda con width/height = 1em */
  line-height: 1;
  margin-bottom: 1.25rem;
  display: inline-flex;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.tipo-icono svg{
  width: 1em;
  height: 1em;
  display: block;
}

.tipo-card:hover .tipo-icono{
  color: var(--cyan-soft);
  transform: scale(1.08);
}

.tipo-nombre{
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.tipo-desc{
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 300;
}

/* ----------------------------------------------------------------------
   3. SECTORES (04) — grid 2x2 (4 tarjetas con imagen 16:9)
   ----------------------------------------------------------------------
   Cada tarjeta = imagen 16:9 (o placeholder degradado) + título + texto.
   Mantenemos border + radius del tema, pero la imagen ocupa todo el
   ancho de la tarjeta (no hay padding alrededor de la imagen).
   ---------------------------------------------------------------------- */
.sectores-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.sector-card{
  border: 1px solid var(--ink-line);
  border-radius: 8px;
  background: var(--bg-2);
  overflow: hidden;
  transition: all 0.4s var(--ease);
}

.sector-card:hover{
  border-color: var(--ink-line-2);
  transform: translateY(-4px);
}

.sector-imagen{
  aspect-ratio: 16/9;
  background: var(--bg-3);
  overflow: hidden;
  position: relative;
}

.sector-imagen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.sector-card:hover .sector-imagen img{
  transform: scale(1.04);
}

/* Placeholder visual cuando aún no hay imagen subida.
   Gradiente sutil que respira, con un punto cuero apagado al centro
   para señalar que "aquí va la imagen". */
.sector-imagen-placeholder{
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 200%;
  animation: sectorPlaceholderShimmer 8s ease-in-out infinite;
}

.sector-imagen-placeholder::after{
  content: '◆';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--warm);
  opacity: 0.18;
  font-size: 3rem;
}

@keyframes sectorPlaceholderShimmer{
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

.sector-content{
  padding: 2rem 1.75rem 2.25rem;
}

.sector-titulo{
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.sector-desc{
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 300;
}

/* ----------------------------------------------------------------------
   4. TRUST SIGNALS (06) — grid 4 columnas (más minimalista, sin border)
   ----------------------------------------------------------------------
   A diferencia de las otras tarjetas, los trust signals NO llevan borde
   ni fondo. Quedan más limpios, como una rejilla de datos confiables.
   Los iconos son emojis grandes o símbolos.
   ---------------------------------------------------------------------- */
.trust-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.trust-card{
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink-line);
}

.trust-icono{
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
  line-height: 1;
  display: inline-block;
}

.trust-titulo{
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.trust-desc{
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 300;
}

/* ----------------------------------------------------------------------
   5. LISTA DE ESPERA QRVERSE (07) — sin precios, CTA fuerte centrado
   ----------------------------------------------------------------------
   Reusa el patrón visual de .admission (radial cyan al fondo + texto
   centrado + h2 grande), pero con bullets en lugar de email.
   Es la sección que captura la lista de espera del SaaS futuro.
   ---------------------------------------------------------------------- */
.qr-waitlist-section{
  padding: 10rem 2rem;
  border-top: 1px solid var(--ink-line);
  position: relative;
  overflow: hidden;
  z-index: 20;
  background: var(--bg);
  text-align: center;
}

.qr-waitlist-section::before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.qr-waitlist-content{
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.qr-waitlist-content .section-label{
  align-items: center;
}

.qr-waitlist-title{
  font-family: var(--serif);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 2rem;
}

.qr-waitlist-title .italic{
  font-style: italic;
  color: var(--warm);
  font-weight: 300;
}

.qr-waitlist-sub{
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-style: italic;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 3rem;
  line-height: 1.55;
}

.qr-waitlist-sub .glow{
  background: linear-gradient(135deg, var(--ink) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
  font-weight: 500;
}

.qr-waitlist-bullets{
  list-style: none;
  max-width: 500px;
  margin: 0 auto 3rem;
  text-align: left;
}

.qr-waitlist-bullets li{
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  padding: 0.85rem 0 0.85rem 2rem;
  border-bottom: 1px solid var(--ink-line);
  position: relative;
  font-weight: 300;
}

.qr-waitlist-bullets li::before{
  content: '✦';
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--warm);
}

.qr-waitlist-bullets li:last-child{
  border-bottom: none;
}

.qr-waitlist-nota{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-top: 3rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ----------------------------------------------------------------------
   6. BOTÓN GRANDE — variante de .btn para CTAs principales
   ----------------------------------------------------------------------
   Usado en el botón "Apuntarme a la lista" de la sección 07.
   Más padding, font-size ligeramente mayor.
   ---------------------------------------------------------------------- */
.btn-large{
  padding: 1.25rem 2.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

/* ----------------------------------------------------------------------
   7. RESPONSIVE de las secciones nuevas
   ----------------------------------------------------------------------
   Breakpoints alineados con el resto del tema (1024px y 640px).
   ---------------------------------------------------------------------- */
@media (max-width: 1024px){
  .tipos-grid{ grid-template-columns: repeat(2, 1fr); }
  .sectores-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 640px){
  .tipos-grid{ grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .tipo-card{ padding: 1.5rem 1.25rem; }
  .tipo-icono{ font-size: 1.5rem; margin-bottom: 1rem; }
  .tipo-nombre{ font-size: 1.05rem; }

  .sectores-grid{ gap: 1.5rem; }
  .sector-content{ padding: 1.5rem 1.25rem 1.75rem; }
  .sector-titulo{ font-size: 1.35rem; }

  .trust-grid{ grid-template-columns: 1fr; gap: 0; }
  .trust-card{ padding: 1.5rem 0; }
  .trust-icono{ font-size: 2rem; margin-bottom: 1rem; }

  /* Sección de lista de espera con padding compacto en móvil */
  .qr-waitlist-section{ padding: 6rem 1.5rem; }
  .qr-waitlist-bullets{ max-width: 100%; }

  .btn-large{ padding: 1.1rem 2.25rem; font-size: 0.9rem; }
}

/* ==========================================================================
   v2.1.5 (b) — BOTÓN LISTA DE ESPERA (.btn-waitlist)
   --------------------------------------------------------------------------
   Botón CTA principal de la sección 07. Más impactante que .btn estándar:
     · Fondo cyan sólido + texto oscuro (máximo contraste)
     · Halo pulsante en loop suave de 2.4s (sombra que se expande y se desvanece)
     · Hover: se levanta 3px + halo se intensifica + flecha se desliza
     · Animación pausada en hover (pulso solo en reposo, no agresivo)
     · Respeta prefers-reduced-motion (accesibilidad)
   Es coherente con la paleta del tema (--cyan, --bg, --ease) y sigue el patrón
   pill de los demás botones (border-radius 100px, inline-flex).
   ========================================================================== */
.btn-waitlist{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.3rem 3rem;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  /* Halo pulsante en loop. Doble sombra:
       · sombra exterior que se EXPANDE y desvanece (efecto "ping")
       · sombra base suave que da profundidad
  */
  animation: btnWaitlistPulse 2.4s ease-in-out infinite;
  /* will-change para mejor rendimiento en navegadores modernos */
  will-change: transform, box-shadow;
}

@keyframes btnWaitlistPulse{
  0%, 100%{
    box-shadow:
      0 0 0 0 rgba(34, 211, 238, 0.55),
      0 8px 24px rgba(34, 211, 238, 0.18);
  }
  50%{
    box-shadow:
      0 0 0 14px rgba(34, 211, 238, 0),
      0 10px 32px rgba(34, 211, 238, 0.32);
  }
}

.btn-waitlist:hover{
  transform: translateY(-3px);
  background: var(--cyan-soft);
  /* Pausamos el pulso en hover: ya hay suficiente feedback con el resto */
  animation-play-state: paused;
  box-shadow:
    0 14px 48px rgba(34, 211, 238, 0.5),
    0 0 0 6px rgba(34, 211, 238, 0.18);
}

.btn-waitlist:active{
  transform: translateY(-1px);
  transition-duration: 0.15s;
}

.btn-waitlist .arrow{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.4s var(--ease);
}

.btn-waitlist:hover .arrow{
  transform: translateX(8px);
}

/* Accesibilidad: si el usuario prefiere menos movimiento, paramos el pulso */
@media (prefers-reduced-motion: reduce){
  .btn-waitlist{
    animation: none;
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.25);
  }
}

/* Tamaño compacto en móvil */
@media (max-width: 640px){
  .btn-waitlist{
    padding: 1.1rem 2.25rem;
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   v2.2.0 — HERO 3D INTERACTIVO (sustituye scroll-scene del cubo)
   --------------------------------------------------------------------------
   El hero ya no tiene vídeo de fondo. El fondo es un canvas WebGL con el
   cubo QR de Three.js (gestionado en cortade-fondo-3d-qr.js). Esta sección
   solo es el contenedor del contenido del hero (eyebrow, h1, sub, CTAs)
   por encima del 3D.
   ========================================================================== */
.qr-hero-3d{
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  padding: 0;
  background: transparent;
}

.qr-hero-3d-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 7vw 6rem;
  position: relative;
}

.qr-hero-3d .hero-content{
  position: relative;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1200px;
  transform: none;
  opacity: 1;
}

.qr-hero-3d .hero-meta-right{
  position: absolute;
  right: 7vw;
  bottom: 3rem;
  z-index: 4;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
}

@media (max-width: 640px){
  .qr-hero-3d-inner{ padding: 7rem 1.5rem 5rem; }
  .qr-hero-3d .hero-meta-right{ display: none; }
}

/* ==========================================================================
   v2.2.0 — HERO 3D HOME (icosaedro, sustituye scroll-scene del cubo)
   --------------------------------------------------------------------------
   El hero de la home ya no tiene vídeo de fondo. El fondo es un canvas
   WebGL con el icosaedro dorado (gestionado en cortade-fondo-3d-home.js).
   Esta sección solo es el contenedor del contenido del hero (eyebrow,
   h1, sub, CTAs) por encima del 3D.

   Misma arquitectura que .qr-hero-3d pero adaptada al hero del home,
   que tiene el contenido alineado a la izquierda (no a la derecha como QR).
   ========================================================================== */
.home-hero-3d{
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  padding: 0;
  background: transparent;
}

.home-hero-3d-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 7vw 6rem;
  position: relative;
}

.home-hero-3d .hero-content{
  position: relative;
  height: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1200px;
  transform: none;
  opacity: 1;
  /* En la home, el contenido va a la IZQUIERDA (el icosaedro queda a la derecha) */
  align-items: flex-start;
  text-align: left;
}

.home-hero-3d .hero-meta-right{
  position: absolute;
  right: 7vw;
  bottom: 3rem;
  z-index: 4;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
}

@media (max-width: 640px){
  .home-hero-3d-inner{ padding: 7rem 1.5rem 5rem; }
  .home-hero-3d .hero-meta-right{ display: none; }
}

/* ==========================================================================
   v2.2.0 (b) — Cuando hay fondo 3D, también las secciones del HOME
   tienen que ser transparentes para que se vea el canvas detrás.
   El selector .has-3d-bg ya está aplicado vía JS desde el template.
   ========================================================================== */
body.has-3d-bg .marquee-wrap,
body.has-3d-bg .manifesto,
body.has-3d-bg .services,
body.has-3d-bg .qr-teaser,
body.has-3d-bg .product,
body.has-3d-bg .process,
body.has-3d-bg .admission{
  background: transparent !important;
  position: relative;
  z-index: 3;
}

/* El marquee de logos también transparente para que se siga viendo el 3D detrás
   (antes le había puesto fondo oscuro semitransparente, lo quitamos) */
body.has-3d-bg .marquee-wrap{
  background: transparent !important;
}

/* El visual del producto (mockup Claude Máster) SÍ mantiene su fondo
   porque es una tarjeta destacada y necesita contraste para que se lea bien */
body.has-3d-bg .product-visual{
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
}

/* Refuerzo de legibilidad para los títulos del home sobre el 3D */
body.has-3d-bg .manifesto-text,
body.has-3d-bg .services-title,
body.has-3d-bg .qr-teaser h2,
body.has-3d-bg .product-title,
body.has-3d-bg .process-header h2,
body.has-3d-bg .admission h2{
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   v2.2.0 (c) — Padding-top en los heros 3D
   --------------------------------------------------------------------------
   Cuando el nav es position:fixed, no ocupa espacio en el flujo del documento,
   así que el contenido del hero empieza desde y=0 y queda parcialmente
   tapado por el nav. Añadimos padding-top suficiente para compensarlo.

   IMPORTANTE: cambiamos align-items de center a flex-start para que el
   contenido empiece desde arriba del padding-top (no se centre vertical).
   ========================================================================== */
.home-hero-3d,
.qr-hero-3d{
  align-items: flex-start !important;
  padding-top: 220px !important;
  padding-bottom: 4rem;
  /* scroll-margin-top: nunca dejar que el contenido se pegue al nav
     cuando se scroll hace scrolla a algún ancla interna */
  scroll-margin-top: 120px;
}

.home-hero-3d-inner,
.qr-hero-3d-inner{
  padding-top: 0;
}

/* Aire extra en el eyebrow para que tenga un colchón visual contra el nav */
body.has-3d-bg .home-hero-3d .hero-eyebrow,
body.has-3d-bg .qr-hero-3d .hero-eyebrow{
  margin-top: 0;
}

@media (max-width: 760px){
  .home-hero-3d,
  .qr-hero-3d{
    padding-top: 160px !important;
  }
}
/* ============================================================
   SECCIÓN PLANES / PRECIOS — Cortade
   Añadir al final de style.css (bloque v2.3.0)
   Usa las variables de marca: --warm, --cream, --ink, --serif, etc.
   ============================================================ */

.planes {
	padding: 120px 0;
	position: relative;
	z-index: 3;
}

.planes-header {
	max-width: 720px;
	margin: 0 auto 64px;
	text-align: center;
}

.planes-header .section-label {
	justify-content: center;
	margin-bottom: 24px;
}

.planes-title {
	font-family: var(--serif);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.05;
	color: var(--cream);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.planes-title .italic {
	font-style: italic;
	color: var(--warm);
}

.planes-title-mes {
	font-size: 0.5em;
	color: var(--ink-3);
	font-style: italic;
}

.planes-intro {
	margin-top: 18px;
	color: var(--ink-2);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* --- Grid de los dos planes --- */
.planes-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	max-width: 920px;
	margin: 0 auto;
	align-items: stretch;
}

.plan {
	display: flex;
	flex-direction: column;
	padding: 40px 34px;
	border: 1px solid var(--ink-line);
	border-radius: 18px;
	background: rgba(11, 18, 36, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: relative;
	transition: transform 0.4s ease, border-color 0.4s ease;
}

.plan:hover {
	transform: translateY(-6px);
}

.plan-destacado {
	border-color: rgba(184, 150, 90, 0.55);
	background: rgba(184, 150, 90, 0.06);
}

.plan-destacado:hover {
	border-color: var(--warm);
}

.plan-tag {
	position: absolute;
	top: -13px;
	left: 34px;
	background: var(--warm);
	color: #05070d;
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 30px;
	font-weight: 600;
}

.plan-tag-ghost {
	background: transparent;
	color: var(--ink-3);
	border: 1px solid var(--ink-line);
}

.plan-nombre {
	font-family: var(--serif);
	font-size: 1.7rem;
	font-weight: 400;
	color: var(--cream);
	margin: 8px 0 20px;
}

.plan-nombre .italic {
	font-style: italic;
	color: var(--warm);
}

.plan-precio {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-height: 64px;
}

.plan-precio-num {
	font-family: var(--serif);
	font-size: 3rem;
	line-height: 1;
	color: var(--cream);
}

.plan-precio-cur {
	font-size: 1.5rem;
	color: var(--ink-2);
	margin-right: 2px;
}

.plan-precio-mes {
	font-size: 1rem;
	color: var(--ink-3);
	font-style: italic;
}

.plan-precio-desde {
	font-family: var(--serif);
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--cream);
	font-style: italic;
}

.plan-alta {
	margin: 14px 0 24px;
	font-size: 0.9rem;
	color: var(--ink-3);
	font-family: var(--mono);
	letter-spacing: 0.01em;
}

.plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 32px;
	flex-grow: 1;
}

.plan-features li {
	position: relative;
	padding: 11px 0 11px 26px;
	color: var(--ink-2);
	font-size: 0.95rem;
	line-height: 1.45;
	border-bottom: 1px solid var(--ink-line);
}

.plan-features li:last-child {
	border-bottom: none;
}

.plan-features li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 11px;
	color: var(--warm);
	font-weight: 600;
}

/* --- Botones de cada plan --- */
.plan-ctas {
	display: flex;
	gap: 12px;
	margin-top: auto;
}

.btn-wa,
.btn-escribe {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 16px;
	border-radius: 40px;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.btn-wa {
	background: #25D366;
	color: #05140a;
}

.btn-wa:hover {
	background: #1ebe5a;
	transform: translateY(-2px);
}

.wa-icon {
	flex-shrink: 0;
}

.btn-escribe {
	background: transparent;
	color: var(--cream);
	border: 1px solid var(--ink-line);
}

.btn-escribe:hover {
	border-color: var(--warm);
	color: var(--warm);
}

.planes-nota {
	max-width: 620px;
	margin: 40px auto 0;
	text-align: center;
	font-size: 0.82rem;
	color: var(--ink-mute);
	line-height: 1.6;
	font-style: italic;
}

/* --- Responsive: en móvil los planes se apilan --- */
@media (max-width: 760px) {
	.planes {
		padding: 80px 0;
	}
	.planes-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.plan {
		padding: 34px 26px;
	}
	.plan-ctas {
		flex-direction: column;
	}
}
/* ============================================================
   EFECTO CASCADA v3 — Tarjetas de planes (más intenso)
   ============================================================ */

/* Estado inicial: más abajo y un pelín más pequeñas */
.planes .planes-grid .plan {
	opacity: 0;
	transform: translateY(90px) scale(0.96);
	transition: opacity 0.9s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

/* Visible: suben a su sitio */
.planes.reveal.is-visible .planes-grid .plan {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Cascada: más separación entre las dos tarjetas */
.planes.reveal.is-visible .planes-grid .plan-destacado {
	transition-delay: 0.1s;
}
.planes.reveal.is-visible .planes-grid .plan-medida {
	transition-delay: 0.45s;
}

/* Cabecera entra antes */
.planes .planes-header {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.planes.reveal.is-visible .planes-header {
	opacity: 1;
	transform: translateY(0);
}

/* Accesibilidad: respeta "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
	.planes .planes-grid .plan,
	.planes .planes-header {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}
/* ============================================================
   SECCIÓN ANTES / DESPUÉS (Before/After slider) — Cortade
   Añadir al final de style.css
   ============================================================ */

.bafter {
	padding: 120px 0;
	position: relative;
	z-index: 3;
}

.bafter-header {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.bafter-header .section-label {
	justify-content: center;
	margin-bottom: 24px;
}

.bafter-title {
	font-family: var(--serif);
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.08;
	color: var(--cream);
	font-weight: 400;
}

.bafter-title .italic {
	font-style: italic;
	color: var(--warm);
}

.bafter-intro {
	margin-top: 18px;
	color: var(--ink-2);
	font-size: 1.05rem;
	line-height: 1.6;
}

/* --- El slider --- */
.bafter-slider {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 1400 / 788;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--ink-line);
	cursor: ew-resize;
	user-select: none;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.bafter-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* La imagen "antes" va en un contenedor que se recorta */
.bafter-before-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	overflow: hidden;
	z-index: 2;
	border-right: 2px solid var(--warm);
}

/* CLAVE: la imagen de dentro se ancla al ancho del SLIDER, no del wrap.
   Así, al estrechar el wrap, la imagen no se comprime: solo se recorta. */
.bafter-before-wrap .bafter-before {
	position: absolute;
	top: 0;
	left: 0;
	width: 960px;      /* = max-width del slider */
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* --- Etiquetas Antes / Después --- */
.bafter-tag {
	position: absolute;
	top: 18px;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 30px;
	z-index: 4;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bafter-tag-before {
	left: 18px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--cream);
	border: 1px solid rgba(255, 255, 255, 0.2);
	z-index: 3;
}

.bafter-tag-after {
	right: 18px;
	background: rgba(184, 150, 90, 0.85);
	color: #05070d;
	font-weight: 600;
}

/* --- Divisor arrastrable --- */
.bafter-handle {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 44px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: ew-resize;
}

.bafter-handle-line {
	flex: 1;
	width: 2px;
	background: var(--warm);
}

.bafter-handle-circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--warm);
	color: #05070d;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 1.3rem;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}

.bafter-arrow {
	line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 760px) {
	.bafter {
		padding: 80px 0;
	}
	.bafter-handle-circle {
		width: 38px;
		height: 38px;
		font-size: 1.1rem;
	}
}
    
    /* === ETIQUETAS ANTES/DESPUÉS: activas según posición === */
    .bafter-tag {
    	background: rgba(0, 0, 0, 0.55) !important;
    	color: var(--ink-3) !important;
    	border: 1px solid rgba(255, 255, 255, 0.15) !important;
    	font-weight: 400 !important;
    	transition: all 0.3s ease;
    }
    .bafter-tag.is-active {
    	background: rgba(184, 150, 90, 0.9) !important;
    	color: #05070d !important;
    	border-color: var(--warm) !important;
    	font-weight: 600 !important;
    }
    /* === MARQUEE DOBLE: segunda línea en sentido contrario === */
    .marquee.marquee-reverse {
    	animation: marqueeMoveReverse 50s linear infinite;
    	margin-top: 1.2rem;
    }
    @keyframes marqueeMoveReverse {
    	0% { transform: translateX(-50%); }
    	100% { transform: translateX(0); }
    }
    /* === LINE BY LINE: párrafos del manifiesto entran en cascada === */
    .manifesto .manifesto-text p {
    	opacity: 0;
    	transform: translateY(24px);
    	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .manifesto.reveal.is-visible .manifesto-text p {
    	opacity: 1;
    	transform: translateY(0);
    }
    .manifesto.reveal.is-visible .manifesto-text p:nth-child(1) { transition-delay: 0.1s; }
    .manifesto.reveal.is-visible .manifesto-text p:nth-child(2) { transition-delay: 0.35s; }
    .manifesto.reveal.is-visible .manifesto-text p:nth-child(3) { transition-delay: 0.6s; }
    .manifesto.reveal.is-visible .manifesto-text p:nth-child(4) { transition-delay: 0.85s; }
    .manifesto .manifesto-sig {
    	opacity: 0;
    	transform: translateY(20px);
    	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .manifesto.reveal.is-visible .manifesto-sig {
    	opacity: 1;
    	transform: translateY(0);
    	transition-delay: 1s;
    }
    
    /* === HOVER MEJORADO EN TARJETAS DE PRECIOS === */
    .planes .plan {
    	transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    }
    .planes .plan:hover {
    	transform: translateY(-12px);
    	border-color: var(--warm) !important;
    	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(184, 150, 90, 0.4);
    }
    .planes .plan-destacado:hover {
    	background: rgba(184, 150, 90, 0.1);
    }
    .planes-grid:hover .plan:not(:hover) {
    	opacity: 0.6;
    	transform: scale(0.99);
    	transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    /* === Accesibilidad: respeta "reducir movimiento" === */
    @media (prefers-reduced-motion: reduce) {
    	.manifesto .manifesto-text p,
    	.manifesto .manifesto-sig {
    		opacity: 1 !important;
    		transform: none !important;
    		transition: none !important;
    	}
    }
    /* === PARALLAX SUTIL EN TÍTULOS DE SECCIÓN === */
.planes-title,
.bafter-title,
.services-title {
	will-change: transform;
	transition: transform 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
	.planes-title, .bafter-title, .services-title {
		transform: none !important;
	}
}
/* === MÓVIL: tarjetas de precios más compactas + arreglos === */
@media (max-width: 760px) {
	/* Tarjetas más pequeñas y juntas */
	.planes-grid {
		gap: 20px !important;
	}
	.plan {
		padding: 24px 20px !important;
	}
	.plan-nombre {
		font-size: 1.4rem !important;
		margin: 6px 0 14px !important;
	}
	.plan-precio {
		min-height: auto !important;
	}
	.plan-precio-num {
		font-size: 2.4rem !important;
	}
	.plan-alta {
		margin: 10px 0 16px !important;
		font-size: 0.82rem !important;
	}
	.plan-features {
		margin-bottom: 20px !important;
	}
	.plan-features li {
		padding: 8px 0 8px 24px !important;
		font-size: 0.9rem !important;
	}
	.planes {
		padding: 60px 0 !important;
	}

	/* Desactivar parallax en móvil (evita que el título se solape) */
	.planes-title,
	.bafter-title,
	.services-title {
		transform: none !important;
	}
}
/* ==========================================================================
   v2.3.0 — Página /proyectos/ (portfolio del estudio)
   Adaptado a las variables reales del tema cortade
     01 · En producción (4 piezas)
     02 · Demos y conceptos (3 piezas)
   ========================================================================== */

/* HERO */
.proyectos-hero {
	min-height: 60vh;
	display: flex;
	align-items: center;
	padding: 220px 7vw 6rem;
	background: transparent;
	position: relative;
	z-index: 3;
}
.proyectos-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}
.proyectos-eyebrow {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--warm);
	margin-bottom: 2rem;
}
.proyectos-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 1.04;
	letter-spacing: -0.018em;
	color: var(--ink);
	margin-bottom: 2rem;
}
.proyectos-title em {
	font-style: italic;
	color: var(--warm);
}
.proyectos-sub {
	max-width: 60ch;
	font-size: clamp(16px, 1.55vw, 19px);
	line-height: 1.65;
	color: var(--ink-2);
	font-weight: 300;
	margin-bottom: 3rem;
}
.proyectos-meta {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.proyectos-meta .big {
	display: block;
	font-family: var(--serif);
	font-size: 3rem;
	color: var(--warm);
	margin-bottom: 0.5rem;
}

/* SECCIONES */
.proyectos-seccion {
	padding: 6rem 7vw;
	background: transparent;
	position: relative;
	z-index: 3;
}
.proyectos-seccion-header {
	max-width: 1400px;
	margin: 0 auto 4rem;
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 4rem;
	align-items: start;
}
.proyectos-seccion .section-label {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.proyectos-seccion .section-label .number {
	display: block;
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--warm);
	margin-bottom: 0.5rem;
}
.seccion-intro {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 60ch;
}

/* GRID */
.proyectos-grid {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
}

/* TARJETA */
.proyecto-card {
	background: rgba(6, 10, 24, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(212, 165, 116, 0.12);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s;
}
.proyecto-card:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 165, 116, 0.45);
}
.proyecto-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.proyecto-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.proyecto-card:hover .proyecto-card-media img {
	transform: scale(1.04);
}
.proyecto-card-body {
	padding: 2rem;
}
.proyecto-eyebrow {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--warm);
	margin-bottom: 1rem;
}
.proyecto-titulo {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.1;
	color: var(--ink);
	margin-bottom: 1rem;
}
.proyecto-desc {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin-bottom: 1.5rem;
}
.proyecto-tech {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.proyecto-tech li {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 0.35rem 0.75rem;
	border: 1px solid rgba(212, 165, 116, 0.2);
	border-radius: 4px;
}
.proyecto-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sans);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--warm);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, color 0.3s;
	padding-bottom: 0.25rem;
}
.proyecto-cta:hover {
	color: var(--warm-2);
	border-bottom-color: var(--warm-2);
}
.proyecto-cta .arrow {
	transition: transform 0.3s;
}
.proyecto-cta:hover .arrow {
	transform: translateX(4px);
}

/* DEMOS variant (acento cyan) */
.proyecto-card-demo {
	border-color: rgba(34, 211, 238, 0.12);
}
.proyecto-card-demo:hover {
	border-color: rgba(34, 211, 238, 0.35);
}
.proyecto-card-demo .proyecto-eyebrow {
	color: var(--cyan);
}
.proyecto-card-demo .proyecto-cta {
	color: var(--cyan);
}
.proyecto-card-demo .proyecto-cta:hover {
	color: var(--cyan-soft);
	border-bottom-color: var(--cyan-soft);
}

/* CTA FINAL */
.proyectos-cta-final {
	padding: 8rem 7vw;
	text-align: center;
	background: transparent;
	position: relative;
	z-index: 3;
}
.proyectos-cta-inner {
	max-width: 700px;
	margin: 0 auto;
}
.proyectos-cta-final h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.1;
	color: var(--ink);
	margin-bottom: 1.5rem;
}
.proyectos-cta-final p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin-bottom: 2.5rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.proyectos-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.proyectos-seccion-header {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.proyectos-hero {
		padding: 160px 7vw 4rem;
	}
	.proyectos-seccion {
		padding: 4rem 7vw;
	}
}
/* === BADGES de proyectos: distinguir En producción vs Demo === */
.proyecto-card-media {
	position: relative;
}
.proyecto-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 30px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-weight: 500;
}
/* Demo: acento cyan, aspecto "etiqueta de concepto" */
.proyecto-card-demo .proyecto-badge {
	background: rgba(34, 211, 238, 0.16);
	color: var(--cyan-soft);
	border: 1px solid rgba(34, 211, 238, 0.4);
}
/* En producción: dorado + punto verde de "vivo" */
.proyecto-badge-live {
	background: rgba(212, 165, 116, 0.16);
	color: var(--warm);
	border: 1px solid rgba(212, 165, 116, 0.4);
}
.proyecto-badge-live::first-letter {
	color: #4ade80; /* punto verde "online" */
}