/* =====================================================================
   DAIP — hoja de estilos
   Diseño web para negocios de barrio · Sant Andreu, Barcelona
   ---------------------------------------------------------------------
   Índice
   01. Tokens
   02. Reset y base
   03. Tipografía y utilidades
   04. Botones
   05. Revelado
   06. Header y navegación
   07. Hero con vídeo
   08. Cinta
   09. Qué te llevas (bento)
   10. Cómo funciona
   11. Para quién
   12. Precio
   13. Quién soy
   14. Acordeones y FAQ
   15. Contacto
   16. Footer
   17. Responsive
   18. Barra de progreso
   19. Titular palabra a palabra
   20. Tarjetas con brillo y relieve
   21. Compromisos
   22. Quién soy (sin foto)
   23. Responsive de compromisos y quién soy
   24. Formulario de contacto
   25. Menú gooey
   26. Chispas al hacer clic
   27. Texto que se descifra
   29. Comparativa
   30. Frase grande
   31. Sello giratorio
   32. Grano
   33. Responsive de lo nuevo
   34. Movimiento reducido
   35. El trabajo (portfolio)
   36. Antes → después
   37. Por qué 125 €
   38. Responsive de lo nuevo del portfolio
   ===================================================================== */


/* ============ 01. TOKENS ============ */
:root{
  /* El lima sale del logo. Es un acento: si pasa del 15 % de la página,
     la web empieza a parecer una plantilla de Framer. */
  --lima:       #AEE00A;
  --lima-alto:  #C6F13F;
  --lima-bajo:  #8FBA06;
  --lima-suave: #EDF9C7;

  --tinta:      #0E1410;   /* negro verdoso: el fondo oscuro y el texto */
  --tinta-2:    #17211A;
  --tinta-3:    #24312A;

  --papel:      #FBFAF6;   /* blanco cálido */
  --papel-2:    #F2F2EC;
  --papel-3:    #E6E7DF;

  --gris:       #5B645D;
  --linea:      rgba(14,20,16,.12);
  --linea-clara:rgba(251,250,246,.16);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --sans:    "Inter", "Segoe UI", system-ui, sans-serif;

  --shell:  1220px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --head-h: 76px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --radio: 18px;

  color-scheme: light;
}


/* ============ 02. RESET Y BASE ============ */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
}

body{
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.68;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }
[hidden]{ display: none !important; }

button{ background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
a{ color: inherit; }

:focus-visible{ outline: 3px solid var(--lima-bajo); outline-offset: 3px; border-radius: 4px; }
::selection{ background: var(--lima); color: var(--tinta); }

.vh{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip{
  position: absolute; left: 1rem; top: -100px; z-index: 999;
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1.25rem; border-radius: 8px; text-decoration: none;
  transition: top .25s var(--ease);
}
.skip:focus{ top: 1rem; }

.shell{
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ============ 03. TIPOGRAFÍA Y UTILIDADES ============ */
h1, h2, h3{
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

.h1{ font-size: clamp(2.6rem, 7.2vw, 5.6rem); }
.h2{ font-size: clamp(2rem, 4.4vw, 3.4rem); }

/* el trazo lima debajo de una palabra: se dibuja al entrar en pantalla */
mark{
  background: none;
  color: inherit;
  position: relative;
  white-space: nowrap;
}
mark::after{
  content: "";
  position: absolute;
  left: -.04em; right: -.04em; bottom: .04em;
  height: .18em;
  background: var(--lima);
  border-radius: 3px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: trazo .9s var(--ease) .5s forwards;
}
@keyframes trazo{ to{ transform: scaleX(1); } }

.kicker{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7em;
}
/* El acento lima va en la raya y no en las letras: lima-bajo sobre
   papel daba 2,19:1 y no se leía. */
.kicker::before{
  content: "";
  width: 1.6em; height: 2px; flex: none;
  background: var(--lima-bajo);
  border-radius: 2px;
}
.kicker--lima{ color: var(--lima); }
.kicker--lima::before{ background: var(--lima); }

.eyebrow{
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 1.4rem;
}
.eyebrow--claro{ color: rgba(251,250,246,.8); }

.sec{ padding-block: clamp(4.5rem, 10vw, 9rem); }
.sec--suave{ background: var(--papel-2); }
.sec--tinta{ background: var(--tinta); color: var(--papel); }
.sec--tinta .sec__intro{ color: rgba(251,250,246,.66); }

.sec__head{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.sec__intro{
  color: var(--gris);
  max-width: 34rem;
  margin: 0;
}


/* ============ 04. BOTONES ============ */
.cta{
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 1.9em;
  background: var(--lima);
  color: var(--tinta);
  border-radius: 100px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -18px rgba(14,20,16,.9);
  transition: transform .45s var(--ease), background-color .3s, box-shadow .45s var(--ease);
}
.cta:hover{ transform: translateY(-3px); background: var(--lima-alto); box-shadow: 0 20px 36px -18px rgba(14,20,16,.9); }
.cta:active{ transform: translateY(0); }
.cta svg{ width: 1.1em; height: 1.1em; transition: transform .45s var(--ease); }
.cta:hover svg{ transform: translateX(4px); }
.cta--tinta{ background: var(--tinta); color: var(--papel); }
.cta--tinta:hover{ background: var(--tinta-2); }
.cta--mini{ padding: .75em 1.35em; font-size: .85rem; box-shadow: none; }

.ghost{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1.05em 1.7em;
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  transition: border-color .3s, background-color .3s, transform .45s var(--ease);
}
.ghost:hover{ border-color: var(--tinta); transform: translateY(-3px); }
.ghost--claro{ border-color: var(--linea-clara); color: var(--papel); }
.ghost--claro:hover{ border-color: var(--papel); background: rgba(251,250,246,.08); }

.acciones{ display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }


/* ============ 05. REVELADO ============ */
[data-r]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-r].is-in{ opacity: 1; transform: none; }
[data-r-delay="1"]{ transition-delay: .09s; }
[data-r-delay="2"]{ transition-delay: .18s; }
[data-r-delay="3"]{ transition-delay: .27s; }
[data-r-delay="4"]{ transition-delay: .36s; }


/* ============ 06. HEADER Y NAVEGACIÓN ============ */
.head{
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  color: var(--papel);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
/* al salir del hero, la barra se vuelve sólida */
.head.is-solido{
  background: rgba(251,250,246,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
}
.head__in{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}
.marca{
  position: relative;
  z-index: 101;          /* por encima de la capa del menú móvil */
  display: flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  text-decoration: none;
  line-height: 0;
}
.marca img{
  width: auto; height: 34px;
  transition: filter .5s var(--ease);
  /* sobre el vídeo el logo va en blanco; al bajar recupera su lima */
  filter: brightness(0) invert(1);
}
.head.is-solido .marca img{ filter: none; }

.nav{ margin-left: auto; }
.nav__list{
  display: flex;
  gap: clamp(.9rem, 2vw, 1.9rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a{
  position: relative;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: .4em;
}
.nav__list a::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--lima);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after,
.nav__list a.is-activo::after{ transform: scaleX(1); }

/* el icono va delante del texto (navigation-menu-05 de 21st.dev) */
.nav__list a{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
}
.nav__ico{
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burger{
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.burger span{
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger[aria-expanded="true"] span:first-child{ transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-4px) rotate(-45deg); }


/* ============ 07. HERO: SOLO EL VÍDEO ============
   Nada encima del vídeo salvo la barra de arriba y la pista de bajar.
   Solo se oscurece un poco el borde superior para que el logo blanco
   del header se lea sobre el cielo claro. */
/* La portada mide una pantalla MÁS lo que el titular le monta encima:
   así lo que se ve al abrir sigue siendo un vídeo a pantalla completa y
   lo que tapa el bloque blanco es sobrante, no parte de la escena. */
.hero{
  --solape: clamp(3rem, 7vw, 6rem);
  position: relative;
  height: calc(100svh + var(--solape));
  background: var(--tinta);
  overflow: hidden;
}
.hero__video{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__sombra{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14,20,16,.45) 0%, rgba(14,20,16,.12) 14%, transparent 26%),
    linear-gradient(to top, rgba(14,20,16,.4) 0%, transparent 18%);
}

/* ---- Titular: montado sobre el vídeo ----
   El bloque sube y se lleva las esquinas redondeadas, de modo que el
   vídeo se mete por debajo. Así la portada y el titular se leen como
   una sola pieza y el texto no queda flotando en un folio en blanco. */
.titular{
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(3rem, 7vw, 6rem));
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background: var(--papel);
  border-radius: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0 0;
  box-shadow: 0 -30px 60px -40px rgba(14,20,16,.55);
}
.titular__in{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.titular__texto{ max-width: 42rem; }
.titular .h1{ margin-bottom: 1.5rem; }
.titular__lead{
  max-width: 36rem;
  margin: 0 0 2.2rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--gris);
}
.titular__nota{
  margin-top: 1.4rem;
  font-size: .88rem;
  color: var(--gris);
}

/* ---- La ficha de al lado ---- */
.ficha{
  position: sticky;
  top: calc(var(--head-h) + 1.5rem);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.ficha__estado{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.ficha__datos{ margin: 0; display: grid; gap: .9rem; }
.ficha__datos > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.ficha__datos dt{
  font-size: .82rem;
  color: var(--gris);
}
.ficha__datos dd{
  margin: 0;
  text-align: right;
  font-size: .86rem;
  color: var(--gris);
  white-space: nowrap;
}
.ficha__datos dd b{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  color: var(--tinta);
}
.ficha__pie{
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gris);
}

.hero__scroll{
  position: absolute;
  right: var(--gutter);
  bottom: calc(clamp(3rem, 7vw, 6rem) + clamp(1.5rem, 4vh, 2.5rem));
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  margin: 0;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(251,250,246,.85);
  text-shadow: 0 1px 12px rgba(14,20,16,.6);
}
.hero__scroll span{
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, transparent, var(--lima));
  animation: gota 2s var(--ease) infinite;
}
@keyframes gota{
  0%{ transform: scaleY(0); transform-origin: top; }
  45%{ transform: scaleY(1); transform-origin: top; }
  46%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}


/* ============ 08. CINTA ============ */
.cinta{
  background: var(--lima);
  color: var(--tinta);
  padding-block: .95rem;
  overflow: hidden;
  border-block: 1px solid rgba(14,20,16,.1);
}
.cinta__track{
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: cinta 34s linear infinite;   /* si el JS no llega, sigue corriendo */
}
.cinta__grupo{
  display: flex;
  gap: 1.6rem;
  align-items: center;
  padding-right: 1.6rem;
  flex: none;
}
.cinta__track span{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.95rem, 1.7vw, 1.25rem);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.cinta__track i{ width: 7px; height: 7px; border-radius: 50%; background: var(--tinta); flex: none; }
@keyframes cinta{ to{ transform: translateX(-50%); } }


/* ============ 09. QUÉ TE LLEVAS (BENTO) ============ */
.bento{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.15rem);
}
.tile{
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .6s var(--ease), background-color .5s, border-color .5s;
}
.tile:hover{ transform: translateY(-4px); background: var(--papel-3); }
.tile--ancha{ grid-column: span 2; }
.tile--lima{ background: var(--lima); border-color: var(--lima); }
/* la última ocupa la fila entera y cierra con el botón */
.tile--final{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  background: var(--papel-3);
}
.tile--final > div{ max-width: 46rem; }
.tile--final h3{ max-width: none; }
.tile--lima:hover{ background: var(--lima-alto); }
.tile--lima .tile__n{ color: rgba(14,20,16,.28); }
.tile__n{
  position: absolute; right: 1.1rem; top: .5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -.05em;
  color: rgba(14,20,16,.09);
}
.tile h3{
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  margin-bottom: .7rem;
  max-width: 18ch;
}
.tile p{ color: var(--gris); font-size: .95rem; margin: 0; }
.tile--lima p{ color: rgba(14,20,16,.78); }


/* ============ 10. CÓMO FUNCIONA ============ */
.pasos{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: paso;
}
.paso{ position: relative; padding-top: 2.2rem; border-top: 1px solid var(--linea-clara); }
.paso__n{
  position: absolute; top: -.35rem; left: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--lima);
}
.paso h3{ font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom: .7rem; }
.paso p{ color: rgba(251,250,246,.66); font-size: .96rem; margin: 0; }


/* ============ 11. PARA QUIÉN ============ */
.tipos{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.15rem);
}
.tipo{
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  transition: transform .6s var(--ease), background-color .5s, border-color .5s;
}
.tipo:hover{ transform: translateY(-5px); background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.tipo:hover p{ color: rgba(251,250,246,.7); }
.tipo:hover .tipo__ico{ background: var(--lima); color: var(--tinta); }
.tipo__ico{
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--papel-3);
  color: var(--tinta);
  margin-bottom: 1.4rem;
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .6s var(--ease);
}
.tipo:hover .tipo__ico{ transform: rotate(-6deg); }
.tipo__ico svg{ width: 28px; height: 28px; }
.tipo h3{ font-size: 1.12rem; margin-bottom: .5rem; }
.tipo p{ color: var(--gris); font-size: .92rem; margin: 0 0 1.4rem; transition: color .5s; }
.tipo__mas{
  margin-top: auto;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  color: var(--lima-bajo);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .4s;
}
.tipo:hover .tipo__mas{ opacity: 1; transform: none; color: var(--lima); }

.nota-viva{
  display: flex; align-items: center; gap: .7rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .92rem;
  color: var(--gris);
}
.punto{
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 0 rgba(174,224,10,.7);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido{
  70%{ box-shadow: 0 0 0 12px rgba(174,224,10,0); }
  100%{ box-shadow: 0 0 0 0 rgba(174,224,10,0); }
}


/* ============ 12. PRECIO ============ */
.precio{
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.precio__in{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.precio__num{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4.5rem, 13vw, 9rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--lima);
  margin: 0;
}
.precio__sub{
  margin: .8rem 0 0;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251,250,246,.6);
}
.precio__firma{
  margin: 1.6rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  color: rgba(251,250,246,.85);
}
.precio__cuerpo .h2{ margin-bottom: 1.6rem; }
.precio__lista{ list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .75rem; }
.precio__lista li{
  position: relative;
  padding-left: 1.9rem;
  color: rgba(251,250,246,.86);
}
.precio__lista li::before{
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--lima);
  border-bottom: 2px solid var(--lima);
  transform: rotate(-45deg);
}
.precio__aparte{
  font-size: .92rem;
  color: rgba(251,250,246,.6);
  padding-left: 1.1rem;
  border-left: 2px solid var(--linea-clara);
}

/* ============ 14. ACORDEONES Y FAQ ============ */
.faq__in{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq__aside{ position: sticky; top: calc(var(--head-h) + 2.5rem); }
.faq__nota{ color: var(--gris); font-size: .92rem; margin-top: 1.2rem; }

.acc{
  border-bottom: 1px solid var(--linea);
}
.acc summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  letter-spacing: -.02em;
  transition: color .3s;
}
.acc summary::-webkit-details-marker{ display: none; }
.acc summary:hover{ color: var(--lima-bajo); }
.acc summary i{
  position: relative;
  width: 18px; height: 18px; flex: none;
}
.acc summary i::before,
.acc summary i::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), opacity .3s;
}
.acc summary i::after{ transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] summary i::after{ transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.acc[open] summary{ color: var(--lima-bajo); }
.acc > div{ padding-bottom: 1.35rem; }
.acc > div p{ color: var(--gris); max-width: 46rem; margin: 0; }

/* acordeón sobre fondo oscuro (el «¿por qué tan barato?») */
.acc--claro{ border-color: var(--linea-clara); border-top: 1px solid var(--linea-clara); margin-top: 1.8rem; }
.acc--claro summary:hover,
.acc--claro[open] summary{ color: var(--lima); }
.acc--claro > div p{ color: rgba(251,250,246,.66); }


/* ============ 15. CONTACTO ============ */
.contacto{
  background: var(--lima);
  color: var(--tinta);
  padding-block: clamp(4.5rem, 11vw, 9rem);
  text-align: center;
}
.contacto .kicker{ color: rgba(14,20,16,.6); }
.contacto__h2{
  font-size: clamp(2.1rem, 5.4vw, 4.2rem);
  margin-bottom: 1.3rem;
}
.contacto__p{
  max-width: 44rem;
  margin-inline: auto;
  color: rgba(14,20,16,.74);
  margin-bottom: 2.2rem;
}
.contacto .acciones{ justify-content: center; }
.contacto .ghost{ border-color: rgba(14,20,16,.28); }
.contacto .ghost:hover{ border-color: var(--tinta); background: rgba(14,20,16,.06); }


/* ============ 16. FOOTER ============ */
.footer{
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.6rem;
}
.footer__in{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linea-clara);
}
.footer__marca img{ width: auto; height: 40px; }
.footer__tag{
  margin: 1rem 0 0;
  font-size: .88rem;
  color: rgba(251,250,246,.6);
  max-width: 28rem;
}
.footer__nav{ display: grid; gap: .6rem; }
.footer__nav a{
  font-size: .9rem;
  text-decoration: none;
  color: rgba(251,250,246,.78);
  transition: color .3s;
}
.footer__nav a:hover{ color: var(--lima); }
.footer__legal{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  color: rgba(251,250,246,.46);
  font-size: .8rem;
}
.footer__legal a{ color: inherit; }
.footer__legal a:hover{ color: var(--lima); }


/* ============ 17. RESPONSIVE ============ */
@media (max-width: 1000px){
  .bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--ancha{ grid-column: span 2; }
  .tipos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos{ grid-template-columns: 1fr; gap: 2rem; }
  .sec__head{ grid-template-columns: 1fr; align-items: start; }
  .precio__in,
  .yo__in,
  .faq__in{ grid-template-columns: 1fr; }
  .faq__aside{ position: static; }

  .titular__in{ grid-template-columns: 1fr; }
  .ficha{ position: static; }
}

@media (max-width: 860px){
  .nav{
    position: fixed;
    inset: 0;
    margin: 0;
    background: var(--tinta);
    color: var(--papel);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
  }
  .nav.is-abierto{ opacity: 1; pointer-events: auto; }
  .nav__list{
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }
  .nav__list a{
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.7rem;
    letter-spacing: -.03em;
  }
  .burger{ display: flex; margin-left: auto; position: relative; z-index: 102; }
  .head.is-menu{ color: var(--papel); }
  .head.is-menu .marca img{ filter: brightness(0) invert(1); }
  .cta--mini{ display: none; }
}

@media (max-width: 620px){
  :root{ --radio: 14px; }
  .bento{ grid-template-columns: 1fr; }
  .tile--ancha{ grid-column: span 1; }
  .tipos{ grid-template-columns: 1fr; }
  .yo__datos{ grid-template-columns: 1fr; gap: .9rem; }
  .yo__datos li{ display: flex; align-items: baseline; gap: .6rem; }
  .acciones .cta,
  .acciones .ghost{ width: 100%; justify-content: center; }
  .hero__scroll{ display: none; }
  .hero{ height: calc(88svh + var(--solape)); }
  /* en el móvil todo lo pulsable llega a 44 px */
  .footer__nav{ gap: 0; }
  .footer__nav a{ display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legal a{ display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legal small{ display: flex; gap: .5rem; align-items: center; }
  .footer__legal{ flex-direction: column; }
}



/* ============ 18. BARRA DE PROGRESO ============ */
.progreso{
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 3px;
  pointer-events: none;
}
.progreso i{
  display: block;
  height: 100%;
  background: var(--lima);
  transform: scaleX(0);
  transform-origin: left;
}


/* ============ 19. TITULAR PALABRA A PALABRA ============ */
.es-palabras .palabra{
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) rotate(1.5deg);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.es-palabras.is-in .palabra,
[data-r].is-in .palabra{ opacity: 1; transform: none; }


/* ============ 20. TARJETAS CON BRILLO Y RELIEVE ============ */
.tile, .tipo, .paso{
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  transform-style: preserve-3d;
}
.tile::before, .tipo::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(174,224,10,.22), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.tile:hover::before, .tipo:hover::before{ opacity: 1; }
.tile:hover, .tipo:hover{
  transform: translateY(-5px) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}
.tile--lima::before{ background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 62%); }
.tipo:hover::before{ background: radial-gradient(420px circle at var(--mx) var(--my), rgba(174,224,10,.28), transparent 60%); }
/* los pasos, sobre fondo oscuro, solo se iluminan */
.paso{ position: relative; transition: border-color .5s var(--ease); }
.paso::before{
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--lima);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.paso.is-in::before{ transform: scaleX(1); }
.paso:hover h3{ color: var(--lima); }
.paso h3{ transition: color .4s var(--ease); }


/* ============ 21. COMPROMISOS ============ */
.resenas{
  background: var(--papel-2);
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.resenas__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.15rem);
  align-items: stretch;
}
.resena{
  --mx: 50%; --my: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.resena::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(174,224,10,.18), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.resena:hover{ transform: translateY(-5px); box-shadow: 0 30px 50px -40px rgba(14,20,16,.6); }
.resena:hover::before{ opacity: 1; }
.resena--destacada{
  grid-row: span 1;
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.resena__n{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--lima-bajo);
  margin-bottom: 1.4rem;
}
.resena--destacada .resena__n{ color: var(--lima); }
.resena blockquote{ margin: 0 0 1.6rem; }
.resena blockquote p{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: pretty;
}
.resena figcaption{ margin-top: auto; }
.resena figcaption b{
  display: block;
  font-size: .95rem;
  font-weight: 600;
}
.resena figcaption span{ font-size: .84rem; color: var(--gris); }
.resena--destacada figcaption span{ color: rgba(251,250,246,.6); }



/* ============ 22. QUIÉN SOY (sin foto) ============ */
.sec--yo{ background: var(--papel); }
.yo__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.yo__copy .h2{ margin: 0; }
.yo__texto p{ color: var(--gris); max-width: 38rem; }
.yo__datos{
  grid-column: 1 / -1;
  list-style: none;
  margin: clamp(1rem, 3vw, 2rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 0;
  border-top: 1px solid var(--linea);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}
.yo__datos b{
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -.03em;
  margin-bottom: .1rem;
}
.yo__datos span{ font-size: .84rem; color: var(--gris); }

/* ============ 23. RESPONSIVE DE COMPROMISOS Y QUIÉN SOY ============
   Va aquí y no arriba con el resto del responsive porque «Quién soy» se
   define justo encima: si estuviera antes, la reja de dos columnas la
   pisaría y en el móvil el titular y el texto salían apretados. */
@media (max-width: 1000px){
  .resenas__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yo__in{ grid-template-columns: 1fr; gap: 1.5rem; }
  .yo__datos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .resenas__grid{ grid-template-columns: 1fr; }
  .yo__datos{ grid-template-columns: 1fr; gap: 1rem; }
  .yo__datos li{ display: flex; align-items: baseline; gap: .6rem; }
}

html.menos-movimiento .es-palabras .palabra{ opacity: 1 !important; transform: none !important; }
html.menos-movimiento .paso::before{ transform: scaleX(1); }


/* ============ 24. FORMULARIO DE CONTACTO ============ */
.contacto{ text-align: left; }
.contacto__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contacto__h2{ font-size: clamp(2rem, 4.6vw, 3.4rem); }
.contacto__p{ margin-inline: 0; max-width: 32rem; }
.contacto__mail{ margin-top: 1.4rem; font-size: .95rem; color: rgba(14,20,16,.7); }
.contacto__mail a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--tinta);
  text-decoration: none;
}

.form{
  background: var(--papel);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 40px 70px -50px rgba(14,20,16,.8);
}
.form__fila{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}
.campo{ display: block; margin-bottom: .9rem; }
.campo > span{
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--tinta);
}
.campo > span i{ font-style: normal; font-weight: 400; color: var(--gris); }
.campo input,
.campo textarea{
  width: 100%;
  padding: .8rem .95rem;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--tinta);
  transition: border-color .3s, background-color .3s;
}
.campo textarea{ resize: vertical; min-height: 110px; }
.campo input::placeholder,
.campo textarea::placeholder{ color: rgba(14,20,16,.35); }
.campo input:focus,
.campo textarea:focus{
  outline: none;
  background: var(--papel);
  border-color: var(--lima-bajo);
  box-shadow: 0 0 0 3px rgba(174,224,10,.25);
}
.campo input:user-invalid,
.campo textarea:user-invalid{ border-color: #C8553D; }
.form__enviar{ width: 100%; justify-content: center; margin-top: .4rem; }
.form__nota{
  margin: .9rem 0 0;
  font-size: .8rem;
  color: var(--gris);
  text-align: center;
}

/* ---- Página de gracias ---- */
.gracias{
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--lima);
  padding: var(--gutter);
}
.gracias__in{ max-width: 34rem; text-align: center; }
.gracias__logo{ width: auto; height: 46px; margin: 0 auto 2.5rem; }
.gracias .h1{ font-size: clamp(2.4rem, 7vw, 4.2rem); margin-bottom: 1.2rem; }
.gracias .h1 mark::after{ background: var(--tinta); }
.gracias p{ color: rgba(14,20,16,.75); margin-bottom: 2rem; }
.gracias .cta{ background: var(--tinta); color: var(--papel); }
.gracias .cta:hover{ background: var(--tinta-2); }

@media (max-width: 1000px){
  .contacto__in{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .form__fila{ grid-template-columns: 1fr; gap: 0; }
}


/* ============ 25. MENÚ GOOEY ============ */
.nav__list.gnav{ position: relative; isolation: isolate; gap: .3rem; }
.nav__list.gnav a{
  position: relative; z-index: 2;
  padding: .55em .9em;
  border-radius: 100px;
  transition: color .3s var(--ease) .1s;
}
.nav__list.gnav a::after{ display: none; }
.nav__list.gnav a.is-pill{ color: var(--papel); }
.head.is-solido .nav__list.gnav a.is-pill{ color: var(--papel); }
.gnav__goo{
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: url(#goo);
}
.gnav__pill{
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  background: var(--tinta);
  border-radius: 100px;
  opacity: 0;
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s;
}
.head:not(.is-solido) .gnav__pill{ background: rgba(14,20,16,.55); }
.gnav__pill.is-on{ opacity: 1; }
.gnav__gota{
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--lima);
  animation: gota-gnav .62s var(--ease) forwards;
}
@keyframes gota-gnav{
  0%{ transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
  35%{ transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .8)) scale(1); opacity: 1; }
  100%{ transform: translate(0, 0) scale(0); opacity: 0; }
}


/* ============ 26. CHISPAS AL HACER CLIC ============ */
.chispas{
  position: fixed; inset: 0;
  z-index: 900;
  pointer-events: none;
}
.chispa{ position: absolute; }
.chispa i{
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 3px;
  margin: -1.5px;
  border-radius: 2px;
  background: var(--lima);
  transform: rotate(var(--a)) translateX(0);
  animation: chispa .45s var(--ease) forwards;
}
@keyframes chispa{
  0%{ transform: rotate(var(--a)) translateX(2px) scaleX(1); opacity: 1; }
  100%{ transform: rotate(var(--a)) translateX(var(--d)) scaleX(2.4); opacity: 0; }
}


/* ============ 27. TEXTO QUE SE DESCIFRA ============ */
.kicker, .eyebrow{ font-variant-numeric: tabular-nums; }


/* ============ 29. COMPARATIVA ============
   En escritorio, una tabla de cuatro columnas: la primera con los
   conceptos y tres con las opciones. En móvil, la columna de conceptos
   se esconde y cada opción se lee como una tarjeta con sus etiquetas. */
.compara{
  background: var(--papel-2);
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.compara__grid{
  display: grid;
  grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  gap: clamp(.6rem, 1.2vw, 1rem);
  align-items: stretch;
}
/* subgrid: las siete filas las manda la reja madre, así «Qué pagas al
   mes» cae a la misma altura en las tres columnas aunque un texto
   ocupe dos líneas */
.compara__conceptos,
.compara__col{
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
.compara__conceptos p,
.compara__col p{
  margin: 0;
  padding: 1.05rem 0;
  font-size: .92rem;
  border-bottom: 1px solid var(--linea);
}
.compara__conceptos{
  padding-right: .5rem;
  color: var(--gris);
  font-weight: 500;
}
.compara__conceptos .compara__cab{ border-bottom-color: transparent; }
.compara__col{
  padding: 0 clamp(1rem, 1.8vw, 1.5rem);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--gris);
}
.compara__col p i{ display: none; }
.compara__col p:last-child{ border-bottom: 0; }
.compara__cab{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  letter-spacing: -.03em;
  color: var(--tinta);
  padding-top: clamp(1.1rem, 2vw, 1.5rem) !important;
}
.compara__cab span{
  display: inline-block;
  margin-left: .5rem;
  padding: .1em .6em;
  border-radius: 100px;
  background: rgba(14,20,16,.12);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* la columna propia: oscura, para que gane sin gritar */
.compara__col--daip{
  background: var(--tinta);
  border-color: var(--tinta);
  color: rgba(251,250,246,.78);
  box-shadow: 0 30px 60px -45px rgba(14,20,16,.9);
}
.compara__col--daip p{ border-bottom-color: var(--linea-clara); }
.compara__col--daip .compara__cab{ color: var(--papel); }
.compara__col--daip .compara__cab span{ background: var(--lima); color: var(--tinta); }
.compara__col--daip b{ color: var(--lima); font-weight: 600; }


/* ============ 30. FRASE GRANDE ============ */
.frase{
  background: var(--papel);
  padding-block: clamp(5rem, 14vw, 11rem);
}
.frase__texto{
  margin: 0;
  max-width: 24ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* cada letra entra según baja la página (lo mueve el JS) */
.frase__texto .palabra-f{ display: inline-block; white-space: nowrap; }
.frase__texto .letra{
  display: inline-block;
  opacity: .12;
  transform: translateY(.14em);
  transition: opacity .25s linear, transform .25s var(--ease), color .25s linear;
  will-change: opacity, transform;
}
.frase__texto .letra.is-on{ opacity: 1; transform: none; }
.frase__texto .letra.es-lima.is-on{ color: var(--lima-bajo); }


/* ============ 31. SELLO GIRATORIO ============ */
.sello{
  position: relative;
  width: clamp(110px, 12vw, 140px);
  height: clamp(110px, 12vw, 140px);
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  place-items: center;
}
.sello__aro{
  position: absolute; inset: 0;
  animation: sello-gira 18s linear infinite;
}
.sello__aro text{
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  fill: var(--tinta);
}
.sello__flecha{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--tinta);
  position: relative;
}
.sello__flecha::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -6px 0 0 -5px;
  border-right: 2px solid var(--lima);
  border-bottom: 2px solid var(--lima);
  transform: rotate(45deg);
}
@keyframes sello-gira{ to{ transform: rotate(360deg); } }


/* ============ 32. GRANO ============
   Una capa de ruido finísimo sobre los fondos oscuros: quita el aire de
   «color plano de plantilla» sin que se note qué es. */
.sec--tinta, .precio, .footer, .compara__col--daip{ position: relative; }
.sec--tinta::after,
.precio::after,
.footer::after,
.compara__col--daip::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============ 33. RESPONSIVE DE LO NUEVO ============ */
@media (max-width: 900px){
  /* en una columna cada opción es una tarjeta: hay que deshacer el
     subgrid, porque si no las tres siguen queriendo su propia columna */
  .compara__grid{ grid-template-columns: 1fr; grid-template-rows: none; }
  .compara__conceptos{ display: none; }
  .compara__col{
    grid-row: auto;
    grid-template-rows: none;
    padding: 0 clamp(1.1rem, 4vw, 1.6rem) .6rem;
  }
  .compara__col p{ display: flex; flex-direction: column; gap: .1rem; }
  .compara__col p i{
    display: block;
    font-style: normal;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6;
  }
  .sello{ margin-inline: auto; }
}

html.menos-movimiento .frase__texto .letra{ opacity: 1; transform: none; }
html.menos-movimiento .sello__aro{ animation: none; }

/* ============ 34. MOVIMIENTO REDUCIDO ============
   La clase la pone el interruptor del <head>. Con movimientoSiempre en
   true no se añade nunca: las animaciones van para todo el mundo. */
html.menos-movimiento{ scroll-behavior: auto; }
html.menos-movimiento *,
html.menos-movimiento *::before,
html.menos-movimiento *::after{
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html.menos-movimiento [data-r]{ opacity: 1 !important; transform: none !important; }
html.menos-movimiento mark::after{ transform: scaleX(1); }
html.menos-movimiento .cinta__track{ animation: none; }


/* ============ 35. EL TRABAJO (portfolio) ============
   La captura va dentro de un marco de navegador dibujado con CSS. Se
   nota que es una web y no una foto suelta, que es justo lo que hay
   que comunicar en esta sección. */
.trabajo{ padding-bottom: clamp(3rem, 7vw, 5rem); }

.obra{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.obra__marco{
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  box-shadow: 0 2px 4px rgba(14,20,16,.05), 0 18px 50px -20px rgba(14,20,16,.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.obra__marco:hover,
.obra__marco:focus-visible{
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(14,20,16,.05), 0 30px 70px -22px rgba(14,20,16,.5);
}

/* barra del navegador */
.obra__barra{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .6rem .9rem;
  background: var(--tinta-3);
}
.obra__barra i{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(251,250,246,.22);
  flex: none;
}
.obra__barra i:first-child{ background: rgba(251,250,246,.34); }
.obra__url{
  margin-left: .7rem;
  flex: 1;
  padding: .18rem .7rem;
  border-radius: 100px;
  background: rgba(14,20,16,.45);
  color: rgba(251,250,246,.5);
  font-size: .7rem;
  letter-spacing: .04em;
}

.obra__pantalla{ display: block; overflow: hidden; }
.obra__pantalla img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease);
}
.obra__marco:hover .obra__pantalla img,
.obra__marco:focus-visible .obra__pantalla img{ transform: scale(1.035); }

/* la pastilla de «abrir» asoma al pasar por encima */
.obra__abrir{
  position: absolute;
  right: clamp(.8rem, 2vw, 1.4rem);
  bottom: clamp(.8rem, 2vw, 1.4rem);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 100px;
  background: var(--lima);
  color: var(--tinta);
  font-size: .85rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.obra__marco:hover .obra__abrir,
.obra__marco:focus-visible .obra__abrir{ opacity: 1; transform: none; }

.obra__ficha{ align-self: center; }
.obra__tipo{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  padding: .3rem .8rem .3rem .65rem;
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
.obra__nombre{
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 .7rem;
}
.obra__que{ color: var(--gris); margin: 0 0 1.3rem; max-width: 34ch; }

.obra__tags{
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.obra__tags li{
  padding: .3rem .75rem;
  border-radius: 8px;
  background: var(--papel-2);
  font-size: .82rem;
  color: var(--tinta);
}
.obra__aviso{ margin: .9rem 0 0; font-size: .82rem; color: var(--gris); }


/* ============ 36. ANTES → DESPUÉS ============ */
.cambio__par{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.cambio__lado{ margin: 0; }

.cambio__eti{
  display: inline-block;
  margin-bottom: .9rem;
  padding: .28rem .85rem;
  border-radius: 100px;
  background: var(--papel-3);
  color: var(--gris);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cambio__eti--bien{ background: var(--tinta); color: var(--lima); }

/* el móvil dibujado */
.movil{
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: #fff;
  padding: .5rem;
  box-shadow: 0 12px 34px -18px rgba(14,20,16,.35);
  filter: saturate(.55);
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
.movil--bien{
  filter: none;
  background: var(--tinta);
  border-color: transparent;
  box-shadow: 0 18px 46px -18px rgba(14,20,16,.55);
}
.cambio__lado--despues:hover .movil{ transform: translateY(-5px); }

.movil__pantalla{
  border-radius: 16px;
  background: var(--papel-2);
  padding: .85rem;
  min-height: 300px;
  font-size: .78rem;
}
.movil--bien .movil__pantalla{ background: var(--tinta-2); color: var(--papel); }

.movil__busca{
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .75rem;
  padding: .45rem .7rem;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--linea);
  color: var(--gris);
}
.movil__busca svg{ width: 13px; height: 13px; flex: none; }

.tarjeta-g{
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: .7rem .8rem;
  margin-bottom: .55rem;
}
.tarjeta-g__t{ margin: 0 0 .25rem; font-weight: 600; }
.tarjeta-g__m{ margin: 0 0 .6rem; color: var(--gris); font-size: .72rem; }
.tarjeta-g__linea{
  height: 7px;
  margin: 0 0 .35rem;
  border-radius: 4px;
  background: var(--papel-3);
}
.tarjeta-g__linea--corta{ width: 62%; }
.tarjeta-g__sin{
  margin: .6rem 0 0;
  color: #96725B;
  font-size: .74rem;
  font-weight: 600;
}
.tarjeta-g--gris{ opacity: .75; }
.tarjeta-g__foto{
  height: 64px;
  margin: .4rem 0 0;
  border-radius: 8px;
  background: linear-gradient(115deg, #D9D6CC, #C5C2B6 50%, #D9D6CC);
}

/* la pantalla buena */
.movil__marca{
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: .88rem;
  letter-spacing: .22em;
}
.movil__abierto{
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .7rem;
  color: var(--lima);
  font-size: .72rem;
  font-weight: 600;
}
.movil__foto{
  height: 78px;
  border-radius: 10px;
  margin-bottom: .7rem;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(174,224,10,.28), transparent 60%),
    linear-gradient(140deg, #3A4A3C, #1B241E);
}
.movil__carta{
  border-top: 1px solid var(--linea-clara);
  padding-top: .55rem;
  margin-bottom: .8rem;
}
.movil__carta p{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .4rem;
  font-size: .76rem;
}
.movil__carta span{ color: rgba(251,250,246,.75); }
.movil__carta b{ font-weight: 600; }
.movil__boton{
  margin: 0;
  padding: .55rem;
  border-radius: 100px;
  background: var(--lima);
  color: var(--tinta);
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
}

.cambio__flecha{
  align-self: center;
  margin: 0;
  padding-top: 5rem;
}
.cambio__flecha span{
  display: block;
  position: relative;
  width: clamp(2rem, 4vw, 3.4rem);
  height: 2px;
  background: var(--linea);
}
.cambio__flecha span::after{
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 9px; height: 9px;
  border-top: 2px solid var(--gris);
  border-right: 2px solid var(--gris);
  transform: translateY(-50%) rotate(45deg);
}

.cambio__lista{
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  font-size: .92rem;
  color: var(--gris);
}
.cambio__lista li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
}
.cambio__lista li::before{
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 8px; height: 2px;
  background: currentColor;
  opacity: .5;
}
.cambio__lista--bien li{ color: var(--tinta); }
.cambio__lista--bien li::before{
  top: .3em;
  width: 7px; height: 11px;
  background: none;
  border: solid var(--lima-bajo);
  border-width: 0 2px 2px 0;
  opacity: 1;
  transform: rotate(45deg);
}

.cambio__pie{
  max-width: 48ch;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center;
  color: var(--gris);
}
.cambio__pie b{ color: var(--tinta); }


/* ============ 37. POR QUÉ 125 € ============ */
.porque{
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.porque__in{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: start;
}
.porque .h2{ margin: .4rem 0 1rem; }
.porque mark{ color: var(--lima); }
.porque__lead{ color: rgba(251,250,246,.72); margin: 0; max-width: 38ch; }

.porque__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: razon;
}
.porque__lista li{
  counter-increment: razon;
  position: relative;
  padding: 1.1rem 0 1.1rem 3.2rem;
  border-top: 1px solid var(--linea-clara);
  color: rgba(251,250,246,.72);
}
.porque__lista li:last-child{ border-bottom: 1px solid var(--linea-clara); }
.porque__lista li::before{
  content: "0" counter(razon);
  position: absolute;
  left: 0; top: 1.15rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--lima);
}
.porque__lista b{ color: var(--papel); font-weight: 600; }

.porque__pie{
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea-clara);
  color: rgba(251,250,246,.6);
  font-size: .95rem;
}


/* ============ 38. RESPONSIVE DE TRABAJO, CAMBIO Y PORQUÉ ============ */
@media (max-width: 1000px){
  .obra{ grid-template-columns: 1fr; }
  .obra__que{ max-width: none; }
  .porque__in{ grid-template-columns: 1fr; }

  /* La flecha horizontal no tiene sentido en una columna: se gira y se
     mete entre los dos móviles. */
  .cambio__par{ grid-template-columns: 1fr; justify-items: stretch; }
  .cambio__flecha{
    padding-top: 0;
    justify-self: center;
    transform: rotate(90deg);
  }
  .cambio__lado{ max-width: 30rem; width: 100%; margin-inline: auto; }
}

@media (max-width: 620px){
  /* En el móvil la pastilla de «abrir» no aparece nunca porque no hay
     hover: se deja fija para que se vea que la captura se puede tocar. */
  .obra__abrir{ opacity: 1; transform: none; }
  .obra__tags li{ font-size: .78rem; }
  .movil__pantalla{ min-height: 0; }
}


/* ============ 39. NEGOCIOS CON WEB (lista del portfolio) ============
   Debajo de AURA. Cada negocio es una fila: la web a la izquierda y lo
   que han dicho de ella a la derecha. La reseña solo se escribe cuando
   el cliente la ha mandado; mientras, se ve el hueco en gris. */
.clientes{
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}
.clientes__titulo{
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.clientes__lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.cliente{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  overflow: hidden;
}
.cliente__web{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(.9rem, 2vw, 1.2rem);
  text-decoration: none;
  color: inherit;
  transition: background-color .3s var(--ease);
}
.cliente__web:hover{ background: var(--papel-2); }
.cliente__mini{
  flex: none;
  width: clamp(110px, 16vw, 180px);
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--linea);
}
.cliente__mini img{
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  transition: transform .8s var(--ease);
}
.cliente__web:hover .cliente__mini img{ transform: scale(1.05); }
.cliente__datos{ display: grid; gap: .2rem; min-width: 0; }
.cliente__nombre{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -.03em;
}
.cliente__tipo{ font-size: .88rem; color: var(--gris); }
.cliente__ver{
  margin-top: .45rem;
  font-size: .85rem; font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--lima);
  justify-self: start;
}

.cliente__resena{
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border-left: 1px solid var(--linea);
  background: var(--papel-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
}
.cliente__resena blockquote{ margin: 0; }
.cliente__resena blockquote p{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0;
}
.cliente__resena figcaption{ font-size: .84rem; color: var(--gris); }
.estrellas{
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--tinta);
}
.cliente__resena--pendiente p{ font-size: .9rem; color: var(--gris); margin: 0; }
.cliente__resena--pendiente .estrellas{ color: var(--papel-3); -webkit-text-stroke: 1px rgba(14,20,16,.25); }


/* ============ 40. PRECIO: CÓMO SE PAGA Y MANTENIMIENTO ============ */
.precio__pago{
  margin: 0 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
  overflow: hidden;
}
.precio__pago > div{ background: var(--tinta-2); padding: 1rem 1.2rem; }
.precio__pago dt{
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(251,250,246,.6);
  margin-bottom: .3rem;
}
.precio__pago dd{ margin: 0; color: rgba(251,250,246,.75); font-size: .92rem; }
.precio__pago dd b{
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--papel);
}
.precio__extra{
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linea-clara);
  border-radius: var(--radio);
}
.precio__extra p{ margin: 0; color: rgba(251,250,246,.7); font-size: .92rem; }
.precio__extra .precio__extra-t{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  margin-bottom: .4rem;
  color: var(--papel);
  font-size: 1rem;
}
.precio__extra-t span{ font-size: .85rem; color: var(--lima); }


/* ============ 41. RESPONSIVE DE LO NUEVO ============ */
@media (max-width: 1000px){
  /* con dos columnas, la 08 se quedaba sola: ocupa la fila entera */
  .bento > .tile:nth-child(8){ grid-column: 1 / -1; }
}
@media (max-width: 760px){
  .cliente{ grid-template-columns: 1fr; }
  .cliente__resena{ border-left: 0; border-top: 1px solid var(--linea); }
}
@media (max-width: 620px){
  .bento > .tile:nth-child(8){ grid-column: auto; }
  .precio__pago{ grid-template-columns: 1fr; }
}
/* el número grande de la esquina pisaba los títulos largos */
.tile h3{ padding-right: 2.8rem; }
.tile--final h3{ padding-right: 0; }


/* ============ 42. EL VÍDEO POR PASOS ============
   El fondo de la portada es el color de los bordes del propio vídeo
   (medido en el fotograma, no es un color de la marca): así, en el
   móvil de pie, lo que sobra arriba y abajo no se nota. */
.hero{ background: #060C03; }
.hero__video{
  height: 100vh;
  height: 100svh;
  object-fit: cover;
  object-position: 50% 50%;
  cursor: pointer;
}
/* en vertical se ve entero: el montaje ya está hecho para esa pantalla */
.hero__video.is-vertical{ object-fit: contain; }

/* Mientras dura el vídeo no hay nada más: ni barra, ni progreso, ni
   chispas, ni forma de bajar. Lo quita activarIntro() al terminar. */
html.is-intro,
html.is-intro body{ overflow: hidden; overscroll-behavior: none; }
html.is-intro .hero{ touch-action: none; }
.head{ transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), opacity .6s var(--ease), visibility .6s; }
.progreso{ transition: opacity .6s var(--ease), visibility .6s; }
html.is-intro .head,
html.is-intro .progreso,
html.is-intro .chispas{ opacity: 0; visibility: hidden; pointer-events: none; }
/* En el móvil la portada era más baja (88svh) y asomaba el titular por
   abajo. Ahora el vídeo ocupa siempre la pantalla entera. */
.hero{ height: calc(100vh + var(--solape)); height: calc(100svh + var(--solape)); }


/* ============ 43. PORTADA ESTILO GALERÍA ============
   Estilo Apple (el DESIGN.md de Refero): fondo claro, el logo, una frase,
   los botones y debajo la imagen del producto, grande y redondeada.
   Se usa cuando <html> lleva .portada-galeria, que pone el <head>:
   siempre en el móvil, y en el ordenador mientras window.DAIP.video sea
   false (es decir, hasta que haya vídeo nuevo). */
.galeria{ display: none; }

/* El fondo es el de la foto de la mano (medido en la imagen, no es un
   color de la marca): así la foto no tiene bordes y la mano parece
   estar en la propia página, como en las de Apple. */
html.portada-galeria .hero{
  height: auto;
  background: #F7F3EA;
}
html.portada-galeria .hero__video{ display: none; }
html.portada-galeria .galeria{
  display: grid;
  justify-items: center;
  text-align: center;
  padding: calc(var(--head-h) + clamp(2.5rem, 6vw, 5rem)) var(--gutter) var(--solape);
}
.galeria__frase{
  margin: 0 0 clamp(1.6rem, 3vw, 2.2rem);
  max-width: 17ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--tinta);
  text-wrap: balance;
}
/* por encima de la foto: si no, la foto corta la sombra del botón */
.galeria__acciones{ justify-content: center; gap: 1.4rem; position: relative; z-index: 1; }
.galeria__enlace{
  display: inline-flex; align-items: center; gap: .35em;
  min-height: 44px;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.galeria__enlace:hover{ text-decoration: underline; text-decoration-color: var(--lima-bajo); text-underline-offset: .25em; }
/* la mano entra por abajo y el titular le monta encima, como la de Apple */
.galeria__escena{
  width: min(100%, 880px);
  margin: clamp(.5rem, 2vw, 1.5rem) 0 0;
}
.galeria__escena img{
  display: block;
  width: 100%;
  height: auto;
}

/* entrada escalonada, suave */
.galeria > *{ animation: galeria-entra 1.1s var(--ease) both; }
.galeria > :nth-child(2){ animation-delay: .12s; }
.galeria > :nth-child(3){ animation-delay: .24s; }
@keyframes galeria-entra{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}
html.menos-movimiento .galeria > *{ animation: none; }

html.portada-galeria .titular{ box-shadow: none; }

/* Barra de arriba sobre fondo claro: en ordenador y tablet, sólida
   desde el principio (como la de Apple); en el móvil no aparece hasta
   que se baja, para que la portada sea solo la portada. */
html.portada-galeria .head{
  background: rgba(251,250,246,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--linea);
}
html.portada-galeria .marca img{ filter: none; }

@media (max-width: 760px){
  html.portada-galeria .galeria{ padding-top: calc(var(--head-h) + 1.5rem); }
  html.portada-galeria .galeria__enlace{ display: none; }
  .galeria__escena{ width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  html.portada-galeria .head:not(.is-solido){ opacity: 0; visibility: hidden; pointer-events: none; }
}


/* ============ 44. AURA, SOLO EN ORDENADOR ============
   Su web no está adaptada al móvil ni a la tablet: mejor no enseñarla
   ahí que mandar a alguien a una página rota. Solo sale en ordenador. */
@media (max-width: 1024px){
  .obra--aura{ display: none; }
  .trabajo .clientes{ margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ============ 45. MENÚ DEL MÓVIL A PANTALLA COMPLETA ============
   El desenfoque de la barra (backdrop-filter) convierte la barra en el
   marco de todo lo que lleva dentro con position: fixed, así que el
   menú se quedaba encerrado en sus 76 px. Con el menú abierto, fuera
   el desenfoque. Y 100dvh para que la barra del navegador del móvil
   no corte el final. */
@media (max-width: 860px){
  html .head.is-menu{ backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; color: var(--papel); }
  .nav{ height: 100vh; height: 100dvh; }
}