/* =========================================================
   Wuo! Estudio — estilos del sitio
   Identidad: colores medidos del logo · Playfair Display + Lato
   Proporción: 60 % azul noche o blanco · 30 % violeta · 10 % oro
   ========================================================= */

:root {
  --noche: #0D0F1F;
  --violeta: #796BA1;
  --oro: #E3AD2B;
  --blanco: #FFFFFF;

  --texto: rgba(255, 255, 255, 0.92);
  --texto-suave: rgba(255, 255, 255, 0.68);
  --texto-tenue: rgba(255, 255, 255, 0.45);
  --linea: rgba(255, 255, 255, 0.12);
  --tarjeta: rgba(255, 255, 255, 0.04);
  --violeta-10: rgba(121, 107, 161, 0.10);
  --violeta-20: rgba(121, 107, 161, 0.20);

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Lato', 'Segoe UI', system-ui, sans-serif;

  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radio: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--noche); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--oro); color: var(--noche); }

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.seccion.clara { background: var(--blanco); color: var(--noche); }
.seccion.violeta { background: var(--violeta); }

/* ---------- Tipografía ---------- */
.titulo-xl { font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 8.4vw, 124px); line-height: 1.12; letter-spacing: -0.02em; }
.titulo-l { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5.6vw, 76px); line-height: 1.14; letter-spacing: -0.015em; }
.titulo-m { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; }
em, .acento { font-style: italic; color: var(--oro); }
.clara em, .clara .acento { color: var(--violeta); }
.antetitulo { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--texto-suave); }
.antetitulo::before { content: ''; width: 34px; height: 2px; background: var(--oro); }
.clara .antetitulo { color: rgba(13, 15, 31, .6); }
.lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--texto-suave); max-width: 640px; }
.clara .lead { color: rgba(13, 15, 31, .7); }

/* ---------- Botones y enlaces ---------- */
.boton { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 32px; border-radius: 999px; font-weight: 900; font-size: 16px; letter-spacing: .02em; background: var(--oro); color: var(--noche); overflow: hidden; isolation: isolate; transition: transform .4s var(--ease); }
.boton::after { content: ''; position: absolute; inset: 0; background: var(--blanco); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; border-radius: inherit; }
.boton:hover::after { transform: translateY(0); }
.boton.contorno { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px var(--linea); }
.boton.contorno::after { background: var(--violeta); }
.boton .flecha { transition: transform .4s var(--ease); }
.boton:hover .flecha { transform: translateX(4px); }
.enlace-flecha { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; color: var(--oro); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.clara .enlace-flecha { color: var(--violeta); }

/* ---------- Cursor personalizado (solo con mouse) ---------- */
.cursor, .cursor-punto { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor { width: 42px; height: 42px; border: 1.5px solid var(--oro); transition: width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s; mix-blend-mode: difference; }
.cursor-punto { width: 6px; height: 6px; background: var(--oro); }
.cursor.activo { width: 84px; height: 84px; background: rgba(227, 173, 43, .15); border-color: transparent; }
.cursor .texto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); opacity: 0; transition: opacity .3s; }
.cursor.ver .texto { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-punto { display: none; } }

/* ---------- Telón de transición entre páginas ---------- */
.telon { position: fixed; inset: 0; z-index: 9000; background: var(--noche); display: grid; place-items: center; pointer-events: none; }
.telon img { width: 120px; opacity: .9; }
.telon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--oro); transform-origin: left; animation: carga 1s var(--ease) infinite; }
@keyframes carga { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sin-js .telon { display: none; }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform .5s var(--ease), background .4s; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.cabecera.solida { background: rgba(13, 15, 31, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera .logo img { height: 42px; width: auto; }
.menu { display: flex; align-items: center; gap: 34px; }
.menu a:not(.boton) { position: relative; font-weight: 700; font-size: 15px; color: var(--texto-suave); transition: color .3s; }
.menu a:not(.boton)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.menu a:not(.boton):hover, .menu a.actual { color: var(--blanco); }
.menu a:not(.boton):hover::after, .menu a.actual::after { transform: scaleX(1); transform-origin: left; }
.menu .boton { padding: 12px 22px; font-size: 14px; }
.hamburguesa { display: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea); position: relative; }
.hamburguesa span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--blanco); transition: transform .4s var(--ease), opacity .3s; }
.hamburguesa span:nth-child(1) { top: 18px; } .hamburguesa span:nth-child(2) { top: 26px; }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 880px) {
  .hamburguesa { display: block; z-index: 2; }
  .menu { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px; background: var(--noche); clip-path: circle(0 at calc(100% - 40px) 42px); transition: clip-path .8s var(--ease); }
  .menu a:not(.boton) { font-family: var(--serif); font-size: 38px; color: var(--blanco); }
  .menu-abierto .menu { clip-path: circle(150% at calc(100% - 40px) 42px); }
}

/* ---------- HÉROE ---------- */
.heroe { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 90px; }
.heroe canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.heroe .isotipo-respaldo { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(40vw, 520px); opacity: .12; z-index: 0; pointer-events: none; }
.heroe .foco { position: absolute; width: 900px; height: 900px; border-radius: 50%; left: 0; top: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(121, 107, 161, .32) 0%, rgba(121, 107, 161, 0) 60%); pointer-events: none; z-index: 0; }
.heroe .contenedor { position: relative; z-index: 1; }
.heroe .pregunta { display: block; }
.rotador { position: relative; display: inline-block; vertical-align: top; color: var(--oro); font-style: italic; min-width: 2ch; }
.rotador .palabra { display: inline-block; white-space: nowrap; }
.heroe .respuesta { margin-top: clamp(20px, 3vw, 36px); font-size: clamp(20px, 2.2vw, 30px); color: var(--texto); max-width: 720px; }
.heroe .respuesta strong { color: var(--blanco); }
.heroe .acciones { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.heroe .indicador { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-tenue); }
.heroe .indicador i { width: 1px; height: 46px; background: linear-gradient(var(--oro), transparent); animation: baja 2s var(--ease) infinite; transform-origin: top; }
@keyframes baja { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Cinta en movimiento ---------- */
.cinta { overflow: hidden; border-block: 1px solid var(--linea); padding: 26px 0; background: var(--noche); }
.cinta .pista { display: flex; width: max-content; gap: 56px; will-change: transform; }
.cinta span { font-family: var(--serif); font-size: clamp(30px, 4vw, 54px); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.cinta span::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--oro); }
.cinta span:nth-child(even) { font-style: italic; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .5); }

/* ---------- Muestras (inicio) ---------- */
.muestras-cabeza { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 56px; }
.muestras { display: grid; grid-template-columns: 2.1fr 1fr; gap: 24px; align-items: start; }
.muestras .item:first-child { grid-row: span 2; }
/* Las muestras se ven completas: sin recortes ni textos encima */
.item { position: relative; margin: 0; }
.item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radio); background: #000; }
.item figcaption { padding: 14px 4px 0; font-weight: 700; }
.item figcaption small { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.clara .item figcaption small { color: var(--violeta); }
@media (max-width: 760px) { .muestras { grid-template-columns: 1fr; } .muestras .item:first-child { grid-row: auto; } }

/* ---------- Servicios (tarjetas grandes) ---------- */
.servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 60px; }
.servicio { position: relative; padding: clamp(32px, 4vw, 56px); border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); overflow: hidden; min-height: 420px; display: flex; flex-direction: column; transform-style: preserve-3d; transition: border-color .4s; }
.servicio:hover { border-color: rgba(227, 173, 43, .5); }
.servicio .numero { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--oro); }
.servicio h3 { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 52px); line-height: 1.14; margin: 18px 0 16px; }
.servicio p { color: var(--texto-suave); max-width: 440px; }
.servicio ul { list-style: none; margin: 26px 0 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.servicio li { font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto-suave); }
.servicio .enlace-flecha { margin-top: auto; align-self: flex-start; }
.servicio .marca-agua { position: absolute; right: -40px; bottom: -40px; width: 260px; opacity: .06; transition: transform .8s var(--ease), opacity .6s; }
.servicio:hover .marca-agua { transform: rotate(-8deg) scale(1.08); opacity: .14; }
.servicio .brillo { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 173, 43, .16), transparent 65%); transform: translate(-50%, -50%); left: var(--mx, -999px); top: var(--my, -999px); pointer-events: none; }
@media (max-width: 880px) { .servicios-grid { grid-template-columns: 1fr; } .servicio { min-height: 0; } }
/* Tres servicios en fila */
.servicios-grid.tres { grid-template-columns: repeat(3, 1fr); }
.servicios-grid.tres .servicio { min-height: 460px; }
.servicios-grid.tres .servicio h3 { font-size: clamp(30px, 2.8vw, 42px); }
@media (max-width: 1100px) { .servicios-grid.tres { grid-template-columns: 1fr; } .servicios-grid.tres .servicio { min-height: 0; } }
/* Asesoría */
.asesoria { margin-top: 24px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radio); background: var(--violeta); display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.asesoria .antetitulo { color: rgba(255, 255, 255, .8); }
.asesoria .antetitulo::before { background: var(--oro); }
.asesoria h3 { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); margin: 12px 0 8px; }
.asesoria p { color: rgba(255, 255, 255, .85); max-width: 620px; }
.asesoria strong { color: var(--blanco); }

/* ---------- Bloque de llamada final ---------- */
.llamada { position: relative; overflow: hidden; text-align: center; }
.llamada .titulo-xl { max-width: 1000px; margin: 0 auto; }
.llamada .acciones { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.llamada .orbita { position: absolute; width: 640px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .07; pointer-events: none; }

/* ---------- Pie de página ---------- */
.pie { border-top: 1px solid var(--linea); padding: 80px 0 40px; background: var(--noche); }
.pie-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.3fr; gap: 36px; }
.pie h4 { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 18px; }
.pie li { list-style: none; margin-bottom: 10px; }
.pie li a { color: var(--texto-suave); transition: color .3s; }
.pie li a:hover { color: var(--oro); }
.pie .logo img { height: 54px; width: auto; margin-bottom: 20px; }
.pie .lema { color: var(--texto-suave); max-width: 300px; }
.pie-legal { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--texto-tenue); }
@media (max-width: 1000px) { .pie-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie-grid { grid-template-columns: 1fr; } }

/* ---------- Botón flotante: reservado para el futuro asistente con IA (ver Documentacion/05_Pendientes.md) ---------- */

/* ---------- Encabezado de páginas internas ---------- */
.cabeza-pagina { padding: clamp(150px, 20vw, 220px) 0 clamp(60px, 8vw, 100px); position: relative; overflow: hidden; }
.cabeza-pagina .lead { margin-top: 28px; }
.cabeza-pagina .isotipo-fondo { position: absolute; right: -6%; top: 50%; width: min(520px, 50vw); transform: translateY(-40%); opacity: .07; pointer-events: none; }
.migas { font-size: 14px; color: var(--texto-tenue); margin-bottom: 26px; }
.migas a { color: var(--texto-suave); } .migas a:hover { color: var(--oro); }

/* ---------- Nosotros ---------- */
.manifiesto p { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 46px); line-height: 1.3; }
.manifiesto .palabra { opacity: .18; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 70px; }
.cifra { padding: 36px; border-radius: var(--radio); background: var(--violeta-10); }
.cifra b { display: block; font-family: var(--sans); font-weight: 900; font-size: clamp(54px, 6vw, 84px); line-height: 1; letter-spacing: -0.03em; color: var(--noche); }
.cifra b span:first-child { color: var(--violeta); }
.cifra p { margin-top: 10px; color: rgba(13, 15, 31, .7); }
@media (max-width: 760px) { .cifras { grid-template-columns: 1fr; } }
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-top: 60px; }
.pilar { background: var(--noche); padding: 44px 36px; }
.pilar .numero { font-family: var(--serif); font-style: italic; color: var(--oro); font-size: 20px; }
.pilar h3 { font-family: var(--serif); font-size: 30px; margin: 14px 0 10px; }
.pilar p { color: var(--texto-suave); }
@media (max-width: 880px) { .pilares { grid-template-columns: 1fr; } }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
@media (max-width: 880px) { .dos-columnas { grid-template-columns: 1fr; } }

/* ---------- Planes (acordeón) ---------- */
.planes { display: flex; flex-direction: column; gap: 18px; margin-top: 56px; }
.plan { border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); overflow: hidden; transition: border-color .4s, background .4s; }
.plan.abierto { border-color: rgba(121, 107, 161, .7); background: rgba(121, 107, 161, .08); }
.plan.destacado { border-color: rgba(227, 173, 43, .45); }
.plan-cabeza { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: center; padding: clamp(24px, 3vw, 40px); text-align: left; }
.plan-cabeza h3 { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.plan-cabeza p { color: var(--texto-suave); margin-top: 6px; max-width: 560px; }
.plan-cabeza .etiqueta { display: inline-block; margin-bottom: 10px; font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--noche); background: var(--oro); padding: 5px 12px; border-radius: 999px; }
.precio { font-weight: 900; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.precio small { font-size: .5em; color: var(--oro); margin-left: 4px; }
.mas { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linea); position: relative; flex: none; transition: transform .5s var(--ease), background .4s; }
.mas::before, .mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--blanco); transform: translate(-50%, -50%); }
.mas::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--ease); }
.plan.abierto .mas { background: var(--oro); transform: rotate(180deg); }
.plan.abierto .mas::before, .plan.abierto .mas::after { background: var(--noche); }
.plan.abierto .mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.plan-cuerpo { height: 0; overflow: hidden; }
.plan-interior { padding: 0 clamp(24px, 3vw, 40px) clamp(28px, 3vw, 44px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; border-top: 1px solid var(--linea); padding-top: 34px; }
.plan-interior h4 { font-family: var(--serif); font-size: 24px; margin: 0 0 14px; color: var(--blanco); }
.plan-interior h5 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin: 22px 0 6px; }
.plan-interior h5:first-of-type { margin-top: 0; }
.plan-interior ul { padding-left: 18px; color: var(--texto-suave); }
.plan-interior li { margin: 3px 0; }
.lista-check { list-style: none; padding: 0 !important; }
.lista-check li { position: relative; padding-left: 30px; margin: 9px 0; color: var(--texto); }
.lista-check li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--violeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.condiciones { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 15px; }
.condiciones th, .condiciones td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.condiciones th { width: 38%; color: var(--texto-tenue); font-weight: 700; padding-right: 14px; }
.nota { margin-top: 18px; padding: 16px 20px; border-radius: 14px; background: var(--violeta-10); border-left: 3px solid var(--violeta); color: var(--texto-suave); font-size: 15px; }
.nota.aviso { border-left-color: var(--oro); }
.plan-interior .boton { margin-top: 26px; }
@media (max-width: 880px) {
  .plan-cabeza { grid-template-columns: 1fr auto; }
  .plan-cabeza .precio { grid-column: 1; grid-row: 2; }
  .plan-cabeza .mas { grid-column: 2; grid-row: 1 / span 2; }
  .plan-interior { grid-template-columns: 1fr; }
}

/* ---------- Extras ---------- */
.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 50px; }
.extra-grupo { padding: 30px; border-radius: var(--radio); background: var(--violeta-10); }
.extra-grupo h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 14px; color: var(--noche); }
.extra-grupo li { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(13, 15, 31, .08); font-size: 15px; color: rgba(13, 15, 31, .8); }
.extra-grupo li b { white-space: nowrap; color: var(--violeta); }

/* ---------- Descargas ---------- */
.descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 48px; }
.descarga { position: relative; padding: 30px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--tarjeta); display: flex; flex-direction: column; gap: 10px; min-height: 210px; transition: transform .5s var(--ease), border-color .4s, background .4s; }
.descarga:hover { transform: translateY(-6px); border-color: var(--oro); background: rgba(227, 173, 43, .06); }
.descarga .tipo { font-size: 12px; font-weight: 900; letter-spacing: .2em; color: var(--oro); }
.descarga h3 { font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.descarga p { color: var(--texto-suave); font-size: 15px; }
.descarga .icono { margin-top: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--oro); color: var(--noche); display: grid; place-items: center; transition: transform .5s var(--ease); }
.descarga:hover .icono { transform: translateY(4px); }

/* ---------- Pestañas (ayuda) ---------- */
.pestanas { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); margin-top: 40px; position: relative; }
.pestana { position: relative; z-index: 1; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--texto-suave); transition: color .4s; }
.pestana.activa { color: var(--noche); }
.pestanas .fondo-activo { position: absolute; z-index: 0; top: 6px; bottom: 6px; border-radius: 999px; background: var(--oro); transition: left .5s var(--ease), width .5s var(--ease); }
.panel { display: none; } .panel.activo { display: block; }
.pestanas { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { white-space: nowrap; }
.pestanas.pequenas { margin-top: 34px; }
.pestanas.pequenas .pestana { padding: 10px 20px; font-size: 14px; }
.ayuda-descargas { font-family: var(--serif); font-size: 28px; margin: 70px 0 0; color: var(--oro); font-style: italic; }
.requisito h4 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 16px 0 6px; }
.requisito ol { padding-left: 20px; color: var(--texto-suave); font-size: 15px; }
.requisito p { color: var(--texto-suave); font-size: 15px; }
.precio-retoque { margin: -4px 0 10px; color: rgba(13, 15, 31, .7); }
.precio-retoque b { font-size: 30px; font-weight: 900; color: var(--violeta); }

/* Preguntas (acordeón simple) */
.preguntas-grupo { margin-top: 56px; }
.preguntas-grupo > h3 { font-family: var(--serif); font-size: 28px; margin-bottom: 10px; color: var(--oro); font-style: italic; }
.pregunta-item { border-bottom: 1px solid var(--linea); }
.pregunta-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; text-align: left; font-size: 19px; font-weight: 700; }
.pregunta-item button .mas { width: 40px; height: 40px; }
.pregunta-item button .mas::before, .pregunta-item button .mas::after { width: 14px; }
.pregunta-item.abierto .mas { background: var(--oro); transform: rotate(180deg); }
.pregunta-item.abierto .mas::before, .pregunta-item.abierto .mas::after { background: var(--noche); }
.pregunta-item.abierto .mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.respuesta-cuerpo { height: 0; overflow: hidden; }
.respuesta-cuerpo > div { padding: 0 60px 24px 0; color: var(--texto-suave); }
.respuesta-cuerpo ul, .respuesta-cuerpo ol { padding-left: 20px; margin-top: 8px; }
.respuesta-cuerpo strong { color: var(--blanco); }

/* Requisitos */
.requisitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 56px; }
.requisito { padding: 32px; border-radius: var(--radio); background: var(--tarjeta); border: 1px solid var(--linea); }
.requisito .numero { font-family: var(--serif); font-style: italic; color: var(--oro); font-size: 34px; line-height: 1; }
.requisito h3 { font-family: var(--serif); font-size: 24px; margin: 12px 0 12px; }
.requisito ul { padding-left: 18px; color: var(--texto-suave); font-size: 15px; }
.requisito li { margin: 4px 0; }

/* ---------- Contacto ---------- */
.contactos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.contacto { display: flex; align-items: center; gap: 20px; padding: 26px 30px; border-radius: var(--radio); background: rgba(255, 255, 255, .06); border: 1px solid var(--linea); transition: border-color .4s, background .4s, transform .5s var(--ease); }
.contacto:hover { border-color: var(--oro); background: rgba(227, 173, 43, .08); transform: translateY(-4px); }
.contacto .icono { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--oro); color: var(--noche); display: grid; place-items: center; }
.contacto .icono svg { width: 26px; height: 26px; }
.contacto small { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-tenue); }
.contacto b { font-size: 20px; }
@media (max-width: 680px) { .contactos { grid-template-columns: 1fr; } }

/* ---------- Carrusel infinito: se mueve solo; se puede arrastrar o deslizar ---------- */
.carrusel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel.arrastrando { cursor: grabbing; }
.carrusel.arrastrando img { pointer-events: none; }
.carrusel .pista { display: flex; gap: 28px; padding: 0 var(--gutter); width: max-content; }
.carrusel .item { width: min(560px, 78vw); flex: none; user-select: none; }
.carrusel img { -webkit-user-drag: none; }

/* ---------- Animaciones: estado inicial (solo si hay JS y movimiento permitido) ---------- */
.js .revelar { opacity: 0; transform: translateY(40px); }
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
  .heroe .indicador i, .telon::after { animation: none; }
}

/* ---------- ¿Tienes dudas? (planes) y ¿Aún tienes dudas? (preguntas frecuentes) ---------- */
.plan-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.plan-acciones .boton { margin-top: 0; }
.enlace-dudas { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; color: rgba(13, 15, 31, .6); text-decoration: underline; text-underline-offset: 3px; }
.enlace-dudas:hover { color: var(--violeta); }
.mas-dudas { margin-top: 48px; padding: clamp(26px, 3.5vw, 40px); border-radius: var(--radio); background: var(--violeta); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.mas-dudas h3 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.mas-dudas h3 em { color: var(--oro); }
.mas-dudas p { color: rgba(255, 255, 255, .85); margin-top: 6px; }