/* ==========================================================================
   UP Estudio Creativo — Landing de planes
   Estilos principales · Mobile first
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --blue:#2A1FE0;
  --lime:#D7E62B;
  --pink:#F3A6DC;
  --ink:#15121F;
  --cream:#FBF9F4;
  --white:#FFFFFF;

  --nav-h:64px;
  --overlap:28px;
  --radius:34px;
  --border:2px solid var(--ink);
  --shadow-panel:0 -16px 34px rgba(21,18,31,.14);
  --shadow-hard:5px 6px 0 var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
}
@media (min-width:901px){
  :root{ --nav-h:72px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  background:var(--cream);
  color:var(--ink);
  padding-top:var(--nav-h);
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.script{ font-family:var(--font-display); font-weight:600; }
.script{ font-style:italic; font-weight:500; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img,video{ display:block; max-width:100%; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }

.wrap{
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:901px){
  .wrap{ padding-inline:32px; }
}

/* --------------------------------------------------------------------------
   3. Utilidades
   -------------------------------------------------------------------------- */
.dots{ display:flex; gap:10px; align-items:center; }
.dots span{
  width:20px; height:14px;
  border-radius:50%;
  border:var(--border);
  display:inline-block;
}
.dots span:nth-child(1){ background:var(--blue); }
.dots span:nth-child(2){ background:var(--lime); }
.dots span:nth-child(3){ background:var(--pink); }
.dots.center{ justify-content:center; }

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.14em;
  background:var(--lime);
  border:var(--border);
  padding:5px 12px;
  border-radius:999px;
  display:inline-flex;
  margin-bottom:22px;
}
.eyebrow.lg{
  font-size:1rem;
  padding:8px 18px;
  font-weight:700;
}

.progress{
  position:fixed;
  top:0; left:0;
  width:100%; height:3px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:130;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   4. Header / nav
   -------------------------------------------------------------------------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:rgba(251,249,244,.93);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:var(--border);
  transform:translateY(0);
  transition:transform .38s var(--ease);
}
header.is-hidden{ transform:translateY(-112%); }

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height:var(--nav-h);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.nav-links{ display:none; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav .nav-cta{ display:none; }

/* Hamburguesa (en el nav wrap y en el botón flotante) */
.burger{
  width:44px; height:44px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--white);
  border:var(--border);
  border-radius:13px;
  transition:background .2s ease;
}
.burger:hover{ background:var(--lime); }
.burger span{
  width:18px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .28s var(--ease), opacity .18s ease;
}
.burger[aria-expanded="true"]{ background:var(--lime); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Hamburguesa flotante: mantiene el menú siempre accesible
   cuando la nav se oculta al bajar */
.nav-fab{
  position:fixed;
  top:calc((var(--nav-h) - 44px) / 2);
  right:16px;
  z-index:105;
  box-shadow:var(--shadow-hard);
  opacity:0;
  visibility:hidden;
  transform:scale(.85) translateY(-8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--ease), visibility 0s linear .25s, background .2s ease;
}
body.nav-hidden .nav-fab{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .25s ease, transform .25s var(--ease), visibility 0s, background .2s ease;
}

/* --------------------------------------------------------------------------
   5. Menú overlay
   -------------------------------------------------------------------------- */
.menu{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--cream);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s var(--ease), visibility 0s linear .26s;
}
.menu.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .26s ease, transform .26s var(--ease), visibility 0s;
}
.menu-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
  min-height:100vh;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + 26px);
  padding-bottom:36px;
}
.menu-links{ display:flex; flex-direction:column; }
.menu-links a{
  display:flex;
  align-items:baseline;
  gap:16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem,7vw,2.6rem);
  line-height:1.15;
  padding:14px 0;
  border-bottom:2px solid rgba(21,18,31,.14);
  transition:color .2s ease, padding-left .25s var(--ease);
}
.menu-links a:first-child{ border-top:2px solid rgba(21,18,31,.14); }
.menu-links a i{
  font-family:var(--font-mono);
  font-style:normal;
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.06em;
  opacity:.45;
}
.menu-links a:hover{ color:var(--blue); padding-left:12px; }
.menu.is-open .menu-links a{ animation:menuIn .45s var(--ease) both; }
.menu.is-open .menu-links a:nth-child(1){ animation-delay:.05s; }
.menu.is-open .menu-links a:nth-child(2){ animation-delay:.1s; }
.menu.is-open .menu-links a:nth-child(3){ animation-delay:.15s; }
.menu.is-open .menu-links a:nth-child(4){ animation-delay:.2s; }
.menu.is-open .menu-links a:nth-child(5){ animation-delay:.25s; }
.menu.is-open .menu-links a:nth-child(6){ animation-delay:.3s; }
@keyframes menuIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.menu-foot{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.menu-foot p{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.05em;
  opacity:.6;
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  border:var(--border);
  background:var(--ink);
  color:var(--cream);
  font-weight:700;
  font-size:.9rem;
  text-align:center;
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:4px 5px 0 var(--ink); }
.btn:active{ transform:translateY(1px); box-shadow:1px 1px 0 var(--ink); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.lime{ background:var(--lime); color:var(--ink); }
.btn.on-dark{
  background:transparent;
  border-color:var(--cream);
  color:var(--cream);
}
.btn.on-dark:hover{ box-shadow:4px 5px 0 rgba(251,249,244,.5); }

/* --------------------------------------------------------------------------
   7. Paneles: secciones que se solapan al desplazar
   -------------------------------------------------------------------------- */
.panel{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--nav-h) + var(--overlap) + 60px);
  margin-top:calc(-1 * var(--overlap));
  padding:clamp(56px,9vh,104px) 0;
  background:var(--cream);
  border-top:var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:var(--shadow-panel);
}
.panel > .wrap{
  width:100%;
  margin-block:auto;
}
.panel--alt{ background:var(--white); }

.hero{ margin-top:0; z-index:1; }
.strip{ z-index:2; }
#nosotros{ margin-top:0; z-index:3; }
#proceso{ z-index:4; }
#planes{ z-index:5; }
#servicios{ z-index:6; }
#contacto{ z-index:7; }

.section-head{
  max-width:660px;
  margin:0 auto 46px;
  text-align:center;
}
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{
  font-size:clamp(1.95rem,4vw,2.8rem);
  letter-spacing:-.01em;
}
.section-head p{ margin-top:14px; opacity:.75; font-size:1.05rem; }
.section-head .price-note{
  display:block;
  margin:-2px auto 16px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.05em;
  opacity:.7;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero-copy{ max-width:640px; }
.hero h1{
  font-size:clamp(2.5rem,6.5vw,4.2rem);
  line-height:1.03;
  letter-spacing:-.02em;
}
.hero h1 em{
  font-style:italic;
  color:var(--blue);
}
.hero p.lead{
  margin-top:20px;
  font-size:1.1rem;
  line-height:1.6;
  max-width:46ch;
  opacity:.82;
}
.hero-ctas{
  margin-top:30px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* Arte del hero */
.hero-art{
  position:relative;
  width:100%;
  margin-top:40px;
  aspect-ratio:4/5;
  max-height:430px;
  border:2.5px solid var(--ink);
  border-radius:28px;
  background:var(--blue);
  overflow:hidden;
}
.art-sticker{
  position:absolute;
  top:20px; left:18px;
  z-index:2;
  transform:rotate(-6deg);
  background:var(--pink);
  border:var(--border);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
}
.art-blob{
  position:absolute;
  top:-15%; right:-13%;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--lime);
  border:2.5px solid var(--ink);
}
.art-card{
  position:absolute;
  left:16px; right:16px; bottom:16px;
  z-index:2;
  background:var(--white);
  border:var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:4px 5px 0 var(--ink);
}
.art-card-head{ display:flex; align-items:center; gap:10px; }
.art-avatar{
  width:34px; height:34px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--blue);
  border:var(--border);
}
.art-card-head strong{ display:block; font-size:.88rem; line-height:1.2; }
.art-card-head small{
  font-family:var(--font-mono);
  font-size:.64rem;
  opacity:.6;
}
.art-bars{
  display:flex;
  align-items:flex-end;
  gap:7px;
  height:68px;
  margin-top:14px;
  border-bottom:2px solid var(--ink);
}
.art-bars i{
  flex:1;
  background:var(--blue);
  border:var(--border);
  border-bottom:none;
  border-radius:6px 6px 0 0;
}
.art-bars i:nth-child(1){ height:38%; }
.art-bars i:nth-child(2){ height:58%; background:var(--lime); }
.art-bars i:nth-child(3){ height:46%; background:var(--pink); }
.art-bars i:nth-child(4){ height:84%; }
.art-bars i:nth-child(5){ height:66%; background:var(--lime); }
.art-card-foot{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:.68rem;
  opacity:.75;
}
.art-card-foot b{
  background:var(--lime);
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:6px;
  padding:1px 5px;
}

/* --------------------------------------------------------------------------
   9. Strip (marquee)
   -------------------------------------------------------------------------- */
.strip{
  position:sticky;
  top:var(--nav-h);
  margin-top:calc(-1 * var(--overlap));
  background:var(--ink);
  color:var(--cream);
  border-top:var(--border);
  border-bottom:var(--border);
  padding:13px 0;
  overflow:hidden;
}
.strip .track{
  display:flex;
  width:max-content;
  animation:marquee 30s linear infinite;
}
.strip:hover .track{ animation-play-state:paused; }
.strip .group{
  display:flex;
  flex:0 0 auto;
  align-items:center;
}
.strip .group span{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.08em;
  padding:0 14px;
  white-space:nowrap;
  opacity:.92;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. Quiénes somos
   -------------------------------------------------------------------------- */
.about{
  max-width:760px;
  margin-inline:auto;
}
.about-text p{
  font-size:1.03rem;
  line-height:1.75;
  opacity:.85;
  margin-bottom:16px;
}
.about-text p:first-of-type{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.22rem;
  line-height:1.5;
  opacity:1;
}
.team-photos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:36px;
}
.team-photo{
  position:relative;
  aspect-ratio:3/4;
  border:2.5px solid var(--ink);
  border-radius:20px;
  display:flex;
  align-items:flex-end;
  padding:12px;
  overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.team-photo:nth-child(1){ background:var(--blue); color:var(--cream); }
.team-photo:nth-child(2){ background:var(--lime); color:var(--ink); margin-top:26px; }
.team-photo:nth-child(3){ background:var(--pink); color:var(--ink); }
.team-photo .role{
  font-family:var(--font-mono);
  font-size:.6rem;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.team-photo .ph-icon{
  position:absolute;
  top:12px; left:12px;
  font-family:var(--font-mono);
  font-size:.6rem;
  opacity:.7;
  border:1.5px dashed currentColor;
  padding:3px 7px;
  border-radius:999px;
}

/* Link a Instagram (Quiénes somos) */
.instagram-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  font-family:var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:var(--border);
  border-radius:999px;
  padding:10px 18px;
  background:var(--white);
  transition:transform .18s ease, background .18s ease;
}
.instagram-link:hover{ background:var(--lime); transform:translateY(-2px); }
.instagram-link:active{ transform:translateY(1px); }

/* Strip full-bleed dentro de Quiénes somos (reemplaza las fotos):
   sale de la columna .about hasta los bordes de la pantalla */
#nosotros .strip{
  position:static;
  margin:34px calc(50% - 50vw) 2px;
}

/* --------------------------------------------------------------------------
   11. Proceso
   -------------------------------------------------------------------------- */
.process{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.step{
  border:var(--border);
  border-radius:18px;
  padding:24px;
  background:var(--white);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step .num{
  width:30px; height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:.85rem;
}
.step h4{ font-size:1.05rem; margin-bottom:8px; font-weight:700; font-family:var(--font-body); }
.step p{ font-size:.88rem; line-height:1.55; opacity:.75; }

/* --------------------------------------------------------------------------
   12. Planes
   -------------------------------------------------------------------------- */
.plans{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:stretch;
}
.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  border:2.5px solid var(--ink);
  border-radius:26px;
  padding:34px 28px 30px;
  background:var(--white);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan.emprende{ background:var(--lime); }
.plan.crecer{ background:var(--blue); color:var(--cream); }
.plan.crack{ background:var(--pink); }

/* el punto del color de la tarjeta se resalta en blanco */
.plan.emprende .dots span:nth-child(2){ background:var(--white); }
.plan.crecer .dots span:nth-child(1){ background:var(--white); }
.plan.crack .dots span:nth-child(3){ background:var(--white); }

.plan .badge{
  position:absolute;
  top:-15px; right:24px;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:7px 14px;
  border-radius:999px;
  border:var(--border);
  transition:transform .3s var(--ease);
}
.plan .dots{ margin-bottom:22px; }
.plan h3{ font-size:1.75rem; font-weight:500; }
.plan .price{
  margin-top:16px;
  font-family:var(--font-mono);
}
.plan .price .old{
  display:block;
  font-size:.85rem;
  opacity:.6;
  text-decoration:line-through;
}
.plan .price .now{
  display:inline-block;
  margin-top:4px;
  font-size:2.5rem;
  font-weight:700;
  line-height:1;
  transition:transform .3s var(--ease);
}
.plan .price .cadence{
  display:block;
  font-size:.78rem;
  opacity:.75;
}
.plan .card-white{
  flex:1;
  margin-top:22px;
  background:var(--white);
  color:var(--ink);
  border:var(--border);
  border-radius:16px;
  padding:20px;
}
.plan ul{ display:flex; flex-direction:column; gap:11px; }
.plan ul li{
  position:relative;
  padding-left:20px;
  font-size:.92rem;
  line-height:1.45;
}
.plan ul li::before{
  content:'>';
  position:absolute;
  left:0; top:0;
  font-weight:700;
}
.plan .not-included{
  margin-top:14px;
  padding-top:14px;
  border-top:1.5px dashed var(--ink);
  font-size:.8rem;
  opacity:.7;
}
.plan .cta{ margin-top:22px; text-align:center; }
.plan .cta .btn{ width:100%; }

.pricing-note{
  max-width:720px;
  margin:40px auto 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.86rem;
  line-height:1.65;
  opacity:.65;
}

/* --------------------------------------------------------------------------
   12b. Pack Conecta (bloque propio, bajo los planes)
   -------------------------------------------------------------------------- */
.pack-conecta{
  margin-top:34px;
  background:var(--ink);
  color:var(--cream);
  border:2.5px solid var(--ink);
  border-radius:26px;
  padding:clamp(30px,4vw,44px) clamp(24px,3.4vw,40px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* los tres puntos como en los demás planes;
   el primero va en crema porque es el que "iguala" el fondo oscuro */
.pack-conecta .dots{ margin-bottom:22px; }
.pack-conecta .dots span:nth-child(1){ background:var(--cream); }
.pack-conecta .eyebrow{ background:var(--lime); }
.pack-conecta h3{
  font-size:clamp(1.9rem,5vw,2.6rem);
  font-weight:500;
  line-height:1.1;
}
.pack-tag{
  margin-top:14px;
  font-weight:700;
  font-size:1.05rem;
  color:var(--lime);
}
.pack-copy{
  margin-top:10px;
  line-height:1.65;
  opacity:.8;
  max-width:52ch;
}
.pack-conecta .price{
  margin-top:20px;
  font-family:var(--font-mono);
}
.pack-conecta .price .now{
  display:inline-block;
  font-size:2.2rem;
  font-weight:700;
  line-height:1;
  transition:transform .3s var(--ease);
}
.pack-conecta .price .cadence{
  display:block;
  margin-top:7px;
  font-size:.78rem;
  opacity:.7;
}
.pack-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.pack-tags .tag{
  font-family:var(--font-mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  line-height:1;
  padding:8px 14px;
  border-radius:999px;
}
.pack-tags .tag.solid{
  background:var(--lime);
  color:var(--ink);
  border:2px solid var(--cream);
}
.pack-tags .tag.outline{
  border:1.5px dashed var(--cream);
  opacity:.85;
}
.pack-conecta .cta{ margin-top:28px; }
.pack-conecta .cta .btn{ width:100%; }
.pack-includes{
  margin-top:26px;
  background:var(--white);
  color:var(--ink);
  border-radius:16px;
  padding:22px;
}
.pack-includes h4{
  font-size:1.15rem;
  font-weight:600;
  margin-bottom:14px;
}
.pack-includes ul{ display:flex; flex-direction:column; gap:11px; }
.pack-includes ul li{
  position:relative;
  padding-left:20px;
  font-size:.92rem;
  line-height:1.5;
}
.pack-includes ul li::before{
  content:'>';
  position:absolute;
  left:0; top:0;
  font-weight:700;
}

/* --------------------------------------------------------------------------
   13. Otros servicios
   -------------------------------------------------------------------------- */
.services-list{ border-top:var(--border); }
.service-row{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:6px 14px;
  padding:26px 0;
  border-bottom:var(--border);
  transition:padding-left .25s var(--ease);
}
.service-row .idx{
  grid-column:1; grid-row:1;
  font-family:var(--font-mono);
  font-size:.8rem;
  opacity:.5;
  padding-top:5px;
}
.service-name{
  grid-column:2; grid-row:1;
  display:flex;
  align-items:center;
  gap:12px;
}
.service-name .dot{
  width:16px; height:16px;
  flex:0 0 auto;
  border-radius:50%;
  border:var(--border);
}
.service-row:nth-child(1) .dot{ background:var(--blue); }
.service-row:nth-child(2) .dot{ background:var(--lime); }
.service-row:nth-child(3) .dot{ background:var(--pink); }
.service-row:nth-child(4) .dot{ background:var(--blue); }
.service-row:nth-child(5) .dot{ background:var(--lime); }
.service-row:nth-child(6) .dot{ background:var(--pink); }
.service-row:nth-child(7) .dot{ background:var(--blue); }
.service-row:nth-child(8) .dot{ background:var(--lime); }
.service-row:nth-child(9) .dot{ background:var(--pink); }
.service-name h3{ font-size:1.3rem; font-weight:600; }
.service-row p{
  grid-column:1/-1; grid-row:2;
  font-size:.93rem;
  line-height:1.6;
  opacity:.75;
}
.service-row .ask{ display:none; }
.services-note{
  margin-top:30px;
  text-align:center;
  font-size:.95rem;
  opacity:.7;
}

/* --------------------------------------------------------------------------
   14. CTA final
   -------------------------------------------------------------------------- */
.cta-final{
  background:var(--ink);
  color:var(--cream);
  border-radius:32px;
  border:2.5px solid var(--ink);
  padding:clamp(46px,7vw,72px) clamp(22px,4vw,40px);
  text-align:center;
}
.cta-final h2{ font-size:clamp(1.9rem,4vw,3rem); }
.cta-final p{
  margin-top:16px;
  margin-inline:auto;
  max-width:50ch;
  opacity:.75;
}
.cta-final .hero-ctas{ justify-content:center; margin-top:30px; }

/* --------------------------------------------------------------------------
   15. Footer, redes y FAB de WhatsApp
   -------------------------------------------------------------------------- */
footer{
  position:relative;
  z-index:8;
  background:var(--cream);
  padding:50px 0 34px;
  text-align:center;
  font-size:.85rem;
}
footer p{ opacity:.6; }

.socials{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}
.social{
  width:42px; height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:var(--border);
  border-radius:50%;
  background:var(--white);
  color:var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.social:hover{ background:var(--ink); color:var(--cream); transform:translateY(-3px); }

.wsp-fab{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:120;
  width:58px; height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--lime);
  color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:50%;
  box-shadow:4px 5px 0 var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.wsp-fab:hover{ transform:translateY(-3px); box-shadow:6px 8px 0 var(--ink); }
.wsp-fab:active{ transform:translateY(1px); box-shadow:2px 2px 0 var(--ink); }

/* --------------------------------------------------------------------------
   16. Reveals (aparición al hacer scroll) — solo con JS activo
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* --------------------------------------------------------------------------
   17. Media queries
   -------------------------------------------------------------------------- */
@media (min-width:560px){
  .process{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:801px){
  .service-row{
    grid-template-columns:56px 1.1fr 1.5fr 120px;
    gap:26px;
    align-items:center;
    padding:30px 0;
  }
  .service-row .idx{ grid-column:auto; grid-row:auto; padding-top:0; }
  .service-name{ grid-column:auto; grid-row:auto; }
  .service-row p{ grid-column:auto; grid-row:auto; }
  .service-row .ask{
    display:block;
    grid-column:auto; grid-row:auto;
    font-family:var(--font-mono);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-align:right;
    opacity:.7;
    transition:opacity .2s ease, transform .2s var(--ease);
  }
}

@media (min-width:901px){
  .nav-links{
    display:flex;
    gap:26px;
    font-size:.9rem;
    font-weight:600;
  }
  .nav-links a{ opacity:.75; transition:opacity .2s ease; }
  .nav-links a:hover{ opacity:1; }
  .nav .nav-cta{ display:inline-flex; }

  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:56px;
    align-items:center;
  }
  .hero-art{ margin-top:0; max-height:none; }

  .plans{ grid-template-columns:repeat(3,1fr); gap:24px; }

  .pack-conecta{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:0 40px;
    align-items:center;
    margin-top:44px;
    border-radius:30px;
  }
  .pack-includes{ margin-top:0; padding:26px; }
  .pack-conecta .cta .btn{ width:auto; }

  .team-photos{ gap:18px; }
  .team-photo{ padding:14px; }
  .team-photo .role{ font-size:.7rem; }
  .team-photo .ph-icon{ font-size:.66rem; top:16px; left:16px; }

  .about{ max-width:820px; }
}

/* Hover solo en resoluciones mayores con puntero real */
@media (hover:hover) and (min-width:901px){
  .plans .plan:hover,
  .pack-conecta:hover{
    transform:translateY(-12px);
    box-shadow:10px 12px 0 var(--ink);
  }
  .plans .plan:hover .badge{ transform:rotate(-5deg) scale(1.08); }
  .plans .plan:hover .price .now,
  .pack-conecta:hover .price .now{ transform:scale(1.05); transform-origin:left; }

  .process .step:hover{
    transform:translateY(-6px);
    box-shadow:6px 7px 0 var(--ink);
  }
  .team-photos .team-photo:hover{
    transform:translateY(-8px) rotate(-1.5deg);
  }
  .services-list .service-row:hover{ padding-left:14px; }
  .services-list .service-row:hover .ask{
    opacity:1;
    transform:translateX(-4px);
  }
}

@media (min-width:1180px){
  .process{ grid-template-columns:repeat(5,1fr); }
}

/* --------------------------------------------------------------------------
   18. Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal,
  .js .reveal.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .strip .track{ animation:none; }
  .menu.is-open .menu-links a{ animation:none; }
  header{ transition:none; }
}