/* ============================================================
   Sublimarte Studio Pro
   Paleta tomada del logo: fenix naranja sobre azul noche,
   mandala de magenta a cian. Modo oscuro con acentos neon.
   ============================================================ */

:root{
  /* Fondos */
  --noche:#07070F;
  --noche-2:#0B0B16;
  --carta:#121122;
  --carta-2:#191830;
  --borde:rgba(255,255,255,.10);
  --borde-vivo:rgba(255,122,24,.45);

  /* Colores de marca, medidos sobre el logo y avivados para fondo oscuro */
  --fuego:#FF3B1F;
  --naranja:#FF7A18;
  --dorado:#FFC61A;
  --magenta:#FF1E8E;
  --cian:#19C6F5;
  --azul:#0B6FB8;
  --verde:#3DD68C;

  /* Texto */
  --blanco:#FFFFFF;
  --texto:#C7C7DE;
  --texto-2:#9C9CB8;   /* subido de #8C8CA8: sobre el fondo oscuro pasa de 6:1 a AAA */

  --degradado:linear-gradient(95deg,var(--magenta),var(--fuego),var(--naranja),var(--dorado));
  --degradado-frio:linear-gradient(95deg,var(--cian),var(--azul));

  --font-titulo:"Outfit",system-ui,-apple-system,sans-serif;
  --font-texto:"DM Sans",system-ui,-apple-system,sans-serif;

  --wrap:1180px;
  --pad:clamp(18px,5vw,36px);
  --radio:18px;
  --header-h:70px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--noche);
  color:var(--texto);
  font-family:var(--font-texto);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;}
a{color:inherit;}

h1,h2,h3,h4{font-family:var(--font-titulo);font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em;color:var(--blanco);}
h1{font-size:clamp(2.2rem,5.4vw,4rem);}
h2{font-size:clamp(1.8rem,3.8vw,2.9rem);}
h3{font-size:clamp(1.1rem,1.8vw,1.35rem);}
p{margin:0 0 1em;}

.contenedor{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
.seccion{padding:clamp(64px,9vw,120px) 0;position:relative;}

.texto-degradado{
  background:var(--degradado);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.etiqueta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dorado);margin-bottom:14px;
}
.etiqueta::before{content:"";width:24px;height:2px;background:var(--degradado);}

.sub-seccion{color:var(--texto-2);font-size:1.05rem;max-width:62ch;}

.cabecera-seccion{text-align:center;margin-bottom:clamp(40px,5vw,66px);}
.cabecera-seccion .sub-seccion{margin-left:auto;margin-right:auto;}
.cabecera-seccion .etiqueta::before{display:none;}

.salto-enlace{position:absolute;left:-9999px;top:0;z-index:999;background:var(--naranja);color:#1A0A00;padding:12px 20px;font-weight:700;text-decoration:none;border-radius:0 0 10px 0;}
.salto-enlace:focus{left:0;}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:8px;}

/* ── Botones ──────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--font-texto);font-size:.96rem;font-weight:700;
  text-decoration:none;cursor:pointer;position:relative;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease;
}
.btn-fuego{background:var(--degradado);color:#1A0500;box-shadow:0 8px 26px rgba(255,59,31,.34);}
.btn-fuego:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,59,31,.52),0 0 22px rgba(255,198,26,.35);}
.btn-wa{background:#25D366;color:#04240F;box-shadow:0 8px 24px rgba(37,211,102,.30);}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.48);}
.btn-linea{background:rgba(255,255,255,.04);color:var(--blanco);border-color:var(--borde);backdrop-filter:blur(8px);}
.btn-linea:hover{border-color:var(--borde-vivo);background:rgba(255,122,24,.10);transform:translateY(-2px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ── Cabecera ─────────────────────────────────────── */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(7,7,15,.62);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.cabecera.solida{background:rgba(7,7,15,.94);border-bottom-color:var(--borde);}
.cabecera-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.marca img{width:42px;height:auto;filter:drop-shadow(0 0 10px rgba(255,122,24,.45));}
.marca-texto{display:flex;flex-direction:column;line-height:1;}
.marca-texto b{font-family:var(--font-titulo);font-weight:800;font-size:1.02rem;color:var(--blanco);letter-spacing:.02em;}
.marca-texto span{font-size:.62rem;letter-spacing:.26em;color:var(--dorado);text-transform:uppercase;margin-top:3px;}

.nav{display:flex;align-items:center;gap:26px;}
.nav a{color:var(--texto);text-decoration:none;font-size:.9rem;font-weight:500;position:relative;padding:5px 0;transition:color .2s ease;}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--degradado);transition:width .25s ease;}
.nav a:hover{color:var(--blanco);}
.nav a:hover::after{width:100%;}

.cabecera .btn{padding:10px 20px;font-size:.86rem;}

.menu-btn{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between;}
.menu-btn span{display:block;height:2px;width:100%;background:var(--blanco);border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

@media (max-width:1020px){
  .menu-btn{display:flex;}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(7,7,15,.99);backdrop-filter:blur(18px);
    padding:6px var(--pad) 24px;border-bottom:1px solid var(--borde);
    transform:translateY(-125%);transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .nav.abierto{transform:translateY(0);}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;}
  .nav a::after{display:none;}
  .cabecera .btn-wa{display:none;}
}

/* ── Hero ─────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--header-h) + 40px);padding-bottom:70px;overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* El video ya trae el logotipo con su texto. Se amplía desde el centro del
   mandala para que ese texto quede fuera de cuadro: si no, asoma por abajo
   partido a la mitad y compite con los botones. */
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.55);transform-origin:50% 40%;
}
.hero-media video{opacity:0;transition:opacity 1s ease;}
.hero-media video.listo{opacity:1;}
.hero-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 42%,rgba(7,7,15,.30) 0%,rgba(7,7,15,.80) 62%,var(--noche) 100%),
    linear-gradient(to bottom,rgba(7,7,15,.86) 0%,rgba(7,7,15,.34) 26%,rgba(7,7,15,.55) 70%,var(--noche) 100%);
}
.hero .contenedor{position:relative;z-index:2;text-align:center;}
.hero h1{margin-bottom:22px;text-shadow:0 4px 34px rgba(7,7,15,.95);}
.hero-sub{
  color:var(--texto);font-size:clamp(1rem,1.35vw,1.16rem);
  max-width:60ch;margin:0 auto 32px;text-shadow:0 2px 20px rgba(7,7,15,.95);
}
.hero-botones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.hero-pastillas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px;}
.pastilla{
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--borde);color:var(--texto);
  backdrop-filter:blur(6px);
}

/* Resplandor giratorio detras del contenido del hero */
.hero-aura{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(760px,92vw);aspect-ratio:1;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(255,30,142,.20),rgba(255,59,31,.20),rgba(255,198,26,.18),
    rgba(61,214,140,.15),rgba(25,198,245,.18),rgba(255,30,142,.20));
  filter:blur(70px);opacity:.75;
  animation:girar 22s linear infinite;
}
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hero-aura{animation:none;}}

/* ── Aparicion por scroll ─────────────────────────── */
.revelar{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);}
.visible{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;transition:none;}}

/* ── Tarjetas ─────────────────────────────────────── */
.rejilla{display:grid;gap:clamp(16px,2.2vw,26px);}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.rejilla-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.tarjeta{
  position:relative;background:var(--carta);border:1px solid var(--borde);
  border-radius:var(--radio);padding:clamp(22px,2.6vw,30px);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
}
.tarjeta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--degradado);opacity:0;transition:opacity .35s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 28px rgba(255,59,31,.18);}
.tarjeta:hover::before{opacity:1;}
@media (prefers-reduced-motion:reduce){.tarjeta:hover{transform:none;}}

.tarjeta h3{margin-bottom:8px;}
.tarjeta p{color:var(--texto-2);font-size:.94rem;margin-bottom:16px;}
.tarjeta .btn{margin-top:auto;align-self:stretch;}

/* Lamina donde vive la ilustracion o, mas adelante, la foto real */
.lamina{
  position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin-bottom:18px;
  background:radial-gradient(120% 100% at 50% 0%,var(--carta-2) 0%,#0D0C1A 100%);
  border:1px solid rgba(255,255,255,.07);
  display:grid;place-items:center;
}
.lamina svg{width:64%;height:auto;}
.lamina img{width:100%;height:100%;object-fit:cover;}
.lamina::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 110%,rgba(255,122,24,.18),transparent 70%);
}

.insignia{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:rgba(7,7,15,.78);border:1px solid var(--borde);color:var(--dorado);
  backdrop-filter:blur(6px);
}

/* ── Personalizador ───────────────────────────────── */
#personalizador{background:linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 50%,var(--noche) 100%);}
/* Dos por fila: con cuatro columnas el paso 4 quedaba solo en una fila y los
   iconos de producto no tenían ancho para respirar. */
.pasos{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-bottom:34px;}
@media (max-width:760px){.pasos{grid-template-columns:1fr;}}
.paso{
  background:var(--carta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:clamp(20px,2.4vw,28px);
}
.paso-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;margin-bottom:14px;
  font-family:var(--font-titulo);font-weight:800;font-size:.95rem;
  background:var(--degradado);color:#1A0500;
}
.paso h3{font-size:1.05rem;margin-bottom:6px;}
.paso > p{font-size:.88rem;color:var(--texto-2);margin-bottom:16px;}

.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;}
.opcion{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 8px;border-radius:12px;cursor:pointer;text-align:center;
  background:var(--carta-2);border:1px solid var(--borde);
  font-size:.79rem;font-weight:600;color:var(--texto);
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}
.opcion svg{width:34px;height:34px;}
.opcion input{position:absolute;opacity:0;pointer-events:none;}
.opcion:hover{border-color:var(--borde-vivo);transform:translateY(-2px);}
.opcion:has(input:checked){
  border-color:var(--naranja);color:var(--blanco);
  background:linear-gradient(160deg,rgba(255,122,24,.20),rgba(255,30,142,.12));
  box-shadow:0 0 22px rgba(255,122,24,.28);
}
.opcion:has(input:focus-visible){outline:2px solid var(--dorado);outline-offset:2px;}

.campo{margin-bottom:14px;}
.campo label{display:block;font-size:.82rem;font-weight:700;color:var(--texto);margin-bottom:7px;}
.campo input[type=text],.campo textarea{
  width:100%;padding:12px 14px;border-radius:11px;
  background:var(--carta-2);border:1px solid var(--borde);color:var(--blanco);
  font-family:inherit;font-size:.95rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.campo textarea{min-height:88px;resize:vertical;}
.campo input::placeholder,.campo textarea::placeholder{color:#63637D;}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,122,24,.22);}

.zona-foto{
  position:relative;border:1.5px dashed rgba(255,255,255,.22);border-radius:13px;
  padding:20px 16px;text-align:center;cursor:pointer;
  background:var(--carta-2);transition:border-color .2s ease,background .2s ease;
}
.zona-foto:hover,.zona-foto.encima{border-color:var(--naranja);background:rgba(255,122,24,.08);}
.zona-foto input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.zona-foto svg{margin:0 auto 8px;color:var(--dorado);}
.zona-foto b{display:block;color:var(--blanco);font-size:.9rem;}
.zona-foto small{color:var(--texto-2);font-size:.78rem;}
.previa{margin-top:13px;display:none;}
.previa.activa{display:block;}
.previa img{width:100%;max-height:190px;object-fit:contain;border-radius:10px;background:#0A0A14;}
.previa .quitar{
  margin-top:9px;background:none;border:0;color:var(--texto-2);
  font-size:.8rem;cursor:pointer;text-decoration:underline;font-family:inherit;
}
.previa .quitar:hover{color:var(--fuego);}

.contador{display:flex;align-items:center;gap:14px;}
.contador button{
  width:40px;height:40px;border-radius:11px;cursor:pointer;
  background:var(--carta-2);border:1px solid var(--borde);color:var(--blanco);
  font-size:1.3rem;line-height:1;font-family:inherit;
  transition:border-color .2s ease,background .2s ease;
}
.contador button:hover{border-color:var(--naranja);background:rgba(255,122,24,.12);}
.contador output{
  font-family:var(--font-titulo);font-weight:800;font-size:1.7rem;color:var(--blanco);
  min-width:52px;text-align:center;
}

.resumen{
  background:var(--carta-2);border:1px solid var(--borde);border-radius:13px;
  padding:16px 18px;margin-bottom:16px;
}
.resumen dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.89rem;}
.resumen dt{color:var(--texto-2);}
.resumen dd{margin:0;color:var(--blanco);font-weight:600;text-align:right;overflow-wrap:anywhere;}
.nota-foto{font-size:.8rem;color:var(--texto-2);margin:12px 0 0;text-align:center;}

/* ── Ikigai ───────────────────────────────────────── */
#ikigai{background:var(--noche-2);}
.ikigai-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;}
@media (max-width:900px){.ikigai-rejilla{grid-template-columns:1fr;}}

.frase-ikigai{
  margin:0 0 24px;padding:0 0 0 20px;
  border-left:3px solid transparent;
  border-image:var(--degradado) 1;
  font-family:var(--font-titulo);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.72rem);line-height:1.32;
  color:var(--blanco);
}
.frase-ikigai em{font-style:normal;background:var(--degradado);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

.pilares-ikigai{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;}
.pilares-ikigai li{
  display:grid;grid-template-columns:auto 1fr;gap:4px 13px;
  font-size:.94rem;color:var(--texto-2);
}
.pilares-ikigai b{grid-column:2;color:var(--blanco);font-size:.98rem;}
.pilares-ikigai .punto{
  grid-row:1 / span 2;align-self:start;margin-top:7px;
  width:11px;height:11px;border-radius:50%;
  background:var(--c);box-shadow:0 0 12px var(--c);
}

/* Diagrama de los cuatro círculos. El giro lento recuerda al mandala del logo. */
.venn{margin:0;text-align:center;}
.venn svg{width:100%;max-width:400px;margin:0 auto;}
.venn-circulos{mix-blend-mode:screen;opacity:.42;transform-origin:210px 210px;animation:venn-girar 40s linear infinite;}
.venn-bordes circle{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1.2;}
.venn-centro{fill:rgba(7,7,15,.82);stroke:url(#gFuego);stroke-width:2;}
.venn-texto{
  fill:#fff;font-family:var(--font-titulo);font-weight:800;font-size:19px;
  letter-spacing:.14em;text-anchor:middle;
}
.venn-sub{fill:var(--dorado);font-family:var(--font-texto);font-size:10.5px;
  letter-spacing:.2em;text-anchor:middle;text-transform:uppercase;}
@keyframes venn-girar{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.venn-circulos{animation:none;}}

.venn figcaption{margin-top:18px;font-size:.87rem;color:var(--texto-2);max-width:38ch;margin-inline:auto;}

/* ── Contacto y pie ───────────────────────────────── */
#contacto{text-align:center;}
.datos-contacto{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);justify-content:center;margin-top:34px;}
.dato{display:flex;align-items:center;gap:11px;font-size:.95rem;}
.dato svg{color:var(--dorado);flex:0 0 auto;}
.dato a{color:var(--texto);text-decoration:none;}
.dato a:hover{color:var(--dorado);}

.pie{background:var(--noche-2);border-top:1px solid var(--borde);padding:clamp(46px,6vw,70px) 0 28px;}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(26px,4vw,48px);}
@media (max-width:760px){.pie-rejilla{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.pie-rejilla{grid-template-columns:1fr;}}
.pie p{font-size:.9rem;color:var(--texto-2);max-width:40ch;}
.pie h4{font-family:var(--font-texto);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado);margin-bottom:14px;}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.pie ul a{color:var(--texto-2);text-decoration:none;font-size:.91rem;transition:color .2s ease;}
.pie ul a:hover{color:var(--blanco);}
.pie-abajo{margin-top:clamp(32px,4vw,50px);padding-top:22px;border-top:1px solid var(--borde);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.83rem;color:var(--texto-2);}

.wa-flotante{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#04240F;box-shadow:0 10px 28px rgba(37,211,102,.45);
  transition:transform .25s ease;
}
.wa-flotante:hover{transform:scale(1.08);}
@media (prefers-reduced-motion:reduce){.wa-flotante:hover{transform:none;}}

@media (max-width:520px){
  .hero-botones .btn{width:100%;}
  .contador output{font-size:1.45rem;}
}