/* ===========================================================
   Guía Blue Solar — design tokens
   =========================================================== */
:root{
  --bg:            #eef4fb;
  --bg-soft:       #e2ecf9;
  --bg-elevated:   #ffffff;
  --bg-elevated-2: #f2f7fd;

  --blue:          #2f6bff;
  --blue-light:    #1d4fd6;
  --blue-dim:      rgba(47,107,255,.10);
  --blue-dim-2:    rgba(47,107,255,.26);

  --cyan:          #0ea5e9;
  --cyan-dim:      rgba(14,165,233,.14);

  --amber:         #ff8a34;
  --amber-hover:   #ff9d52;
  --amber-dim:     rgba(255,138,52,.14);

  --text:          #0f172a;
  --text-dim:      #48566f;
  --text-dimmer:   #7c8aa5;

  --border:        rgba(16,24,40,.09);
  --border-strong: rgba(16,24,40,.16);

  --green:         #0f9d67;
  --yellow:        #b45309;
  --red:           #dc2626;

  --font-head: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-card: 0 20px 50px -28px rgba(16,24,40,.22);
}

/* ===========================================================
   Reset / base
   =========================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; line-height:1.15; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* Background: soft, airy sky blue with a gentle glow so it never reads flat */
body{
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(47,107,255,.12), transparent 60%),
    radial-gradient(900px 550px at 100% 8%, rgba(14,165,233,.10), transparent 55%),
    var(--bg);
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Amber/burnt-orange is reserved EXCLUSIVELY for action buttons */
.btn-cta, .btn-primary{
  background:var(--amber);
  color:#1a0e04;
  box-shadow:0 12px 30px -12px rgba(255,138,52,.55);
}
.btn-cta:hover, .btn-primary:hover{ background:var(--amber-hover); }

.btn-outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn-outline:hover{ border-color:var(--blue-light); color:var(--blue-light); }

.btn-ghost{
  background:var(--blue-dim);
  color:var(--blue-light);
  border-color:var(--blue-dim-2);
}
.btn-ghost:hover{ background:var(--blue-dim-2); }

.btn-sm{ padding:.55rem 1.1rem; font-size:.85rem; }

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(7,11,20,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
  gap:24px;
}
.logo{ display:flex; align-items:center; gap:.65rem; }
.logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg, var(--blue) 0%, #1a3fc4 100%);
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(47,107,255,.65);
}
.logo-text{
  font-family:var(--font-head);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.logo-text strong{
  font-weight:800;
  background:linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.site-header .logo{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:.4rem 1rem .4rem .4rem;
  transition:background .15s ease, border-color .15s ease;
}
.site-header .logo:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.site-header .logo-text{ color:#eef2fb; }

.site-nav{
  display:flex; align-items:center; gap:.55rem;
  flex-wrap:wrap;
}
.site-nav a{
  font-size:.86rem;
  color:rgba(238,242,251,.78);
  font-weight:600;
  padding:.5rem .95rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.site-nav a:hover{
  color:#fff;
  background:rgba(47,107,255,.28);
  border-color:rgba(111,160,255,.5);
}

.header-cta{
  flex-shrink:0;
  background:rgba(255,255,255,.10);
  color:#dce7ff;
  border-color:rgba(255,255,255,.28);
}
.header-cta:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); color:#fff; }

@media (max-width: 860px){
  .site-nav{ display:none; }
  .header-inner{ justify-content:space-between; }
}
@media (max-width: 420px){
  .logo-text{ font-size:1rem; }
  .logo-mark{ width:32px; height:32px; }
  .header-cta{ padding:.65rem 1.1rem; font-size:.82rem; }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;
  padding:84px 0 200px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background-color:var(--bg);
  background-image:url('assets/img/section-bg/hero-v2.png');
  background-position:center 4%;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
}
.hero-glow{ display:none; }
.hero-inner{ position:relative; z-index:1; max-width:820px; }

.hero-brand{
  display:inline-flex; align-items:center; gap:.7rem;
  margin-bottom:1.5rem;
}
.hero-brand .logo-mark{ width:44px; height:44px; border-radius:13px; }
.hero-brand .logo-text{
  font-size:1.35rem;
  filter:drop-shadow(0 1px 6px rgba(255,255,255,.9)) drop-shadow(0 1px 2px rgba(255,255,255,.9));
}

.hero-panel{
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(26px) saturate(1.2);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid rgba(255,255,255,.48);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -28px rgba(16,24,40,.35);
  padding:2.5rem 2.75rem;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-light);
  margin:0 0 1rem;
}
.eyebrow--hero{
  padding:.4rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid var(--blue-dim-2);
}

.hero-title{
  font-size:clamp(2.7rem, 6.2vw, 4.8rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:1.4rem;
  color:#02040a;
  text-shadow:0 1px 1px rgba(255,255,255,.4), 0 4px 28px rgba(255,255,255,.4);
}
.hero-title .accent{
  background:linear-gradient(100deg, var(--blue) 15%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 18px rgba(47,107,255,.25));
}
.hero-sub{
  font-size:1.2rem;
  font-weight:500;
  line-height:1.6;
  color:#0a0e1a;
  max-width:640px;
  margin-bottom:2.2rem;
  text-shadow:0 1px 4px rgba(255,255,255,.7), 0 2px 18px rgba(255,255,255,.5);
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-bottom:2rem;
}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  font-size:.85rem;
  color:var(--text-dimmer);
}
@media (max-width:640px){
  .hero-panel{ padding:1.75rem 1.5rem; }
}
.hero-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot--blue{ background:var(--blue); }
.dot--cyan{ background:var(--cyan); }
.dot--amber{ background:var(--amber); }

/* ===========================================================
   Section skeleton — repeated identically everywhere
   =========================================================== */
.section{ padding:60px 0; border-bottom:1px solid var(--border); }
.section--alt{ background:var(--bg-soft); }

/* Fixed background photo per section — image stays put, content scrolls over it */
.section--photo{
  position:relative;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:var(--bg);
}
.section--photo::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(238,244,251,.85);
  pointer-events:none;
}
.section--photo > .wrap{ position:relative; z-index:1; }

.bg-calc{ background-image:url('assets/img/section-bg/calc.webp?v=20260724'); }
.bg-modelos{ background-image:url('assets/img/section-bg/modelos.webp?v=20260724'); }
.bg-contexto{ background-image:url('assets/img/section-bg/contexto.webp?v=20260724'); }
.bg-metodologia{ background-image:url('assets/img/section-bg/metodologia.webp?v=20260724'); }
.bg-transparencia{ background-image:url('assets/img/section-bg/transparencia.webp?v=20260724'); }
.bg-faq{ background-image:url('assets/img/section-bg/faq.webp?v=20260724'); }

@media (max-width:900px){
  /* iOS/Safari doesn't support fixed backgrounds — degrade to normal scroll, still looks right */
  .section--photo{ background-attachment:scroll; }
}

.section-head{ margin-bottom:1.75rem; }
.section-head__row{
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap;
}
.section-num{
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:700;
  color:var(--blue-light);
  background:var(--blue-dim);
  border:1px solid var(--blue-dim-2);
  border-radius:8px;
  padding:.3rem .6rem;
  line-height:1;
}
.section-icon{ font-size:1.6rem; line-height:1; }
.section-title{
  font-size:clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight:600;
  letter-spacing:-.01em;
}

.section-body{ }
.prose{ color:var(--text-dim); }
.prose p{ margin-bottom:1.1rem; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--text); }
.prose a{ color:var(--blue-light); text-decoration:underline; text-decoration-color:var(--blue-dim-2); }

.prose-lead{
  font-size:1.15rem;
  color:var(--text-dim);
  max-width:760px;
  margin-bottom:1.75rem;
}
.prose-lead strong{ color:var(--text); }

.two-col{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:3rem;
  align-items:start;
}
@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
}

/* ===========================================================
   Callout cards (context / transparency)
   =========================================================== */
.context-callouts, .transparency-callouts{
  display:flex; flex-direction:column; gap:1rem;
}
.callout-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.4rem 1.5rem;
}
.callout-card h3{
  font-size:1.02rem;
  margin-bottom:.4rem;
  font-family:var(--font-body);
  font-weight:600;
}
.callout-card p{ color:var(--text-dim); font-size:.94rem; }
.callout-icon{ font-size:1.3rem; display:block; margin-bottom:.6rem; }

.callout-card--sem p{ color:var(--text-dim); font-size:.95rem; }
.callout-card--sem{ display:flex; align-items:flex-start; }

/* ===========================================================
   Semaphore callouts (methodology / FAQ)
   =========================================================== */
.sem{ display:inline-block; margin-right:.35rem; }
.semaphore-row p{
  font-size:.92rem;
  color:var(--text-dim);
  margin-bottom:.6rem;
}
.semaphore-row p:last-child{ margin-bottom:0; }

.criteria-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
  margin-bottom:1.5rem;
}
@media (max-width:900px){
  .criteria-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .criteria-grid{ grid-template-columns:1fr; }
}
.criteria-card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.5rem;
}
.criteria-card h3{
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:.85rem;
}

.methodology-note{
  font-size:.9rem;
  color:var(--text-dimmer);
  border-top:1px solid var(--border);
  padding-top:1.5rem;
}
.methodology-note a{ color:var(--blue-light); }

/* ===========================================================
   Calculator
   =========================================================== */
.calc-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:900px){
  .calc-grid{ grid-template-columns:1fr; }
}

.calc-panel{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
}
.calc-fieldset{
  border:0; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem .65rem;
}
.calc-group-label{
  grid-column:1 / -1;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dimmer);
  margin:.5rem 0 -.05rem;
}
.calc-group-label:first-child{ margin-top:0; }
@media (max-width:560px){
  .calc-fieldset{ grid-template-columns:1fr; }
}

.calc-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .7rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-soft);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.calc-item:hover{ border-color:var(--blue-dim-2); }
.calc-check{
  width:18px; height:18px;
  accent-color:var(--blue);
  flex-shrink:0;
}
.calc-item__icon{ font-size:1.1rem; flex-shrink:0; }
.calc-item__text{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.calc-item__name{ font-weight:600; font-size:.85rem; }
.calc-item__detail{ font-size:.72rem; color:var(--text-dimmer); }

.calc-item:has(.calc-check:checked){
  border-color:var(--blue);
  background:var(--blue-dim);
}

.calc-disclaimer{
  font-size:.78rem;
  color:var(--text-dimmer);
  margin-top:1.1rem;
}

.calc-result{
  background:var(--bg-elevated);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  position:sticky;
  top:88px;
}
.calc-total{
  display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:1.1rem;
  margin-bottom:1.1rem;
}
.calc-total__label{ font-size:.9rem; color:var(--text-dim); }
.calc-total__value{ font-family:var(--font-head); font-size:1.7rem; font-weight:700; color:var(--cyan); }

.calc-model-list{
  display:flex; flex-direction:column; gap:.65rem; margin-bottom:1rem;
  max-height:420px; overflow-y:auto; padding-right:.25rem;
}
.calc-model-row{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .9rem;
  border-radius:var(--radius-sm);
  background:var(--bg-soft);
  border:1px solid var(--border);
}
.calc-model-row__sem{ font-size:1.1rem; flex-shrink:0; }
.calc-model-row__info{ flex:1; min-width:0; }
.calc-model-row__name{ font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.calc-model-row__note{ font-size:.78rem; color:var(--text-dimmer); }
.calc-model-row__bar{
  height:5px; border-radius:3px; background:var(--bg-elevated-2);
  overflow:hidden; margin-top:.4rem;
}
.calc-model-row__bar-fill{ height:100%; background:var(--cyan); border-radius:3px; }
.calc-model-row__badge{
  font-size:.65rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--amber-dim); color:var(--amber);
  border-radius:999px; padding:.15rem .5rem;
}

.calc-empty-hint{
  font-size:.88rem;
  color:var(--text-dimmer);
  padding:.5rem 0 1rem;
}

.capture-inline{
  border-top:1px solid var(--border);
  padding-top:1.1rem;
  margin-top:.25rem;
}
.capture-inline__label{
  display:block;
  font-size:.82rem;
  color:var(--text-dim);
  margin-bottom:.6rem;
}
.capture-inline__row{ display:flex; gap:.5rem; }
.capture-inline__row input{
  flex:1; min-width:0;
  background:var(--bg-soft);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:.6rem 1rem;
  color:var(--text);
  font-size:.85rem;
}
.capture-inline__row input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.capture-inline__ok{
  margin-top:.6rem;
  font-size:.82rem;
  color:var(--green);
}

/* ===========================================================
   Model cards
   =========================================================== */
.subsection-head{
  display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
  margin:0 0 1rem;
}
.subsection-head:not(:first-child){ margin-top:2rem; }
.subsection-label{
  font-family:var(--font-head);
  font-size:1.05rem; font-weight:700;
  color:var(--text);
}
.subsection-count{
  font-size:.74rem; font-weight:600; color:var(--text-dimmer);
  background:var(--bg-elevated); border:1px solid var(--border);
  padding:.2rem .65rem; border-radius:999px;
}
.subsection-note{
  font-size:.85rem; color:var(--text-dimmer);
  margin:-.4rem 0 .85rem;
  max-width:640px;
}

.model-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem;
}
.model-grid--panels{
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.panel-compat{
  font-size:.82rem;
  color:var(--text-dim);
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.75rem 1rem;
}
.panel-compat strong{ color:var(--text); display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.model-card{
  position:relative;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:border-color .2s ease, transform .2s ease;
}
.model-card:hover{ border-color:var(--blue-dim-2); transform:translateY(-2px); }
.model-card--featured{ border-color:var(--blue-dim-2); box-shadow:0 20px 60px -24px rgba(47,107,255,.35); }

.featured-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  background:var(--blue);
  color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.03em;
  padding:.35rem .7rem;
  border-radius:999px;
}

.model-card__photo{
  position:relative;
  aspect-ratio:16/10;
  background:
    repeating-linear-gradient(45deg, rgba(16,24,40,.03) 0 12px, transparent 12px 24px),
    var(--bg-soft);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.model-card__photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-placeholder{
  font-size:.82rem;
  color:var(--text-dimmer);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-sm);
  padding:.6rem 1rem;
}

.model-card__body{ padding:1.6rem; display:flex; flex-direction:column; gap:1.1rem; flex:1; }
.model-card__eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--blue-light);
}
.model-card__name{ font-size:1.35rem; font-weight:600; }

.spec-row{ display:flex; flex-direction:column; gap:.75rem; }
.spec__label{ display:block; font-size:.76rem; color:var(--text-dimmer); margin-bottom:.2rem; }
.spec__value{ font-weight:600; font-size:.95rem; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.spec__extra{ font-weight:500; font-size:.78rem; color:var(--text-dimmer); }
.spec-bar{
  height:6px; border-radius:3px; background:var(--bg-soft);
  overflow:hidden; margin-top:.45rem;
  border:1px solid var(--border);
}
.spec-bar__fill{ display:block; height:100%; background:var(--cyan); border-radius:3px; }

.model-card__price{
  display:flex; flex-direction:column; gap:.25rem;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
}
.price-value{ font-family:var(--font-head); font-size:1.15rem; font-weight:700; color:var(--text); }
.price-note{ font-size:.72rem; color:var(--text-dimmer); }

.scenario-list{ display:flex; flex-direction:column; gap:.75rem; }
.scenario-list__title{ font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dimmer); }
.scenario{ display:flex; gap:.7rem; align-items:flex-start; }
.scenario__icon{ font-size:1.1rem; margin-top:.1rem; flex-shrink:0; }
.scenario strong{ display:block; font-size:.88rem; margin-bottom:.15rem; }
.scenario p{ font-size:.83rem; color:var(--text-dim); }

.model-card__actions{ margin-top:auto; display:flex; flex-direction:column; gap:.7rem; }
.btn-cta{
  width:100%; justify-content:center; text-align:center;
  white-space:normal; line-height:1.3;
}

.price-alert summary{
  list-style:none;
  cursor:pointer;
  font-size:.8rem;
  color:var(--text-dim);
  display:inline-flex; align-items:center; gap:.3rem;
}
.price-alert summary::-webkit-details-marker{ display:none; }
.price-alert summary:hover{ color:var(--blue-light); }
.price-alert__form{
  display:flex; gap:.5rem; margin-top:.6rem;
  flex-wrap:wrap;
}
.price-alert__form input{
  flex:1; min-width:120px;
  background:var(--bg-soft);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:.5rem .9rem;
  color:var(--text);
  font-size:.82rem;
}
.price-alert__form input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.price-alert__ok{ font-size:.78rem; color:var(--green); width:100%; margin-top:.3rem; }

.stock-note{
  display:flex; gap:.5rem; align-items:flex-start;
  font-size:.78rem; color:var(--text-dimmer);
  line-height:1.5;
}
.stock-note span:first-child{ flex-shrink:0; }

.gallery-link{
  position:absolute; right:.75rem; bottom:.75rem; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(15,23,42,.68);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:.4rem .8rem;
  font-size:.76rem; font-weight:600;
  backdrop-filter:blur(4px);
  transition:background .15s ease;
}
.gallery-link:hover{ background:rgba(15,23,42,.85); }

/* ===========================================================
   Lightbox — galería de fotos por producto
   =========================================================== */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,9,18,.92);
  display:flex; align-items:center; justify-content:center;
}
.lightbox[hidden]{ display:none; }
.lightbox__img{
  max-width:min(90vw, 1100px); max-height:82vh;
  object-fit:contain;
  border-radius:var(--radius-sm);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.lightbox__close{
  position:absolute; top:20px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:1.6rem; display:flex; align-items:center; justify-content:center;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }
.lightbox__counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:.85rem;
  background:rgba(255,255,255,.1); border-radius:999px; padding:.3rem .9rem;
}
@media (max-width:640px){
  .lightbox__nav{ width:42px; height:42px; font-size:1.3rem; }
  .lightbox__nav--prev{ left:8px; }
  .lightbox__nav--next{ right:8px; }
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq-list{ display:flex; flex-direction:column; gap:.75rem; max-width:820px; }
.faq-item{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.2rem 1.5rem;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.02rem;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-family:var(--font-head);
  font-size:1.3rem;
  color:var(--blue-light);
  flex-shrink:0;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ content:'–'; }
.faq-answer{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.6rem; }
.faq-answer p{ font-size:.92rem; color:var(--text-dim); }
.faq-answer a{ color:var(--blue-light); text-decoration:underline; text-decoration-color:var(--blue-dim-2); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ background:var(--bg-soft); padding-top:44px; }
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap;
  padding-bottom:40px;
}
.footer-tagline{ color:var(--text-dimmer); font-size:.88rem; margin-top:.5rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-links a{ font-size:.85rem; color:var(--text-dim); }
.footer-links a:hover{ color:var(--text); }

.footer-legal{
  border-top:1px solid var(--border);
  padding:28px 24px 40px;
}
.footer-legal p{ font-size:.78rem; color:var(--text-dimmer); line-height:1.7; max-width:900px; }
.footer-copy{ margin-top:1rem; }

/* ===========================================================
   Chat widget placeholder
   =========================================================== */
.chat-placeholder{
  position:fixed;
  right:20px; bottom:20px;
  z-index:150;
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.chat-placeholder__button{
  width:58px; height:58px;
  border-radius:50%;
  border:1px solid var(--blue-dim-2);
  background:var(--blue);
  color:#fff;
  font-size:1.5rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 40px -14px rgba(47,107,255,.7);
  transition:transform .15s ease;
}
.chat-placeholder__button:hover{ transform:translateY(-2px) scale(1.03); }
.chat-placeholder__note{
  background:var(--bg-elevated);
  border:1px solid var(--border-strong);
  color:var(--text-dim);
  font-size:.82rem;
  padding:.65rem 1rem;
  border-radius:var(--radius-sm);
  max-width:220px;
  box-shadow:var(--shadow-card);
}

/* ===========================================================
   Scroll-reveal (progressive enhancement only — JS-added classes,
   default state is always fully visible without JS)
   =========================================================== */
.reveal-init{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity:1; transform:none; transition:none; }
}