/* ============================================================
   TECNACELS EL SALVADOR — tema claro, acento dorado con moderación.
   Tipografía: pila del sistema (SF Pro en Apple, Segoe en Windows).
   Craft: titulares en dos tonos, kicker con regla dorada,
   botones sólidos sin glow, ritmo de secciones variado.
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --line: #d9d9de;
  --hairline: #e4e4e8;
  --txt: #1d1d1f;
  --txt-dim: #6e6e73;
  --gold: #e11b22;
  --gold-deep: #bf121a;
  --gold-soft: #fdeaea;
  --ink: #161617;
  --wa: #25d366;
  --wa-ink: #0b3d1e;
  --radius: 18px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0 0 .4em; font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ---------- sistema de titulares ----------
   Kicker: etiqueta pequeña con regla dorada (firma de la casa).
   H2 statement: parte fuerte en tinta + continuación en gris, mismo cuerpo. */
.kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 14px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 1px; }
.kicker.center { justify-content: center; }
.a-head { margin-bottom: 38px; }
.a-head h2 { font-size: clamp(1.75rem, 4.4vw, 2.7rem); letter-spacing: -.03em; }
.a-head h2 .dim, .a-head h2 .hl { color: var(--txt-dim); }
.a-head > p { color: var(--txt-dim); margin: 8px 0 0; font-size: 1.04rem; max-width: 56ch; }
.a-head .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }

/* ---------- botones (sólidos, sin glow: el color trabaja solo) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .74em 1.45em; border-radius: 980px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-size: .95rem;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: scale(.985); }
.btn-gold { background: var(--gold-deep); color: #fff; }
.btn-gold:hover { background: #9c0e15; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--txt); }
.btn-ghost:hover { border-color: var(--txt); }
.btn-link { color: var(--gold-deep); font-weight: 600; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-wa {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--wa); color: var(--wa-ink); font-weight: 700;
  padding: .7em 1.2em; border-radius: 980px; font-size: .9rem;
  transition: filter .18s ease;
}
.btn-wa:hover { filter: brightness(1.06); }

/* ---------- barra de obsequios (oscura y en voz baja) ---------- */
.promo-strip {
  background: var(--ink); color: #f5f5f7; text-align: center;
  font-size: .8rem; font-weight: 500; letter-spacing: .01em;
  padding: 8px 16px; line-height: 1.4;
}
.promo-strip b { font-weight: 600; color: #ff6b6b; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 9px; position: relative; }
/* Cada 10s aparece un fondo oscuro detrás del logo para que resalte sobre el blanco */
.brand::before {
  content: ""; position: absolute; inset: -5px -10px; border-radius: 10px;
  background: #17110a; opacity: 0; z-index: -1; pointer-events: none;
  animation: brandReveal 10s ease-in-out infinite;
}
@keyframes brandReveal { 0%, 42% { opacity: 0; } 50%, 92% { opacity: .9; } 100% { opacity: 0; } }
.brand-logo { height: 44px; width: auto; display: block; position: relative; }
.brand-word { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--txt); line-height: 1; position: relative; }
.brand-word em { font-style: normal; color: var(--gold-deep); }
.brand::before { display: none; }
.footer-brand .brand-word { font-size: 1.35rem; }
.header-wa { padding: .5em .95em; font-size: .85rem; }
.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  padding: .5em .8em; border-radius: 8px; color: var(--txt); opacity: .85;
  font-size: .9rem; font-weight: 500; transition: color .15s, background .15s, opacity .15s;
}
.main-nav a:hover { opacity: 1; background: var(--bg-2); }
.main-nav a[aria-current="page"] { color: var(--gold-deep); opacity: 1; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--txt); border-radius: 2px; }

/* ---------- hero: tipografía primero, video después ---------- */
/* video a pantalla completa (edge to edge, arriba de todo) */
.hero-media { width: 100%; background: #000; display: block; line-height: 0; }
.hero-video { width: 100%; height: auto; max-height: 88vh; object-fit: cover; display: block; }
.hero { text-align: center; padding: 50px 0 60px; overflow: hidden; background: var(--bg); }
.hero .kicker { justify-content: center; }
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4rem);
  letter-spacing: -.035em; margin-bottom: .3em;
  max-width: 18ch; margin-left: auto; margin-right: auto;
}
.hero p.lead { color: var(--txt-dim); font-size: 1.16rem; max-width: 46ch; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero-quick { margin-top: 22px; font-size: .9rem; color: var(--txt-dim); }
.hero-quick a { color: var(--gold-deep); font-weight: 600; padding: 2px 1px; }
.hero-quick a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-quick .sep { margin: 0 7px; color: var(--line); }
.hero-cover {
  width: 100%; max-width: 960px; border-radius: 22px;
  margin: 42px auto 0; display: block;
  box-shadow: 0 24px 60px -28px rgba(29, 29, 31, .35);
}

/* entrada orquestada del hero (una sola vez, al cargar) */
.rise { animation: rise .7s cubic-bezier(.22, .8, .3, 1) both; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- secciones ---------- */
.section { padding: 74px 0; }
.section.alt { background: var(--bg-2); }
.section.tight { padding: 56px 0; }

/* ---------- cómo comprar (3 pasos) ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step3 { border-top: 2px solid var(--txt); padding-top: 15px; }
.step3-n { display: block; font-size: 1.45rem; font-weight: 800; color: var(--gold-deep); letter-spacing: -.02em; }
.step3 h3 { font-size: 1.1rem; margin: 8px 0 4px; }
.step3 p { color: var(--txt-dim); margin: 0; font-size: .95rem; }
@media (max-width: 720px) { .steps3 { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- asesora + encuéntranos ---------- */
.asesora-banner { width: 100%; max-width: 820px; border-radius: var(--radius); display: block; margin: 0 auto 30px; box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .4); }
.encuentranos { display: grid; grid-template-columns: 320px 1fr; gap: 34px; align-items: center; }
.encuentranos-img { width: 100%; border-radius: var(--radius); display: block; box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .45); }
.encuentranos-text h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; }
.encuentranos-text p { color: var(--txt-dim); margin: 0 0 20px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .encuentranos { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .encuentranos-img { max-width: 300px; margin: 0 auto; }
  .btn-row { justify-content: center; }
}

/* ---------- tarjetas de producto (el iPhone flota, sin caja) ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 20px; }
.prod-card { background: transparent; border: 0; display: flex; flex-direction: column; text-align: center; }
.prod-tap { display: block; color: inherit; }
.prod-tap-foot { margin-top: auto; }
.prod-media {
  aspect-ratio: 1/1; padding: 6px; background: transparent;
  display: grid; place-items: center; position: relative; overflow: visible;
}
.prod-media img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .14));
  transition: transform .28s cubic-bezier(.22, .8, .3, 1), filter .28s ease;
}
.prod-card:hover .prod-media img,
.prod-tap:focus-visible .prod-media img {
  transform: translateY(-6px);
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .18));
}
.prod-media .ph { display: none; width: 100%; height: 100%; place-items: center; }
.prod-media .ph-svg { width: 74%; height: 88%; }
.prod-media.noimg img { display: none; }
.prod-media.noimg .ph { display: grid; }
.prod-body { padding: 16px 6px 0; text-align: center; display: flex; flex-direction: column; flex: 1; }
.prod-name { font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; margin: 12px 0 3px; }
.prod-sub { font-size: .82rem; color: var(--txt-dim); margin: 0 0 9px; }
.prod-swatches { display: flex; justify-content: center; gap: 7px; margin: 0 0 11px; flex-wrap: wrap; }
.swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
  cursor: pointer; padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover { transform: scale(1.2); }
.swatch.active {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-deep), inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-deep); }
.prod-gift { color: var(--gold-deep); font-size: .78rem; font-weight: 600; margin: 0 0 10px; }
.prod-price {
  font-size: 1.28rem; font-weight: 700; color: var(--txt); margin: 0 0 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.prod-price small { font-size: .7rem; color: var(--txt-dim); font-weight: 500; margin-left: 4px; letter-spacing: .04em; }

/* ---------- filtros (catálogo) ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.chip {
  padding: .5em 1.1em; border-radius: 980px; border: 1px solid var(--line);
  background: #fff; color: var(--txt); cursor: pointer; font-size: .9rem; font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--txt); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.empty { text-align: center; color: var(--txt-dim); padding: 60px 0; }

/* ---------- "sin letra pequeña": ledger editorial, sin iconos ---------- */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.ledger-item { border-top: 1px solid var(--line); padding: 24px 0 30px; }
.ledger-item h3 { font-size: 1.12rem; letter-spacing: -.015em; margin: 0 0 8px; }
.ledger-item h3::before { content: "— "; color: var(--gold); font-weight: 600; }
.ledger-item p { color: var(--txt-dim); margin: 0; font-size: .95rem; max-width: 44ch; }

/* ---------- pasos numerados (guías: aquí el orden sí informa) ---------- */
.steps { display: grid; gap: 0; max-width: 720px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; border-top: 1px solid var(--line); padding: 26px 0; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-size: 2rem; font-weight: 700; line-height: 1; color: var(--gold);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 1.08rem; margin: .1em 0 6px; }
.step p { color: var(--txt-dim); margin: 0; font-size: .95rem; max-width: 52ch; }

/* ---------- preguntas frecuentes ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq .a-head { text-align: center; }
.faq .kicker { justify-content: center; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 19px 2px; font-weight: 600; font-size: 1.02rem;
  transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto; color: var(--gold-deep); font-size: 1.35rem;
  line-height: 1; font-weight: 400; transition: transform .22s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item p { color: var(--txt-dim); margin: 0; padding: 0 26px 20px 2px; max-width: 65ch; }
.faq-item[open] p { animation: faqIn .28s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-item a { color: var(--gold-deep); font-weight: 600; }
.faq-item a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- páginas legales / listas / guías ---------- */
.legal h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal p { color: var(--txt-dim); max-width: 720px; margin: 0; }
.block { margin-top: 52px; }
.block > h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.block > .note { color: var(--txt-dim); max-width: 640px; margin: 0; }
.about-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.about-list li { position: relative; padding-left: 26px; color: var(--txt-dim); }
.about-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.guide-ol { list-style: none; counter-reset: paso; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; max-width: 640px; }
.guide-ol li { position: relative; padding-left: 38px; color: var(--txt-dim); counter-increment: paso; }
.guide-ol li b { color: var(--txt); }
.guide-ol li::before {
  content: counter(paso); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold-deep);
  font-size: .8rem; font-weight: 700; display: grid; place-items: center;
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); background: var(--bg-2); margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 30px; padding: 50px 22px 34px; }
.footer-brand { display: block; margin-bottom: 14px; }
.footer-brand .brand-logo { height: 54px; }
.footer-desc { color: var(--txt-dim); font-size: .88rem; max-width: 42ch; }
.site-footer h4 { font-size: .95rem; margin-bottom: 14px; }
.site-footer a { display: block; color: var(--txt-dim); font-size: .9rem; padding: 4px 0; transition: color .15s; }
.site-footer a:hover { color: var(--gold-deep); }

.clientes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 44px; }
.clientes-grid img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; display: block; }
@media (max-width: 640px) { .clientes-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }
.footer-bottom { border-top: 1px solid var(--hairline); padding: 18px 0; font-size: .82rem; color: var(--txt-dim); }
.footer-bottom .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .4);
  transition: transform .15s;
}
.wa-float:hover { transform: scale(1.06); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ledger { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .header-wa { margin-left: auto; }
  .nav-toggle { display: flex; }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0;
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--hairline); padding: 12px 22px; gap: 2px;
  }
}
@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .a-head { margin-bottom: 26px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .prod-body { padding: 12px 2px 0; }
  .prod-name { font-size: .95rem; }
  .prod-price { font-size: 1.1rem; }
  .prod-gift { font-size: .7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 46px; }
  .hero-cover { margin-top: 32px; border-radius: 16px; }
  .promo-strip { font-size: .7rem; }
  .step { grid-template-columns: 46px 1fr; gap: 12px; }
  .step-num { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  .prod-grid { gap: 16px 10px; }
}
@media (min-width: 1000px) {
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
}

/* piso de calidad: respetar reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise-2, .rise-3, .rise-4 { animation: none; }
  .faq-item[open] p { animation: none; }
  .prod-media img, .swatch, .btn, .wa-float { transition: none; }
}