/* ==========================================================================
   Fotomatón El Puerto — hoja de estilos principal
   Paleta extraída del logotipo: rosa frambuesa, dorado, crema y purpurina.
   ========================================================================== */

:root {
  /* Marca */
  --pink: #d6246e;
  --pink-dark: #a51454;
  --pink-deep: #7d0f3f;
  --pink-mid: #ee5f96;
  --pink-soft: #fbe0ec;
  --pink-mist: #fdf1f6;

  --gold: #c9962f;
  --gold-light: #f0cd82;
  --gold-deep: #9a6f18;

  --cream: #fff8f2;
  --cream-2: #fdeee2;
  --white: #ffffff;

  --ink: #3b2a31;
  --ink-soft: #6d5a63;
  --line: rgba(166, 20, 84, 0.12);

  /* Gradientes de marca */
  --grad-pink: linear-gradient(135deg, #ee5f96 0%, #d6246e 45%, #a51454 100%);
  --grad-gold: linear-gradient(100deg, #9a6f18 0%, #c9962f 35%, #f0cd82 60%, #c9962f 100%);
  --grad-soft: linear-gradient(160deg, #fff8f2 0%, #fdf1f6 55%, #fbe0ec 100%);

  /* Sombras y radios */
  --shadow-sm: 0 4px 14px rgba(125, 15, 63, 0.07);
  --shadow: 0 14px 34px rgba(125, 15, 63, 0.10);
  --shadow-lg: 0 26px 60px rgba(125, 15, 63, 0.16);
  --r-sm: 14px;
  --r: 22px;
  --r-lg: 32px;
  --r-pill: 999px;

  --header-h: 76px;
  --maxw: 1180px;
  /* Margen lateral: 20 px por lado en móvil y hasta 48 px en pantallas
     anchas. Con un valor fijo, el logotipo del hero quedaba pegado al borde
     en portátiles de 900-1100 px, que es donde no llega a activarse el
     ancho máximo y tampoco hay margen sobrante. */
  --gutter: clamp(2.5rem, .8rem + 5.5vw, 6rem);
  --ease: cubic-bezier(.22, .68, .36, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
picture { display: contents; }
img { height: auto; }
a { color: var(--pink-dark); text-decoration: none; }
a:hover { color: var(--pink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pink-mid); outline-offset: 3px; border-radius: 6px; }

section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.script {
  font-family: "Pacifico", "Poppins", cursive;
  font-weight: 400;
  letter-spacing: 0;
}
.text-grad {
  background: var(--grad-pink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pacifico tiene remates que sobresalen del ancho nominal de cada letra: la
   «l» final de «fácil», por ejemplo. Con background-clip:text el degradado
   solo se pinta dentro de la caja del texto, así que ese sobrante se quedaba
   sin pintar y la letra parecía cortada en seco. Se ensancha la caja de pintado
   y se compensa con margen negativo, de modo que la maquetación no se mueve.
   Solo en horizontal: en vertical alteraba el alto de los elementos de bloque,
   y los trazos ascendentes y descendentes no se salen de la caja. */
.script.text-grad, .script.text-gold {
  padding-inline: .16em;
  margin-inline: -.16em;
}

/* -------------------------------------------------------------- layout -- */
.container { width: min(100% - var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 2rem + 6vw, 6.5rem) 0; position: relative; }
.section--tint { background: var(--grad-soft); }
.section--cream { background: var(--cream-2); }

.section-head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.2rem, 1rem + 3vw, 3.4rem); }
.section-head p { color: var(--ink-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pink-dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .4rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.eyebrow::before { content: "✦"; color: var(--gold); }

.sparkles { display: block; text-align: center; color: var(--gold); letter-spacing: .6em; margin: 0 0 1rem; font-size: .8rem; }

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

/* El salto al contenido debe verse al llegar con el tabulador */
.skip-link {
  position: fixed; top: .6rem; left: 50%; z-index: 300;
  transform: translate(-50%, -250%);
  background: var(--white); color: var(--pink-dark);
  padding: .7rem 1.4rem; border-radius: var(--r-pill);
  font-weight: 600; box-shadow: var(--shadow);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

::selection { background: var(--pink-soft); color: var(--pink-deep); }

/* ------------------------------------------------------------- botones -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border: 0; border-radius: var(--r-pill);
  font-weight: 600; font-size: .98rem; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--grad-pink); color: #fff; box-shadow: 0 10px 24px rgba(214, 36, 110, .30); }
.btn--primary:hover { color: #fff; box-shadow: 0 16px 32px rgba(214, 36, 110, .38); }

.btn--ghost { background: var(--white); color: var(--pink-dark); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.btn--ghost:hover { color: var(--pink); box-shadow: var(--shadow); }

.btn--outline { background: transparent; color: #fff; box-shadow: none; border: 2px solid rgba(255, 255, 255, .65); }
.btn--outline:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------- cabecera --- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255, 248, 242, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); background: rgba(255, 248, 242, .94); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - var(--gutter), var(--maxw)); margin-inline: auto; }
.header__logo img { height: 52px; width: auto; transition: height .3s var(--ease); }
.header.is-scrolled .header__logo img { height: 44px; }

.nav { display: flex; align-items: center; gap: clamp(.6rem, .1rem + .9vw, 1.4rem); }
.nav a {
  position: relative; font-size: .95rem; font-weight: 500; color: var(--ink);
  padding: .35rem .1rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--grad-gold); border-radius: 2px; transition: right .3s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--pink-dark); }
.nav a:hover::after, .nav a.is-active::after { right: 0; }

.header__cta { display: inline-flex; gap: .6rem; }
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--pink-dark); border-radius: 2px; position: relative; transition: background-color .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--pink-dark);
  border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: inline-flex; }
  .header__cta .btn--ghost { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    padding: .5rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform .35s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a::after { display: none; }
}
@media (max-width: 460px) {
  .header__cta .btn { padding: .7rem 1rem; font-size: .9rem; }
  .header__logo img { height: 42px; }
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 5rem)) 0 clamp(3rem, 1rem + 6vw, 5.5rem);
  background: var(--grad-soft);
  overflow: hidden;
}
.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
}
.hero__glow--1 { width: 480px; height: 480px; background: rgba(238, 95, 150, .35); top: -140px; right: -120px; }
.hero__glow--2 { width: 420px; height: 420px; background: rgba(240, 205, 130, .45); bottom: -160px; left: -140px; }

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
.hero__logo-wrap { position: relative; display: block; width: min(340px, 74%); margin-bottom: 1.4rem; }
.hero__logo { width: 100%; }
.hero h1 { margin-bottom: .5rem; }
.hero h1 .script { display: block; font-size: .82em; color: var(--pink); margin-bottom: .1em; }
.hero__lead { font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); color: var(--ink-soft); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; }

.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem .6rem; list-style: none; padding: 0; margin: 0; }
.hero__badges li {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .38rem .9rem; font-size: .85rem; font-weight: 500; color: var(--pink-deep);
}
.hero__badges li::before { content: "✓"; font-weight: 700; color: var(--gold); }

.hero__media { position: relative; }
.hero__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); object-fit: cover; }
.hero__media .m1 { width: 100%; aspect-ratio: 4 / 5; }
.hero__media .m2 {
  position: absolute; width: 46%; aspect-ratio: 1 / 1; right: -6%; bottom: -8%;
  border: 6px solid var(--white); border-radius: var(--r);
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__logo-wrap { margin-inline: auto; }
  .hero__lead { margin-inline: auto; }
  .hero__actions, .hero__badges { justify-content: center; }
  .hero__media { max-width: 460px; margin: 1rem auto 0; }
}

/* ------------------------------------------------------------- eventos -- */
.marquee {
  position: relative;
  background: var(--pink-deep); color: #fff5f9; overflow: hidden; padding: .85rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 2.5rem; animation: slide 32s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 2.5rem; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.marquee__track span::after { content: "✦"; color: var(--gold-light); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Un barrido de luz que cruza la franja de izquierda a derecha. El degradado va
   de transparente a blanco: la cabeza brilla y lo que queda detrás se apaga,
   que es lo que da la sensación de rastro. Cruza y luego descansa. */
.marquee__rastro {
  position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  z-index: 2; pointer-events: none;
  transform: translateX(-120%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 214, 150, .06) 28%,
    rgba(255, 232, 184, .20) 58%,
    rgba(255, 246, 220, .46) 82%,
    rgba(255, 252, 238, .78) 94%,
    rgba(255, 255, 255, .30) 100%);
  /* Sin mix-blend-mode ni filter a propósito: ambos impiden que el barrido sea
     una capa independiente y obligan a recomponer la franja entera en cada
     fotograma. El degradado ya viene bastante suave por sí solo. */
  will-change: transform;
  animation: rastro 11s cubic-bezier(.42, 0, .55, 1) infinite;
}
@keyframes rastro {
  0%        { transform: translateX(-120%); }
  27%, 100% { transform: translateX(420%); }
}

/* Las chispas viajan con la cabeza del barrido */


/* Fuera de pantalla no hay nada que animar */
.marquee.is-paused .marquee__track,
.marquee.is-paused .marquee__rastro,
.marquee.is-paused .sparkle { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__rastro { display: none; }
}

/* ----------------------------------------------------------- servicios -- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.2rem, .6rem + 1.4vw, 2rem); }

.card {
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(166, 20, 84, .07);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pink-mist); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 1;
  background: rgba(255, 255, 255, .93); color: var(--pink-dark);
  border-radius: var(--r-pill); padding: .3rem .85rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .5rem; color: var(--pink-deep); }
.card__body > p { color: var(--ink-soft); font-size: .96rem; }

.ticks { list-style: none; margin: .3rem 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.7rem; font-size: .94rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--grad-gold);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .3rem; border-top: 1px dashed var(--line); }
.card__price { font-weight: 600; color: var(--pink-dark); font-size: .88rem; padding-top: .9rem; line-height: 1.35; }
.card__foot .btn { margin-top: .9rem; white-space: nowrap; padding: .7rem 1.15rem; font-size: .9rem; }

/* --------------------------------------------------------------- packs -- */
.pack {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 2px solid rgba(201, 150, 47, .35);
  position: relative;
}
/* La chapa va en el flujo, centrada sobre el título. Colocada en absoluto
   arriba a la derecha se montaba encima del título en cuanto este ocupaba dos
   líneas, que es en cualquier pantalla por debajo de 1280 px. */
.pack__badge {
  display: inline-block; margin-bottom: .9rem;
  background: var(--grad-gold); color: #40290a;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem 1.1rem; border-radius: var(--r-pill);
  box-shadow: 0 6px 16px rgba(64, 41, 10, .28);
}
.pack__head { background: var(--grad-pink); color: #fff; padding: clamp(1.8rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 3rem); text-align: center; }
.pack__head h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin-bottom: .35rem; }
.pack__head p { color: rgba(255, 255, 255, .88); margin: 0; font-size: .98rem; }
.pack__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pack__col { padding: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); }
.pack__col + .pack__col { border-left: 1px dashed var(--line); }
.pack__col h4 { font-size: 1.15rem; color: var(--pink-deep); display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.pack__col h4 .ic { font-size: 1.3rem; }
.pack__foot {
  border-top: 1px dashed var(--line);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2rem; text-align: center;
  background: var(--pink-mist);
}
.pack__price { display: flex; flex-direction: column; align-items: center; }
.pack__price .label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.pack__price .amount { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); font-weight: 700; line-height: 1; }
.pack__price .note { font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 780px) {
  .pack__cols { grid-template-columns: 1fr; }
  .pack__col + .pack__col { border-left: 0; border-top: 1px dashed var(--line); }
}

.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.2rem; margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.extra {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.extra:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.extra .ic { font-size: 1.7rem; display: block; margin-bottom: .5rem; }
.extra h4 { margin-bottom: .3rem; font-size: 1.05rem; color: var(--pink-deep); }
.extra p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------- fondos -- */
/* 200 px de mínimo: los cinco fondos entran en una sola fila en escritorio y
   van bajando a cuatro, tres y dos según se estrecha la pantalla. */
/* Cinco fondos no cuadran en una rejilla: siempre sobra o falta uno en la
   última fila. En flexbox las filas incompletas se centran solas, así que
   quedan tres arriba y dos abajo, todos del mismo tamaño. */
.backdrops { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.9rem, .5rem + 1vw, 1.4rem); }
.backdrop {
  /* min-width: 0 anula el tamaño mínimo automático del elemento flex, que
     por defecto es el ancho intrínseco de la foto y forzaba solo dos por
     fila en lugar de tres. */
  /* <figure> trae 40 px de margen lateral por defecto del navegador:
     sin anularlo solo caben dos por fila y las fotos salen pequeñas. */
  margin: 0;
  flex: 1 1 300px; max-width: 300px; min-width: 0;
  position: relative; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--white);
}
/* En pantallas estrechas se dejan crecer hasta el ancho disponible. */
@media (max-width: 680px) { .backdrop { max-width: none; } }
.backdrop img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.backdrop:hover img { transform: scale(1.06); }
/* El rótulo va debajo de la foto, no encima. Superpuesto con un degradado
   rosa tapaba y teñía el tercio inferior de la tela, que es justo lo que hay
   que ver para elegirla. */
.backdrop figcaption {
  padding: .75rem .7rem .85rem;
  color: var(--pink-deep); font-size: .92rem; font-weight: 600; text-align: center;
}

/* ------------------------------------------------------------- proceso -- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1.2rem, .6rem + 1.4vw, 2rem); counter-reset: step; }
.step { position: relative; background: var(--white); border-radius: var(--r); padding: 2.4rem 1.6rem 1.6rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -1.1rem; left: 1.6rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--grad-pink); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 8px 18px rgba(214, 36, 110, .3);
}
.step h3 { font-size: 1.1rem; margin-bottom: .4rem; color: var(--pink-deep); }
.step p { font-size: .94rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------- galería -- */
.gallery { columns: 3 260px; column-gap: 1rem; }
.gallery button {
  display: block; width: 100%; margin: 0 0 1rem; padding: 0; border: 0; background: none;
  border-radius: var(--r); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-sm);
  break-inside: avoid; position: relative;
}
.gallery img { width: 100%; transition: transform .6s var(--ease), filter .4s var(--ease); }
.gallery button:hover img { transform: scale(1.04); filter: saturate(1.08); }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(59, 42, 49, .92); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(100%, 1000px); max-height: 86dvh; border-radius: var(--r); box-shadow: var(--shadow-lg); object-fit: contain; }
.lightbox__btn {
  position: absolute; background: rgba(255, 255, 255, .14); color: #fff; border: 0;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center; transition: background-color .2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .3); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ nosotros -- */
.about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.about__media::after {
  content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; z-index: -1;
  border: 2px solid var(--gold-light); border-radius: var(--r-lg);
}
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .about__media { max-width: 420px; margin-inline: auto; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.stat { background: var(--white); border-radius: var(--r); padding: 1.1rem 1rem; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.stat b { display: block; font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.15; }
.stat span { font-size: .82rem; color: var(--ink-soft); }

/* ----------------------------------------------------------------- faq -- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .8rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: .2rem 1.3rem; box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease);
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 600; color: var(--pink-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gold); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 0 1.1rem; margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ------------------------------------------------------------ contacto -- */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

.contact__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.contact__list a, .contact__list span { display: flex; align-items: center; gap: .9rem; color: var(--ink); font-weight: 500; }
/* Una dirección de correo es una palabra larga que no se puede partir sola: sin
   esto empuja la columna y saca la página de sus márgenes en pantallas
   estrechas. */
.contact__list a > span:last-child { min-width: 0; display: block; overflow-wrap: anywhere; }
.contact__list .ic {
  width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center;
  background: var(--white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); font-size: 1.2rem;
}
.contact__list small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; }

.form { background: var(--white); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); box-shadow: var(--shadow); border: 1px solid var(--line); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--pink-deep); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--cream); transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--pink-mid); box-shadow: 0 0 0 3px rgba(238, 95, 150, .18);
}
.form .btn { margin-top: 1.2rem; }
.form__note { font-size: .8rem; color: var(--ink-soft); margin: .9rem 0 0; text-align: center; }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ cta -- */
.cta-band { background: var(--grad-pink); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .9); max-width: 38rem; margin-inline: auto; }
.cta-band .btn--ghost { background: #fff; }
.cta-band .sparkles { color: var(--gold-light); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* --------------------------------------------------------------- footer -- */
.footer { background: var(--pink-deep); color: rgba(255, 245, 249, .82); padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 1.5rem; font-size: .93rem; }
.footer a { color: rgba(255, 245, 249, .82); }
.footer a:hover { color: var(--gold-light); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.footer__brand {
  display: inline-block; background: var(--cream); border-radius: var(--r);
  padding: .9rem 1.2rem; margin-bottom: 1.1rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.footer__brand img { width: 180px; display: block; }
.footer h4 { color: #fff; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); transition: background-color .25s, transform .25s;
}
.footer__social a:hover { background: var(--gold); transform: translateY(-3px); }
.footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .85rem;
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; text-align: center; } .footer img { margin-inline: auto; } .footer__social { justify-content: center; } .footer__bottom { justify-content: center; text-align: center; } }

/* --------------------------------------------------- animación scroll --- */
/* Solo se oculta si hay JavaScript para volver a mostrarlo: sin JS la web
   se ve completa. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* -------------------------------------------------------- páginas texto -- */
.page { padding: calc(var(--header-h) + 3rem) 0 4rem; min-height: calc(100dvh - 320px); }
.page .container { max-width: 52rem; }
.page h2 { font-size: 1.4rem; margin-top: 2.2rem; color: var(--pink-deep); }
.page ul { padding-left: 1.2rem; }
.page li { margin-bottom: .5rem; }

/* =============================================================== EXTRAS === */

/* --- Contador y pie de la galería ampliada -------------------------------- */
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lightbox__caption {
  color: rgba(255, 255, 255, .9); font-size: .9rem; text-align: center;
  max-width: 40rem; margin: 0;
}
.lightbox__count {
  display: inline-block; font-size: .8rem; letter-spacing: .1em;
  color: rgba(255, 255, 255, .65);
}

/* --- Mensajes de error del formulario ------------------------------------- */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .14); }
.form__error {
  display: none; margin: 1rem 0 0; padding: .75rem 1rem;
  background: #fdecea; border: 1px solid #f5c6c0; border-radius: var(--r-sm);
  color: #9b1c14; font-size: .88rem; font-weight: 500;
}
.form__error.is-visible { display: block; }
.field label .req { color: var(--pink); }

/* --- Zonas de trabajo (pie) ------------------------------------------------ */
.footer__zonas { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer__zonas h4 { margin-bottom: .6rem; }
.footer__zonas p { margin: 0; }
.footer__zonas-intro { font-size: .88rem; line-height: 1.7; color: rgba(255, 245, 249, .78); }

/* El listado de municipios va pequeño, pero legible a propósito: un texto que
   nadie puede leer es exactamente lo que las directrices de Google consideran
   contenido oculto. Este se lee sin esfuerzo si alguien busca su pueblo. */
.footer__pueblos {
  font-size: .78rem; line-height: 1.85;
  color: rgba(255, 245, 249, .62);
  margin-top: .9rem;
}
.footer__pueblos-prov {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light);
  margin-right: .5rem;
}

/* --- Sin JavaScript -------------------------------------------------------- */
.noscript-msg {
  background: var(--pink-soft); color: var(--pink-deep);
  padding: 1rem; text-align: center; font-size: .92rem;
  border-bottom: 1px solid var(--line);
}
.noscript-msg a { text-decoration: underline; }

/* --- Impresión ------------------------------------------------------------- */
@media print {
  .header, .marquee, .lightbox, .cta-band, .hero__actions,
  .form, .skip-link, .footer__social { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 1.2rem 0; }
  .hero { padding-top: 1rem; }
  .card, .pack, .extra, .step, .faq details { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .faq details { display: block; }
  .faq p { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .text-grad, .text-gold { -webkit-text-fill-color: currentColor; color: #a51454 !important; }
}

/* ------------------------------------------------------- páginas legales -- */
.page h1 { color: var(--pink-deep); font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.5rem); }
.page .lead {
  font-size: 1.05rem; color: var(--ink-soft);
  border-left: 4px solid var(--pink-mid); padding-left: 1.1rem; margin-bottom: 2rem;
}
.page h3 { font-size: 1.08rem; margin-top: 1.6rem; color: var(--pink-dark); }
.page ol { padding-left: 1.2rem; }
.page ol li { margin-bottom: .6rem; }

.legal-box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); margin: 1.2rem 0 1.8rem;
}
.legal-box ul { margin: 0; padding-left: 1.1rem; }

.legal-nota { font-size: .88rem; color: var(--ink-soft); margin: 1rem 0 0; font-style: italic; }
.legal-destacado {
  background: var(--pink-mist); border-radius: var(--r-sm);
  padding: .8rem 1rem; font-size: .92rem; color: var(--pink-deep); font-weight: 500;
}
.legal-date { margin-top: 3rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; }


/* ==========================================================================
   EFECTOS VISUALES
   Todo lo que se anima aquí usa únicamente transform y opacity, que el
   navegador resuelve en la GPU sin recalcular la maquetación. Cualquier
   efecto se desactiva por completo con prefers-reduced-motion.
   ========================================================================== */

/* --- Barra de progreso de lectura ----------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 10px rgba(201, 150, 47, .55);
}

/* --- Parallax del hero -----------------------------------------------------
   Las transformaciones las escribe el JavaScript directamente sobre cada
   elemento. Se probó con variables CSS en el contenedor y salía tres veces más
   caro: al heredarse, obligaban al navegador a repasar todo el subárbol. */
.hero__glow, .hero__media .m1, .hero__media .m2, .hero__logo-wrap { will-change: transform; }

/* --- Purpurina: destellos sueltos ------------------------------------------ */
.sparkle-field {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.sparkle-field.is-paused .sparkle { animation-play-state: paused; }
.sparkle-field + * { position: relative; z-index: 1; }
.sparkle {
  position: absolute; width: var(--s, 10px); height: var(--s, 10px);
  left: var(--x, 50%); top: var(--y, 50%);
  opacity: 0; transform: scale(.4) rotate(0deg);
  /* Centro blanco que se apaga hacia el color: da sensación de destello */
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--c, #f0cd82) 55%, transparent 74%);
  /* Estrella de cuatro puntas dibujada con una máscara, sin peticiones extra */
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: brillo var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes brillo {
  0%       { opacity: 0; transform: scale(.25) rotate(0deg); }
  22%      { opacity: var(--max, .9); transform: scale(1) rotate(35deg); }
  52%      { opacity: calc(var(--max, .9) * .8); transform: scale(.88) rotate(70deg); }
  78%, 100% { opacity: 0; transform: scale(.4) rotate(100deg); }
}

/* --- Flash de cámara al abrir la galería ----------------------------------- */
.flash {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
  background: #fff; opacity: 0;
}
.flash.is-firing { animation: flash .42s ease-out; }
@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: .92; }
  100% { opacity: 0; }
}

/* La foto ampliada entra con un pequeño zoom, como una copia recién revelada */
.lightbox.is-open .lightbox__figure { animation: revelado .38s var(--ease) both; }
@keyframes revelado {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Aparición de tarjetas con un punto de escala -------------------------- */
.js .card.reveal, .js .extra.reveal, .js .step.reveal, .js .backdrop.reveal {
  transform: translateY(26px) scale(.985);
}
.js .card.reveal.is-visible, .js .extra.reveal.is-visible,
.js .step.reveal.is-visible, .js .backdrop.reveal.is-visible { transform: none; }

/* El levantamiento al pasar el ratón tiene que ir después y con al menos la
   misma especificidad que la regla de aparición: si no, esos tres nombres de
   clase encadenados le ganan y la tarjeta se queda quieta. */
.js .card.reveal.is-visible:hover { transform: translateY(-6px); }
.js .extra.reveal.is-visible:hover { transform: translateY(-4px); }

/* --- Nada de esto se aplica si se pide menos movimiento -------------------- */
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0; }
  .flash.is-firing, .lightbox.is-open .lightbox__figure { animation: none; }
  .hero__glow, .hero__media .m1, .hero__media .m2, .hero__logo-wrap { transform: none; will-change: auto; }
  .progress { display: none; }
}

/* --- Disparo del logotipo ---------------------------------------------------
   La cámara del logotipo "hace la foto" una sola vez, al cargar la página.
   En bucle cansaría, así que no se repite. Un único destello suave está muy
   por debajo del límite de tres destellos por segundo del criterio WCAG 2.3.1.
   -------------------------------------------------------------------------- */

/* El foco está centrado sobre el flash de la cámara del logotipo: el
   rectángulo oscuro del cuerpo, al 62 % de ancho y al 22 % de alto. Se centra
   con translate porque, si no, el punto marca la esquina y el fogonazo cae
   desplazado hacia abajo y a la derecha. */
.hero__flash {
  position: absolute; left: 62%; top: 22%;
  width: 17%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__flash::before, .hero__flash::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
}

/* El fogonazo: núcleo blanco que se abre y se apaga */
.hero__flash::before {
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0%, #fff 20%, rgba(255, 250, 232, .96) 36%,
    rgba(255, 228, 158, .62) 54%, rgba(255, 205, 120, .22) 68%, transparent 80%);
}
.is-flashing .hero__flash::before { animation: fogonazo-bola 760ms cubic-bezier(.15, .75, .3, 1) both; }
@keyframes fogonazo-bola {
  0%   { opacity: 0;   transform: scale(.12); }
  6%   { opacity: 1;   transform: scale(3.2); }
  16%  { opacity: 1;   transform: scale(5.4); }
  42%  { opacity: .48; transform: scale(8); }
  100% { opacity: 0;   transform: scale(10.5); }
}

/* La estrella de destello, esa cruz de luz típica de un flash */
.hero__flash::after {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .98), rgba(255, 243, 214, .5) 45%, transparent 72%);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0c.6 6 5.4 10.8 12 12-6.6 1.2-11.4 6-12 12-.6-6-5.4-10.8-12-12C6.6 10.8 11.4 6 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.is-flashing .hero__flash::after { animation: fogonazo-cruz 620ms cubic-bezier(.1, .8, .25, 1) both; }
@keyframes fogonazo-cruz {
  0%   { opacity: 0;   transform: scale(.2, .2) rotate(0deg); }
  7%   { opacity: 1;   transform: scale(6.5, 2.4) rotate(6deg); }
  22%  { opacity: .85; transform: scale(9, 3.2) rotate(10deg); }
  100% { opacity: 0;   transform: scale(12, 4.4) rotate(16deg); }
}

/* La ilustración se quema con la luz y da un saltito */
.is-flashing .hero__logo { animation: fogonazo-logo 760ms ease-out both; }
@keyframes fogonazo-logo {
  0%   { filter: none; transform: scale(1); }
  6%   { filter: brightness(2.2) saturate(.55) contrast(.92); transform: scale(1.055); }
  18%  { filter: brightness(1.45) saturate(.85); transform: scale(1.022); }
  45%  { filter: brightness(1.08) saturate(1); transform: scale(1.004); }
  100% { filter: none; transform: scale(1); }
}

/* Brillo que cruza el logotipo de la cabecera al pasar el ratón */
.header__logo { position: relative; overflow: hidden; border-radius: 10px; }
.header__logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
  .header__logo:hover::after { animation: barrido .65s ease-out; }
}
@keyframes barrido {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-flashing .hero__flash::before, .is-flashing .hero__flash::after,
  .is-flashing .hero__logo, .header__logo:hover::after { animation: none; }
  .hero__flash { opacity: 0; }
}

/* --- Sección "quiénes somos": ritmo de lectura ----------------------------- */
.about .gancho {
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  font-weight: 600; color: var(--pink-deep);
  line-height: 1.35; margin-bottom: .9rem;
}
.about p { margin-bottom: .95rem; }
.about p strong { color: var(--pink-deep); }

.about .stats + .btn { margin-top: 1.8rem; }
.about .firma {
  margin-top: 1.1rem; font-size: .9rem; color: var(--ink-soft);
}
.about .firma .script { font-size: 1.25rem; color: var(--pink); margin-right: .25rem; }

/* --------------------------------------------------- cesta de servicios --
   Los servicios elegidos se ven de un vistazo, se quitan pulsando otra vez y
   son lo que acaba escrito en el mensaje de WhatsApp.
   ----------------------------------------------------------------------- */
.field__titulo {
  font-size: .85rem; font-weight: 600; color: var(--pink-deep);
  display: block; margin-bottom: .55rem;
}

.cesta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Mismo lenguaje que los botones de la web: píldora, sombra suave y el
   degradado rosa de la marca cuando el servicio está en la cesta. */
.chip {
  font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
  padding: .72rem 1.25rem .72rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--pink-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}
.chip::before {
  content: "";
  width: 1.05rem; height: 1.05rem; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--pink); }

.chip[aria-pressed="true"] {
  background: var(--grad-pink);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(214, 36, 110, .30);
}
.chip[aria-pressed="true"]:hover { color: #fff; box-shadow: 0 14px 30px rgba(214, 36, 110, .38); }
/* Al elegirlo, el círculo vacío se convierte en una marca de verificación.
   Se dibuja con una máscara en línea: ni imagen ni tipografía de iconos. */
.chip[aria-pressed="true"]::before {
  background: #fff;
  border-color: transparent;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.6l4.9 4.9L19.6 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.6l4.9 4.9L19.6 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.chip.is-recien-anadido { transform: translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip:hover, .chip.is-recien-anadido { transform: none; }
}

.cesta__estado {
  margin: .85rem 0 0; font-size: .86rem; color: var(--ink-soft);
}
.cesta__estado.is-lleno { color: var(--pink-dark); font-weight: 600; }

/* Confirmación en el propio botón de la tarjeta */
.card__foot .btn.is-anadido {
  background: var(--grad-pink); color: #fff; border-color: transparent;
}

/* ------------------------------------------- ejemplos de eventos reales -- */
/* Las plantillas impresas tienen proporciones distintas (apaisadas, tiras
   verticales, cuadradas) y recortarlas destrozaría el diseño: se colocan en
   columnas para que cada una conserve su forma. */
.plantillas {
  columns: 3 260px;
  column-gap: clamp(.9rem, .5rem + 1vw, 1.4rem);
}
.plantillas button {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 clamp(.9rem, .5rem + 1vw, 1.4rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.plantillas button:hover,
.plantillas button:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow); }
.plantillas img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .plantillas button:hover, .plantillas button:focus-visible { transform: none; }
}

.plantillas__pie {
  margin: clamp(1.4rem, 1rem + 1vw, 2rem) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* La foto del glitter bar en pista es casi cuadrada: con el recorte 4/3 por
   defecto se pierden las caras, que es lo que da vida a la ficha. */
/* ------------------------------------------------------------ ficha ancha -- */
/* Con siete servicios la última queda sola en su fila. En lugar de dejar el
   hueco, ocupa el ancho completo y coloca la foto al lado del texto. */
.card--ancho { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .card--ancho { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .card--ancho .card__media { height: 100%; aspect-ratio: auto; }
  .card--ancho .card__body {
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  }
  /* .ticks ya es una rejilla: se le dan dos columnas, no CSS multicolumna. */
  .card--ancho .ticks { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }
}
@media (min-width: 1040px) {
  .card--ancho .card__body { padding-inline: clamp(1.6rem, 1rem + 2vw, 2.8rem); }
}