/* ==========================================================================
   Dinamicolor — hoja de estilos principal
   Paleta: negro, gris, blanco. Acento magenta solo en detalles lineales.
   ========================================================================== */

:root{
  --ink:#0d0d0d;
  --ink-2:#3f3f3d;
  --ink-3:#6f6f6a;
  --line:#e5e5e1;
  --line-2:#d3d3cd;
  --bg:#ffffff;
  --bg-2:#f7f7f5;
  --dark:#0d0d0d;
  --accent:#e0007a;

  --radius:12px;
  --radius-lg:16px;
  --max:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:600}

::selection{background:var(--ink);color:#fff}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:24px;
}
.container--narrow{max-width:820px}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
h1{
  font-size:clamp(2.35rem,5.6vw,4rem);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:650;
  max-width:16ch;
}

h2{
  font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.028em;
  font-weight:640;
  max-width:22ch;
}

h3{
  font-size:1.06rem;
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:620;
}

.lead{
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:var(--ink-2);
  max-width:58ch;
  margin-top:18px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:20px;
  height:1px;
  background:var(--accent);
}

.section{
  padding-block:clamp(56px,7.5vw,104px);
  border-top:1px solid var(--line);
}
.section-head{margin-bottom:clamp(32px,4vw,52px)}
.section-head h2{margin-top:0}

/* --------------------------------------------------------------------------
   Iconos
   -------------------------------------------------------------------------- */
.ico{
  width:20px;height:20px;flex:none;
  stroke:currentColor;
}
.ico--check{width:16px;height:16px;color:var(--accent);stroke-width:2.4}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 26px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:.96rem;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1;
  transition:transform .2s var(--ease), background-color .2s var(--ease),
             border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .ico{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:var(--ink);
  color:#fff;
}
.btn--primary:hover{background:#000;box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-2);
}
.btn--ghost:hover{border-color:var(--ink)}

.btn--light{
  background:#fff;
  color:var(--ink);
}
.btn--light:hover{background:#f1f1ee}

.btn--sm{padding:11px 18px;font-size:.88rem}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  text-align:center;
  font-size:.79rem;
  letter-spacing:.01em;
  color:var(--ink-2);
  padding:9px 16px;
}
.topbar strong{color:var(--ink);font-weight:650}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line)}

.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:72px;
}

.logo{
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.2em;
  white-space:nowrap;
}
.logo span{color:var(--accent)}

.site-nav{
  display:flex;
  align-items:center;
  gap:30px;
}
.site-nav a{
  font-size:.92rem;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.site-nav a:hover{color:var(--ink)}
.site-nav .btn{color:#fff}
.site-nav .btn:hover{color:#fff}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;height:42px;
  border:1px solid var(--line-2);
  border-radius:8px;
  padding:0 11px;
}
.nav-toggle__bar{
  display:block;
  height:1.5px;
  background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{padding-block:clamp(44px,6vw,92px)}

.hero-grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(36px,5vw,72px);
  align-items:center;
}

.hero-copy .lead{max-width:46ch}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:30px;
  font-size:.82rem;
  color:var(--ink-3);
}
.hero-meta li{display:flex;align-items:center;gap:20px}
.hero-meta li + li::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:var(--line-2);
}

/* Mockup de navegador */
.hero-visual{position:relative}

.browser{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  overflow:hidden;
  box-shadow:0 40px 70px -46px rgba(13,13,13,.45);
}
.browser__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fafaf8;
}
.browser__dot{width:7px;height:7px;border-radius:50%;background:#dcdcd7}
.browser__url{
  margin-left:12px;
  font-size:.68rem;
  color:var(--ink-3);
  letter-spacing:.04em;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 12px;
}
.browser__body{padding:26px 24px 30px}

.mock-line--accent{display:block;width:34px;height:2px;background:var(--accent);margin-bottom:18px}
.mock-title{
  display:block;
  height:15px;
  width:78%;
  background:#111;
  border-radius:2px;
  margin-bottom:9px;
}
.mock-title--short{width:52%}
.mock-text{
  display:block;
  height:6px;
  width:100%;
  background:#e8e8e4;
  border-radius:2px;
  margin-top:14px;
}
.mock-text--short{width:68%;margin-top:8px}
.mock-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:24px;
}
.mock-box{
  display:block;
  aspect-ratio:1/1;
  background:#f1f1ee;
  border-radius:6px;
}
.mock-btn{
  display:block;
  width:104px;height:26px;
  background:#111;
  border-radius:4px;
  margin-top:26px;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.hero-tag__dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* --------------------------------------------------------------------------
   Chips de nichos
   -------------------------------------------------------------------------- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:9px 18px;
  font-size:.86rem;
  color:var(--ink-2);
  transition:border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover{border-color:var(--ink);color:var(--ink);background:#fbfbf9}

/* --------------------------------------------------------------------------
   Bloque de puntos (problema)
   -------------------------------------------------------------------------- */
.points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px);
}
.point{
  border-top:1px solid var(--ink);
  padding-top:20px;
}
.point__num{
  display:block;
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.point h3{margin-bottom:10px}
.point p{font-size:.94rem;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   Banda de precio (oscura)
   -------------------------------------------------------------------------- */
.price-band{
  background:var(--dark);
  color:#fff;
  border-top:0;
}
.price-band .eyebrow{color:#8f8f8a}
.price-band h2{color:#fff}
.price-band .lead{color:#b4b4af}

.price-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

.amount{
  font-size:clamp(4rem,9vw,6.2rem);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:640;
  font-variant-numeric:tabular-nums;
}
.amount small{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#8f8f8a;
  margin-top:20px;
}
.price-desc{
  color:#b4b4af;
  max-width:40ch;
  margin-top:20px;
  font-size:1rem;
}
.price-main .btn{margin-top:32px}
.price-note{
  font-size:.84rem;
  color:#8f8f8a;
  margin-top:18px;
}
.price-note strong{color:#e6e6e2}
.price-note--soft{margin-top:10px;max-width:44ch}

.panel{
  border:1px solid #262624;
  background:#131312;
  border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);
}
.panel__title{
  font-size:.74rem;
  font-weight:650;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#8f8f8a;
  margin-bottom:10px;
}
.panel__list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid #212120;
  font-size:.94rem;
  color:#dededb;
  line-height:1.5;
}
.panel__list li:last-child{border-bottom:0;padding-bottom:0}
.panel__list .ico--check{margin-top:5px}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px 30px;
  background:#fff;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--line-2);
  border-radius:10px;
  color:var(--accent);
  margin-bottom:20px;
}
.card h3{margin-bottom:8px}
.card p{font-size:.93rem;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   Proceso
   -------------------------------------------------------------------------- */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;
  grid-template-columns:92px 1fr;
  gap:clamp(16px,3vw,32px);
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.step__num{
  font-size:.76rem;
  font-weight:650;
  letter-spacing:.18em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  padding-top:5px;
}
.step h3{margin-bottom:6px}
.step p{font-size:.95rem;color:var(--ink-2);max-width:64ch}

/* --------------------------------------------------------------------------
   Portafolio
   -------------------------------------------------------------------------- */
.works{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;
}

.work{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.work:hover{border-color:var(--line-2);transform:translateY(-3px)}

.work__media{
  display:block;
  width:100%;
  padding:0;
  border:0;
  aspect-ratio:4/3;
  background:var(--bg-2);
  overflow:hidden;
  position:relative;
}
.work__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .7s var(--ease), filter .4s var(--ease);
}
.work:hover .work__media img{transform:scale(1.035)}

.work__ph{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  gap:14px;
  text-align:center;
  padding:24px;
  background:#f2f2ef;
}
.work__ph-mark{display:block;width:26px;height:2px;background:var(--accent);margin:0 auto}
.work__ph-name{
  display:block;
  font-size:.78rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a8a84;
  line-height:1.6;
}
.work__ph-cat{
  display:block;
  font-size:.72rem;
  color:#a5a59f;
  letter-spacing:.04em;
}

.work__body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px 18px;
  border-top:1px solid var(--line);
}
.work__title{font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.work__cat{font-size:.79rem;color:var(--ink-3);margin-top:3px}
.work__year{
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,10,10,.95);
  padding:clamp(16px,4vw,48px);
}
.lightbox.is-open{display:flex}

.lb-figure{max-width:min(1100px,92vw);margin:0;text-align:center}
.lb-figure img{
  max-height:78vh;
  width:auto;
  margin-inline:auto;
  border-radius:8px;
  border:1px solid #2a2a28;
}
.lb-figure figcaption{
  color:#c9c9c4;
  font-size:.84rem;
  margin-top:16px;
  letter-spacing:.03em;
}

.lb-close{
  position:absolute;
  top:18px;right:18px;
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid #3a3a37;
  border-radius:50%;
  color:#fff;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.lb-close:hover{background:#1c1c1a;border-color:#5a5a55}

.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;
  border:1px solid #3a3a37;
  border-radius:50%;
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  display:grid;place-items:center;
  transition:background-color .2s var(--ease);
}
.lb-nav:hover{background:#1c1c1a}
.lb-nav--prev{left:16px}
.lb-nav--next{right:16px}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  position:relative;
  padding:22px 44px 22px 0;
  cursor:pointer;
  font-size:1rem;
  font-weight:560;
  letter-spacing:-.008em;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.2rem;
  font-weight:300;
  color:var(--accent);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{content:"–"}
.faq details p{
  padding:0 40px 24px 0;
  font-size:.95rem;
  color:var(--ink-2);
  max-width:70ch;
  margin-top:-4px;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.contact-list{
  margin-top:28px;
  display:grid;
  gap:12px;
  font-size:.92rem;
  color:var(--ink-2);
}
.contact-list li{display:flex;align-items:center;gap:12px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.contact-copy .btn{margin-top:30px}

.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);
  background:#fff;
}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
.field label{
  font-size:.79rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink-2);
  margin-bottom:8px;
}
.field__hint{font-weight:400;color:var(--ink-3)}

.field input,
.field select,
.field textarea{
  font:inherit;
  font-size:.94rem;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:8px;
  padding:12px 14px;
  width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
}
.field textarea{resize:vertical;min-height:110px}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(224,0,122,.12);
}
.field input:invalid:not(:placeholder-shown){border-color:#c05656}

.form__status{
  font-size:.85rem;
  color:var(--ink-2);
  margin-top:12px;
  min-height:1.2em;
}
.form__status.is-error{color:#b3261e}
.form__legal{
  font-size:.76rem;
  color:var(--ink-3);
  margin-top:8px;
}
.form__legal a{text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg-2);
  padding-top:clamp(40px,5vw,64px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  padding-bottom:44px;
}
.footer-brand p{
  font-size:.9rem;
  color:var(--ink-3);
  margin-top:14px;
  max-width:32ch;
}
.footer-nav,
.footer-legal{display:flex;flex-direction:column;gap:10px}
.footer-nav a,
.footer-legal a{
  font-size:.9rem;
  color:var(--ink-2);
  transition:color .2s var(--ease);
}
.footer-nav a:hover,
.footer-legal a:hover{color:var(--ink)}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-block:22px 28px;
}
.footer-bottom p{font-size:.79rem;color:var(--ink-3)}

.install-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.79rem;
  color:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:999px;
  padding:7px 14px;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.install-btn:hover{border-color:var(--ink);color:var(--ink)}
.install-btn .ico{width:14px;height:14px}

/* --------------------------------------------------------------------------
   Páginas legales
   -------------------------------------------------------------------------- */
.prose{max-width:70ch;padding-block:clamp(48px,6vw,88px)}
.prose h1{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  max-width:26ch;
  margin-bottom:8px;
}
.prose .updated{
  font-size:.79rem;
  color:var(--ink-3);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:36px;
}
.prose h2{
  font-size:1.14rem;
  letter-spacing:-.01em;
  margin-top:36px;
  margin-bottom:10px;
}
.prose p,
.prose li{font-size:.95rem;color:var(--ink-2);margin-bottom:12px}
.prose ul{list-style:disc;padding-left:20px;margin-bottom:16px}
.prose a{text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   Animación de entrada
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{order:2}
  h1{max-width:20ch}
  .price-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .points{grid-template-columns:1fr;gap:28px}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:6px 24px 22px;
    box-shadow:0 24px 40px -32px rgba(0,0,0,.4);
  }
  .site-nav.is-open{display:flex}
  .site-nav a{
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
    color:var(--ink);
  }
  .site-nav .btn{
    margin-top:18px;
    border-bottom:0;
    color:#fff;
  }
}

@media (max-width:720px){
  .container{padding-inline:20px}
  .hero-meta{gap:14px;font-size:.79rem}
  .hero-meta li + li::before{display:none}
  .cards{grid-template-columns:1fr}
  .step{grid-template-columns:56px 1fr;gap:16px}
  .form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .lb-nav{width:40px;height:40px;font-size:1.3rem}
  .lb-nav--prev{left:6px}
  .lb-nav--next{right:6px}
  .topbar{font-size:.74rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   CAPA DE COLOR SUTIL
   --------------------------------------------------------------------------
   La estructura y la tipografía no cambian: solo se añade color de fondo,
   muy diluido, sección por sección. La idea es que al recorrer la página
   el blanco no sea siempre el mismo blanco, sin perder la sobriedad.

   Cada sección tiene su propio matiz. Todo está en alfa baja (4–8%) para
   que el texto negro siga teniendo el mismo contraste de antes.
   ========================================================================== */

:root{
  /* Matices como triplete RGB para poder jugar con la opacidad */
  --tint-rose:224,0,122;
  --tint-sand:190,142,84;
  --tint-sage:52,128,99;
  --tint-lilac:104,92,190;
  --tint-sky:48,120,176;

  --wash-warm:#fbfaf7;
  --wash-cool:#fafafb;
}

/* Fondo general: un blanco ligeramente cálido, no clínico */
body{
  background-color:#fff;
  background-image:linear-gradient(180deg,#ffffff 0%,var(--wash-warm) 55%,#ffffff 100%);
  background-attachment:fixed;
}

/* El filete entre secciones se vuelve casi invisible donde hay color */
.section{border-top-color:rgba(0,0,0,.055)}

/* --------------------------------------------------------------- portada */

#inicio{
  background-image:
    radial-gradient(58% 60% at 8% -5%, rgba(var(--tint-rose),.085), transparent 68%),
    radial-gradient(48% 55% at 100% 8%, rgba(var(--tint-lilac),.07), transparent 66%),
    radial-gradient(60% 45% at 60% 105%, rgba(var(--tint-sand),.06), transparent 70%);
}

/* Halo suave detrás de la maqueta del navegador */
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-8% -10% -12% -10%;
  z-index:0;
  border-radius:32px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(var(--tint-rose),.16), transparent 70%),
    radial-gradient(55% 55% at 75% 70%, rgba(var(--tint-sky),.13), transparent 72%);
  filter:blur(26px);
  pointer-events:none;
}
.hero-visual .browser{position:relative;z-index:1}
.hero-visual .hero-tag{z-index:2}

/* El navegador simulado gana un borde con un hilo de color */
.browser{
  border-color:rgba(var(--tint-lilac),.22);
  box-shadow:
    0 2px 4px rgba(13,13,13,.04),
    0 18px 48px -28px rgba(var(--tint-lilac),.55);
}

/* La etiqueta flotante del hero */
.hero-tag{
  background:rgba(255,255,255,.92);
  border-color:rgba(var(--tint-rose),.22);
  box-shadow:0 10px 30px -18px rgba(var(--tint-rose),.55);
}

/* ------------------------------------------------------------------ precio */

#precio{
  background-image:
    radial-gradient(70% 80% at 50% -20%, rgba(var(--tint-rose),.22), transparent 62%),
    radial-gradient(50% 60% at 90% 110%, rgba(var(--tint-lilac),.18), transparent 68%);
}

/* --------------------------------------------------------------- qué incluye */

#para-ti{
  background-image:
    radial-gradient(50% 60% at 50% -10%, rgba(var(--tint-sand),.06), transparent 68%);
}

#problema{
  background-image:
    radial-gradient(55% 65% at 100% 0%, rgba(var(--tint-rose),.05), transparent 68%),
    radial-gradient(45% 55% at 0% 100%, rgba(var(--tint-sky),.05), transparent 70%);
}

#incluye{
  background-image:
    radial-gradient(55% 70% at 0% 10%, rgba(var(--tint-sand),.09), transparent 66%),
    radial-gradient(45% 60% at 100% 90%, rgba(var(--tint-sand),.05), transparent 70%);
}

/* ------------------------------------------------------------------ proceso */

#proceso{
  background-image:
    radial-gradient(55% 65% at 100% 0%, rgba(var(--tint-sage),.09), transparent 66%),
    radial-gradient(50% 60% at 0% 100%, rgba(var(--tint-sage),.05), transparent 70%);
}

/* --------------------------------------------------------------- portafolio */

#portafolio{
  background-image:
    radial-gradient(60% 60% at 50% -10%, rgba(var(--tint-lilac),.08), transparent 68%),
    radial-gradient(45% 50% at 100% 100%, rgba(var(--tint-sky),.06), transparent 70%);
}

/* ---------------------------------------------------------------- preguntas */

#preguntas{
  background-image:
    radial-gradient(55% 60% at 0% 0%, rgba(var(--tint-sky),.08), transparent 66%),
    radial-gradient(50% 60% at 100% 100%, rgba(var(--tint-lilac),.05), transparent 70%);
}

/* ----------------------------------------------------------------- contacto */

#contacto{
  background-image:
    radial-gradient(55% 65% at 100% 0%, rgba(var(--tint-rose),.08), transparent 66%),
    radial-gradient(50% 60% at 0% 100%, rgba(var(--tint-sand),.06), transparent 70%);
}

/* ------------------------------------------------------- piezas con color */

/* Iconos de las tarjetas: cada uno con su matiz, todos al mismo tono */
.card__icon{
  background:rgba(var(--tint-lilac),.08);
  color:#5f55b4;
  border:1px solid rgba(var(--tint-lilac),.16);
}
.card:nth-child(2) .card__icon{
  background:rgba(var(--tint-sage),.09);
  color:#2f7a5e;
  border-color:rgba(var(--tint-sage),.18);
}
.card:nth-child(3) .card__icon{
  background:rgba(var(--tint-sand),.10);
  color:#9a6c2f;
  border-color:rgba(var(--tint-sand),.20);
}
.card:nth-child(4) .card__icon{
  background:rgba(var(--tint-rose),.07);
  color:#b80066;
  border-color:rgba(var(--tint-rose),.16);
}
.card:nth-child(5) .card__icon{
  background:rgba(var(--tint-sky),.08);
  color:#2f6f9e;
  border-color:rgba(var(--tint-sky),.18);
}
.card:nth-child(6) .card__icon{
  background:rgba(var(--tint-sage),.08);
  color:#2f7a5e;
  border-color:rgba(var(--tint-sage),.16);
}

/* Números de los pasos del proceso */
.step__num{
  background:rgba(var(--tint-sage),.09);
  color:#2f7a5e;
  border:1px solid rgba(var(--tint-sage),.18);
}

/* Chips de categorías */
.chip{
  background:rgba(var(--tint-lilac),.06);
  border-color:rgba(var(--tint-lilac),.16);
  color:#4a4470;
}

/* Portafolio: los marcadores vacíos dejan de ser grises */
.work__ph{
  background-image:linear-gradient(135deg,rgba(var(--tint-rose),.10),rgba(var(--tint-lilac),.12));
}
.work:nth-child(2) .work__ph{
  background-image:linear-gradient(135deg,rgba(var(--tint-sage),.10),rgba(var(--tint-sky),.12));
}
.work:nth-child(3) .work__ph{
  background-image:linear-gradient(135deg,rgba(var(--tint-sand),.12),rgba(var(--tint-rose),.10));
}
.work:nth-child(4) .work__ph{
  background-image:linear-gradient(135deg,rgba(var(--tint-lilac),.10),rgba(var(--tint-sage),.12));
}

/* Las tarjetas del portafolio respiran al pasar el ratón */
.work{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.work:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px -30px rgba(var(--tint-lilac),.65);
}

/* Preguntas abiertas: un fondo apenas perceptible */
.faq details[open]{
  background-image:linear-gradient(180deg,rgba(var(--tint-sky),.05),transparent 70%);
}

/* Formulario: el foco usa el rosa de marca con un halo suave */
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(var(--tint-rose),.55);
  box-shadow:0 0 0 3px rgba(var(--tint-rose),.10);
}

/* Botón principal: sombra de color, no negra */
.btn--primary:hover{
  box-shadow:0 14px 30px -16px rgba(var(--tint-rose),.65);
}

/* Pie: cierra la página con un hilo de color en lugar de una línea gris */
.site-footer{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(var(--tint-rose),.35),rgba(var(--tint-lilac),.30),rgba(var(--tint-sky),.28)) 1;
  background-image:linear-gradient(180deg,var(--wash-cool),#ffffff 70%);
}

/* En pantallas pequeñas el degradado fijo se desactiva: pesa más que aporta */
@media (max-width:720px){
  body{background-attachment:scroll}
  .hero-visual::before{filter:blur(18px)}
}

/* ==========================================================================
   SELECTOR DE PRODUCTOS (portada)
   ========================================================================== */

.card--link{
  display:flex;
  flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card--link:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--tint-lilac),.35);
  box-shadow:0 22px 44px -34px rgba(13,13,13,.5);
}
.card--link h3{margin-top:14px;margin-bottom:8px}
.card--link p{flex:1}

.card__meta{
  display:inline-block;margin-top:14px;
  font-size:.78rem;font-weight:650;letter-spacing:.02em;color:var(--ink-3);
}

.card__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.86rem;font-weight:640;color:var(--ink);
}
.card__cta .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.card--link:hover .card__cta .ico{transform:translateX(3px)}

/* ==========================================================================
   LOGO Y CAPTURA REAL EN LA PORTADA
   ========================================================================== */

.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo__img{
  height:32px;
  width:auto;
  max-width:none;
  display:block;
  flex:0 0 auto;
}
.site-footer .logo__img{height:28px}

@media (max-width:960px){
  .logo__img{height:28px}
}

@media (max-width:720px){
  .logo__img{height:26px}
  .site-footer .logo__img{height:22px}
}

/* La maqueta del navegador muestra un sitio real, sin recortarlo */
.browser__shot-wrap{background:#0d0d0d;line-height:0}
.browser__shot{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.hero-visual .browser{max-width:560px;margin-inline:auto}

/* ==========================================================================
   BUSCADOR POR RUBRO
   ========================================================================== */

.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;
}

.finder{
  background-image:
    radial-gradient(60% 70% at 50% -20%, rgba(var(--tint-rose),.10), transparent 70%),
    radial-gradient(50% 60% at 90% 100%, rgba(var(--tint-lilac),.08), transparent 72%);
}

.finder__inner{max-width:840px;margin:0 auto;text-align:center}
.finder__head h2{margin-inline:auto}
.finder__head .lead{margin-inline:auto}
.finder__head em{font-style:normal;font-weight:650;color:var(--ink)}

.finder__box{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  padding:8px 8px 8px 46px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:16px;
  box-shadow:0 20px 44px -34px rgba(13,13,13,.45);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.finder__box:focus-within{
  border-color:rgba(var(--tint-rose),.55);
  box-shadow:0 0 0 4px rgba(var(--tint-rose),.10),0 20px 44px -34px rgba(13,13,13,.45);
}
.finder__icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;
}
.finder__icon .ico{width:19px;height:19px}
.finder__input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;font-size:1rem;padding:12px 0;color:var(--ink);
}
.finder__input::placeholder{color:var(--ink-3)}
.finder__go{flex:none;padding:12px 20px}

.finder__chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  align-items:center;margin-top:18px;
}
.finder__chips-label{font-size:.8rem;color:var(--ink-3);margin-right:2px}
.chip--button{
  cursor:pointer;font:inherit;font-size:.8rem;font-weight:560;
  padding:5px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.chip--button:hover{border-color:var(--ink);color:var(--ink)}

.finder__results{margin-top:28px;display:grid;gap:14px;text-align:left}

.fresult{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 18px 40px -38px rgba(13,13,13,.5);
}
.fresult__head{display:flex;align-items:baseline;gap:12px;justify-content:space-between}
.fresult__name{font-size:1.06rem;font-weight:650;letter-spacing:-.01em}
.fresult__count{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.fresult__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip--soft{
  font-size:.76rem;padding:3px 10px;border-radius:999px;
  background:rgba(var(--tint-lilac),.07);border:1px solid rgba(var(--tint-lilac),.16);
  color:#4a4470;
}

.fresult__picks{
  display:grid;gap:10px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}

.fpick{
  display:flex;flex-direction:column;gap:6px;
  padding:16px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--bg-2,#f7f7f5);
  transition:transform .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.fpick:hover{transform:translateY(-2px);border-color:var(--ink-4,#9a9a93);background:#fff}
.fpick__head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.fpick__name{font-size:.95rem;font-weight:640}
.fpick__tag{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:rgba(var(--tint-rose),.09);
  border:1px solid rgba(var(--tint-rose),.2);border-radius:999px;padding:2px 8px;
}
.fpick__price{font-size:1.1rem;font-weight:680;letter-spacing:-.02em}
.fpick__price small{font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.fpick__price--soon{font-size:.8rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.fpick__desc{font-size:.82rem;color:var(--ink-2);line-height:1.45;flex:1}
.fpick__cta{font-size:.82rem;font-weight:640;color:var(--ink)}

.finder__empty{
  grid-column:1/-1;
  font-size:.92rem;color:var(--ink-2);
  background:#fff;border:1px dashed var(--line-2);border-radius:12px;padding:18px;
}
.finder__empty a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:720px){
  .finder__box{flex-wrap:wrap;padding:12px}
  .finder__icon{display:none}
  .finder__input{width:100%;padding:6px 2px}
  .finder__go{width:100%}
}

/* Enlace al sitio en las tarjetas del portafolio */
.work__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;font-weight:640;color:var(--ink);white-space:nowrap;
}
.work__link .ico{width:14px;height:14px;transition:transform .2s var(--ease)}
.work__link:hover{color:var(--accent)}
.work__link:hover .ico{transform:translateX(3px)}

/* La tarjeta entera es el enlace al sitio */
.work--link{display:block;color:inherit;text-decoration:none}
.work--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-lg)}
.work--link .work__media img{transition:transform .5s var(--ease)}
.work--link:hover .work__media img{transform:scale(1.03)}

/* Las capturas son cuadradas: se muestran completas, sin recorte */
.work__media{aspect-ratio:1 / 1}
.work__media img{object-position:center}