/* ============================================================
   PlusEV — Réplica Home  ·  Divi-style dark / green accent
   ============================================================ */

/* -------------------- TOKENS -------------------- */
:root{
  --bg:        #202020;   /* fondo principal */
  --bg-alt:    #2a2a2a;   /* secciones alternas */
  --bg-soft:   #333333;   /* tarjetas / header */
  --bg-card:   #262626;
  --line:      rgba(255,255,255,.08);
  --text:      #ffffff;
  --muted:     #b9b9b9;
  --accent:    #3BEC97;   /* verde PlusEV */
  --accent-2:  #24c67a;
  --accent-glow: rgba(59,236,151,.55);
  --radius:    16px;
  --radius-sm: 10px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow:    0 18px 40px rgba(0,0,0,.45);
  --maxw:      1180px;
}

/* -------------------- RESET -------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  font-family:'Poppins',Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{ line-height:1.15; font-weight:700; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.text-accent{ color:var(--accent); }

/* -------------------- BUTTONS -------------------- */
.btn{
  --bh:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  padding:.85em 1.8em; border-radius:999px; cursor:pointer;
  border:2px solid transparent; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn::after{ content:"→"; opacity:0; width:0; overflow:hidden; transition:opacity .3s var(--ease), width .3s var(--ease); }
.btn:hover::after{ opacity:1; width:1em; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.99); }

.btn-primary{ background:var(--accent); color:#08120c; box-shadow:0 6px 18px rgba(59,236,151,.28); }
.btn-primary:hover{ background:#57ffab; box-shadow:0 12px 30px var(--accent-glow); }

.btn-outline{ border-color:var(--accent); color:var(--accent); background:transparent; }
.btn-outline:hover{ background:var(--accent); color:#08120c; box-shadow:0 12px 30px var(--accent-glow); }

.btn-ghost{ color:#fff; background:transparent; border-color:transparent; }
.btn-ghost:hover{ color:var(--accent); transform:translateY(-2px); }

.btn-lg{ font-size:1.05rem; padding:1em 2.2em; }
.btn-block{ width:100%; }

/* -------------------- HEADER -------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(28,28,28,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{ background:rgba(22,22,22,.94); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.header-inner{ display:flex; align-items:center; gap:28px; height:74px; }
.brand-logo{ height:38px; width:auto; transition:transform .35s var(--ease); }
.brand:hover .brand-logo{ transform:scale(1.08); }

.main-nav{ margin-left:auto; }
.nav-list{ display:flex; gap:30px; }
.nav-link{
  position:relative; font-weight:500; font-size:.98rem; color:#e9e9e9;
  padding:6px 0; transition:color .3s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-link:hover{ color:var(--accent); }
.nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-cta{ display:flex; align-items:center; gap:12px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }

/* -------------------- HERO -------------------- */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0;
  background:url('../imagenes/background-hero-plus-ev-scaled.jpg') center/cover no-repeat;
  transform:scale(1.06); filter:saturate(1.05);
  animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{ to{ transform:scale(1.14); } }
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(59,236,151,.14), transparent 55%),
    linear-gradient(180deg, rgba(18,18,18,.55) 0%, rgba(18,18,18,.82) 60%, var(--bg) 100%);
}
.hero-content{ position:relative; z-index:2; text-align:center; }
.hero-eyebrow{
  display:inline-block; letter-spacing:.28em; text-transform:uppercase;
  font-size:.72rem; font-weight:600; color:var(--accent);
  border:1px solid rgba(59,236,151,.35); border-radius:999px; padding:.5em 1.3em; margin-bottom:26px;
  animation:fadeUp .8s var(--ease) both;
}
.hero-title{
  font-size:clamp(2.8rem,7vw,5.6rem); font-weight:800; letter-spacing:-.02em;
  margin-bottom:18px; animation:fadeUp .8s .1s var(--ease) both;
}
.hero-subtitle{
  font-size:clamp(1.05rem,2.2vw,1.4rem); color:var(--muted); max-width:640px;
  margin:0 auto 38px; animation:fadeUp .8s .2s var(--ease) both;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeUp .8s .3s var(--ease) both; }
/* el realce sigue al mouse: el botón no apuntado se atenúa */
.hero-actions:hover .btn:not(:hover){ opacity:.5; }
.hero-scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; }
.hero-scroll span{
  display:block; width:26px; height:44px; border:2px solid rgba(255,255,255,.35); border-radius:14px; position:relative;
}
.hero-scroll span::after{
  content:""; position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--accent); border-radius:2px; animation:scrollDot 1.6s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 80%{opacity:0;transform:translateY(14px)} 100%{opacity:0} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }

/* -------------------- SECTION HEAD -------------------- */
section{ padding:96px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-kicker{
  display:inline-block; text-transform:uppercase; letter-spacing:.26em; font-size:.72rem;
  font-weight:600; color:var(--accent); margin-bottom:14px;
}
.section-title{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; }
.section-lead{ color:var(--muted); margin-top:14px; }

/* -------------------- PRICING -------------------- */
.pricing{ background:var(--bg-alt); }
.pricing-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; max-width:920px; margin:0 auto;
  align-items:stretch;
}
.price-card{
  position:relative; display:flex; flex-direction:column; cursor:pointer;
  background:linear-gradient(180deg,#2c2c2c,#242424);
  border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px;
  transform:scale(.95); transform-origin:center center;   /* arrancan un poco más chicos */
  transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .35s var(--ease), opacity .3s var(--ease);
  will-change:transform;
}
/* mientras el cursor está en la zona de precios, se atenúan los no apuntados */
.pricing-grid:hover .price-card{ opacity:.6; }
.pricing-grid:hover .price-card:hover{ opacity:1; }
.price-card:hover{
  transform:scale(1.15);            /* se acerca a la pantalla ~20% de forma centrada */
  z-index:5;
  border-color:rgba(59,236,151,.6);
  box-shadow:0 34px 70px rgba(0,0,0,.6), 0 0 0 1px var(--accent-glow), 0 10px 44px rgba(59,236,151,.22);
}
.price-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#08120c; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.45em 1.1em; border-radius:999px; white-space:nowrap;
}
.price-card-top{ text-align:center; margin-bottom:26px; }
.price-badge{ display:block; text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--muted); margin-bottom:4px; }
.price-name{ font-size:2.1rem; font-weight:800; letter-spacing:.04em; color:var(--accent); }
.price-features{ display:flex; flex-direction:column; gap:16px; flex:1; margin-bottom:28px; }
.price-features li{ position:relative; padding-left:30px; font-size:.94rem; color:var(--muted); }
.price-features li::before{
  content:"✔"; position:absolute; left:0; top:1px; color:var(--accent);
  font-size:.85rem; font-weight:700;
}
.price-features strong{ display:block; color:#fff; font-weight:600; margin-bottom:2px; }
.price-foot{ margin-top:auto; }
.price-amount{ display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:18px; }
.price-label{ text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--muted); }
.price-value{ font-size:2.4rem; font-weight:800; }

/* -------------------- TEAM / IMAGE ACCORDION -------------------- */
.team{ background:var(--bg); }
.accordion{
  display:flex; gap:14px; height:560px; max-width:1240px; margin:0 auto; padding-inline:24px;
}
.accordion-panel{
  position:relative; flex:1 1 0; min-width:64px; border-radius:var(--radius); overflow:hidden;
  cursor:pointer; outline:none;
  transition:flex .5s var(--ease); /* movimiento estrella: expandir al hover */
}
.accordion-panel .accordion-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center top;
  transition:transform .8s var(--ease), filter .5s var(--ease);
  filter:grayscale(.4) brightness(.7);
  transform:scale(1.04);
}
.accordion-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,.05) 0%, rgba(15,15,15,.35) 45%, rgba(12,12,12,.92) 100%);
  transition:opacity .5s var(--ease);
}
/* etiqueta vertical cuando está contraído */
.accordion-label{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:26px;
  z-index:3; transition:opacity .35s var(--ease);
}
.accordion-label span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-weight:700; font-size:1.25rem; letter-spacing:.06em; color:#fff; white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
/* info detallada cuando está expandido */
.accordion-info{
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:34px 34px 38px;
  opacity:0; transform:translateY(24px); transition:opacity .4s var(--ease), transform .5s var(--ease);
  pointer-events:none; min-width:360px;
}
.accordion-info h3{ font-size:1.9rem; margin-bottom:10px; }
.accordion-info h3::after{ content:""; display:block; width:52px; height:3px; background:var(--accent); border-radius:2px; margin-top:10px; }
.coach-exp{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 12px; font-size:.9rem; color:var(--muted); }
.coach-exp b{ color:var(--accent); }
.coach-stats{ display:flex; gap:26px; margin-bottom:14px; }
.coach-stats label{ display:block; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; color:var(--muted); }
.coach-stats em{ font-style:normal; font-weight:700; font-size:1.05rem; }
.coach-notes li{ position:relative; padding-left:18px; font-size:.86rem; color:#d8d8d8; margin-bottom:4px; }
.coach-notes li::before{ content:"›"; position:absolute; left:0; color:var(--accent); font-weight:700; }
/* borde de acento (siempre presente, se revela en el panel activo) */
.accordion-panel::after{
  content:""; position:absolute; inset:0; border:2px solid var(--accent); border-radius:var(--radius);
  z-index:5; pointer-events:none; box-shadow:0 0 40px var(--accent-glow) inset;
  opacity:0; transition:opacity .4s var(--ease);
}

/* ---- MEZCLA DE ESTADOS ----
   Reposo: el panel .is-open (o con foco) está expandido.
   Al pasar el mouse por el accordion, se ignora .is-open y manda el :hover. */

/* estado EXPANDIDO */
.accordion-panel.is-open,
.accordion-panel:focus-visible{ flex:5 1 0; }
.accordion-panel.is-open .accordion-photo,
.accordion-panel:focus-visible .accordion-photo{ filter:grayscale(0) brightness(.92); transform:scale(1); }
.accordion-panel.is-open .accordion-label,
.accordion-panel:focus-visible .accordion-label{ opacity:0; }
.accordion-panel.is-open .accordion-info,
.accordion-panel:focus-visible .accordion-info{ opacity:1; transform:none; }
.accordion-panel.is-open::after,
.accordion-panel:focus-visible::after{ opacity:1; }

/* al hover del contenedor: TODOS vuelven a contraído (anula .is-open) ... */
#coach-accordion:hover .accordion-panel{ flex:1 1 0; }
#coach-accordion:hover .accordion-panel .accordion-photo{ filter:grayscale(.4) brightness(.7); transform:scale(1.04); }
#coach-accordion:hover .accordion-panel .accordion-label{ opacity:1; }
#coach-accordion:hover .accordion-panel .accordion-info{ opacity:0; transform:translateY(24px); }
#coach-accordion:hover .accordion-panel::after{ opacity:0; }

/* ... excepto el que estás apuntando, que se expande */
#coach-accordion:hover .accordion-panel:hover{ flex:5 1 0; }
#coach-accordion:hover .accordion-panel:hover .accordion-photo{ filter:grayscale(0) brightness(.92); transform:scale(1); }
#coach-accordion:hover .accordion-panel:hover .accordion-label{ opacity:0; }
#coach-accordion:hover .accordion-panel:hover .accordion-info{ opacity:1; transform:none; }
#coach-accordion:hover .accordion-panel:hover::after{ opacity:1; }

/* -------------------- SERVICES (flip cards) -------------------- */
.services{ background:var(--bg-alt); }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.service-card{ min-height:240px; background:transparent; border:0; perspective:1200px; }
.service-inner{
  position:relative; width:100%; min-height:240px;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.785,.135,.15,.86);
}
.service-card:hover .service-inner{ transform:rotateY(180deg); }

.service-front, .service-back{
  position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:26px; text-align:center; border:1px solid var(--line); border-radius:var(--radius);
}
.service-front{ background:var(--bg-card); }
.service-back{
  background:linear-gradient(160deg,#203029 0%,#1b2521 100%);
  border-color:rgba(59,236,151,.4); transform:rotateY(180deg);
  box-shadow:0 20px 44px rgba(0,0,0,.45), 0 0 30px rgba(59,236,151,.12) inset;
}
.service-icon{
  width:82px; height:82px; display:grid; place-items:center; color:var(--accent);
  border-radius:50%; background:rgba(59,236,151,.1); border:1px solid rgba(59,236,151,.3);
  transition:box-shadow .35s var(--ease);
}
.service-icon svg{ width:40px; height:40px; }
.service-card:hover .service-front .service-icon{ box-shadow:0 0 26px var(--accent-glow); }
.service-front h3{ font-size:1.12rem; }
.service-back h3{ font-size:1.12rem; color:var(--accent); }
.service-back h3::after{ content:""; display:block; width:40px; height:3px; background:var(--accent); border-radius:2px; margin:8px auto 0; }
.service-back p{ font-size:.9rem; color:#d8d8d8; }

/* -------------------- HUD -------------------- */
.hud{ background:var(--bg); }
.hud-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.hud-sub{ color:var(--accent); font-size:1.3rem; margin:6px 0 14px; }
.hud-text > p{ color:var(--muted); margin-bottom:20px; }
.hud-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.hud-list li{ position:relative; padding-left:32px; color:#ededed; }
.hud-list li::before{
  content:""; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(59,236,151,.15);
}
.hud-media{ position:relative; }
.hud-media img{
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.hud-media::before{
  content:""; position:absolute; inset:-16px; border-radius:calc(var(--radius) + 10px);
  background:radial-gradient(circle at 50% 40%, rgba(59,236,151,.28), transparent 70%);
  z-index:-1; filter:blur(8px);
}
.hud-media:hover img{ transform:translateY(-8px) scale(1.02); box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(59,236,151,.2); }

/* -------------------- FAQ -------------------- */
.faq{ background:var(--bg-alt); }
.faq-list{ max-width:980px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.faq-item{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover{ border-color:rgba(59,236,151,.55); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.faq-item.open{ border-color:rgba(59,236,151,.55); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:#fff;
  font-family:inherit; font-size:1.02rem; font-weight:600;
  padding:22px 60px 22px 24px; position:relative; transition:color .3s var(--ease);
}
.faq-q:hover{ color:var(--accent); }
.faq-ico{ position:absolute; right:24px; top:50%; transform:translateY(-50%); width:18px; height:18px; }
.faq-ico::before,.faq-ico::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-ico::before{ top:8px; left:0; width:18px; height:2px; }
.faq-ico::after{ left:8px; top:0; width:2px; height:18px; }
/* el + gira (se vuelve −) al abrir por click O al pasar el puntero */
.faq-item.open .faq-ico::after,
.faq-item:hover .faq-ico::after{ transform:rotate(90deg); opacity:0; }
.faq-q:hover .faq-ico::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
/* con solo pasar el puntero por el item ya se despliega la respuesta */
.faq-item:hover .faq-a{ max-height:320px; }
.faq-a p{ padding:0 24px 22px; color:var(--muted); font-size:.94rem; }

/* -------------------- FOOTER -------------------- */
.footer-cta{ background:linear-gradient(180deg,var(--bg),#1a1a1a); text-align:center; padding:80px 0; border-top:1px solid var(--line); }
.footer-cta h2{ font-size:clamp(1.6rem,3.5vw,2.4rem); margin-bottom:26px; }
.footer-main{ background:#171717; padding:60px 0 40px; }
.footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand img{ height:40px; margin-bottom:16px; }
.footer-brand p{ color:var(--muted); font-size:.9rem; max-width:320px; }
.footer-col h4{ font-size:1rem; margin-bottom:16px; color:#fff; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:var(--muted); font-size:.92rem; transition:color .3s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover{ color:var(--accent); padding-left:6px; }
.footer-bottom{ background:#111; padding:20px 0; text-align:center; }
.footer-bottom small{ color:#777; }

/* -------------------- MI CUENTA / LOGIN -------------------- */
.account{ background:var(--bg); min-height:70vh; }
.account-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:940px; margin:0 auto;
  align-items:start;
}
.account-col{
  background:linear-gradient(180deg,#2a2a2a,#232323);
  border:1px solid var(--line); border-radius:var(--radius); padding:38px 34px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.account-col:hover{ border-color:rgba(59,236,151,.4); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.account-title{
  font-size:1.6rem; font-weight:700; margin-bottom:24px; padding-bottom:14px;
  border-bottom:1px solid var(--line); position:relative;
}
.account-title::after{ content:""; position:absolute; left:0; bottom:-1px; width:56px; height:3px; background:var(--accent); border-radius:2px; }

.account-form{ display:flex; flex-direction:column; }
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:.95rem; font-weight:500; margin-bottom:8px; color:#fff; }
.req{ color:var(--accent); }
.account-form input[type=text],
.account-form input[type=email],
.account-form input[type=password]{
  width:100%; height:56px; padding:16px; font-family:inherit; font-size:1rem;
  background:#eee; color:#333; border:2px solid transparent; border-radius:6px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.account-form input::placeholder{ color:#999; }
.account-form input:focus{
  outline:none; background:#fff; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,236,151,.25);
}
.pw-wrap{ position:relative; }
.pw-toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:#555; font-family:inherit; font-size:.82rem; font-weight:600;
  padding:6px 8px; border-radius:6px; transition:color .25s var(--ease), background .25s var(--ease);
}
.pw-toggle:hover{ color:var(--accent-2); background:rgba(0,0,0,.06); }

.account-submit{ align-self:flex-start; margin:4px 0 18px; }
.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--muted); cursor:pointer; margin-bottom:14px; }
.checkbox-row input{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.account-link{ font-size:.92rem; color:var(--muted); transition:color .25s var(--ease); align-self:flex-start; }
.account-link:hover{ color:var(--accent); }

.account-note{ font-size:.9rem; color:var(--muted); margin-bottom:16px; }
.account-note--small{ font-size:.82rem; }
.account-note a{ color:var(--accent); }
.account-note a:hover{ text-decoration:underline; }
.account-demo-note{ text-align:center; color:#777; font-size:.85rem; margin-top:30px; }
.account-demo-note.show{ color:var(--accent); }

/* -------------------- REVEAL ON SCROLL -------------------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible{ opacity:1; transform:none; }

/* -------------------- RESPONSIVE -------------------- */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .accordion{ height:500px; }
}
@media (max-width:860px){
  .main-nav, .header-cta{ display:none; }
  .main-nav.open{
    display:block; position:absolute; top:74px; left:0; right:0;
    background:rgba(20,20,20,.98); border-bottom:1px solid var(--line); padding:18px 0;
  }
  .main-nav.open .nav-list{ flex-direction:column; gap:4px; padding-inline:24px; }
  .main-nav.open .nav-link{ display:block; padding:12px 0; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .pricing-grid{ grid-template-columns:1fr; max-width:460px; }
  .faq-list{ grid-template-columns:1fr; max-width:560px; }
  .account-grid{ grid-template-columns:1fr; max-width:460px; }
  .hud-wrap{ grid-template-columns:1fr; gap:34px; }
  .hud-media{ order:-1; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }

  /* accordion -> vertical stack en móvil */
  .accordion{ flex-direction:column; height:auto; gap:12px; }
  .accordion-panel{ height:120px; }
  .accordion-panel:hover,
  .accordion-panel:focus-visible,
  .accordion-panel.is-open{ flex:none; height:400px; }
  .accordion-label span{ writing-mode:horizontal-tb; transform:none; }
}
@media (max-width:560px){
  section{ padding:70px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr; }
  .hero{ min-height:88vh; }
}

/* En dispositivos táctiles (sin hover) no hay giro: mostramos frente + texto apilados */
@media (hover:none){
  .service-card{ perspective:none; min-height:auto; }
  .service-inner{ transform:none !important; min-height:auto; }
  .service-front, .service-back{ position:relative; inset:auto; -webkit-backface-visibility:visible; backface-visibility:visible; transform:none !important; }
  .service-back{ background:transparent; border-top:0; border-radius:0 0 var(--radius) var(--radius); box-shadow:none; }
  .service-back h3, .service-back h3::after{ display:none; }
}

/* -------------------- ACCESIBILIDAD -------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}

/* -------------------- ONBOARDING / AUTH pages -------------------- */
.account-form input[type=tel],
.account-form input[type=date],
.account-form input[type=number],
.account-form select,
.account-form textarea{
  width:100%; min-height:52px; padding:14px 16px; font-family:inherit; font-size:1rem;
  background:#eee; color:#333; border:2px solid transparent; border-radius:6px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.account-form textarea{ resize:vertical; min-height:80px; }
.account-form select:focus, .account-form textarea:focus,
.account-form input[type=tel]:focus, .account-form input[type=date]:focus, .account-form input[type=number]:focus{
  outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,236,151,.25);
}
.form-error{ color:#ff6b6b; font-size:.9rem; margin-top:12px; }
.onb-card{ max-width:820px; margin:0 auto; }
.onb-h{ font-size:1rem; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin:6px 0 16px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.onb-h:not(:first-child){ margin-top:26px; }
.onb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.onb-grid .form-row{ margin-bottom:6px; }
.onb-actions{ margin-top:24px; text-align:center; }
@media (max-width:640px){ .onb-grid{ grid-template-columns:1fr; } }