/* ════════════════════════════════════════════════════════════
   Páginas de servicio (anillos, aros, personalizadas,
   reparación). Reutiliza tokens y clases de main.css:
   .container, .btn-cta, .section-*, .faq__*.
   Paleta alineada con la home: texto vino sobre crema.
   ════════════════════════════════════════════════════════════ */

/* El color heredado es el del cuerpo, no el acento: todo lo que no declara
   color propio (textos de pasos, notas, pies) salía en vino. */
.servicio {
  background: var(--crema);
  color: var(--tinta-suave);
}

/* ─── Hero ──────────────────────────────────────────────── */
.servicio__hero {
  padding: calc(var(--space-section) + 24px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
  background: var(--crema);
}

.servicio__breadcrumb {
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.servicio__breadcrumb a {
  color: var(--dorado-dark);
  text-decoration: none;
}

.servicio__breadcrumb a:hover { text-decoration: underline; }

.servicio__breadcrumb-sep {
  margin: 0 .5em;
  color: var(--rosa);
}

.servicio__breadcrumb-current {
  color: var(--tinta-suave);
  opacity: .65;
}

.servicio__hero .section-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1rem;
}

.servicio__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 auto .9rem;
  max-width: 22ch;
  color: var(--vino);
}

.servicio__lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.7;
  max-width: 64ch;
  margin: 0 auto;
  color: var(--tinta-suave);
  opacity: .85;
}

.servicio__hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.4rem;
  margin: 2rem 0 0;
}

.btn-cta__glyph {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-right: .5em;
}

/* ─── Fotos (imagen del Personalizador o placeholder) ───── */
.servicio__foto {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--crema);
}

.servicio__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.servicio__foto--hero {
  max-width: 720px;
  margin: clamp(32px, 5vw, 48px) auto 0;
  aspect-ratio: 16 / 10;
}

/* Hueco de foto pendiente. Solo lo ve quien puede subirla (ver
   grijalva_servicio_foto): recuerda qué toma falta sin ensuciar la página. */
.servicio__foto--pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: clamp(24px, 4vw, 40px);
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(201, 168, 76, .07) 12px 24px),
    var(--arena);
  border: 1px dashed var(--dorado-dark);
  color: var(--dorado-dark);
  text-align: center;
}

.servicio__foto--pendiente figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--vino);
  opacity: .75;
  max-width: 32ch;
}

.servicio__foto--pendiente figcaption b {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dorado-dark);
  margin-bottom: .5rem;
}

/* Pieza real del catálogo rellenando un espacio sin foto propia */
.servicio__foto--pieza { position: relative; background: var(--crema); }
.servicio__foto--pieza .servicio__foto-enlace {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.servicio__foto--pieza img {
  object-fit: cover;
  transition: transform .5s var(--ease-out, ease);
}
.servicio__foto--pieza:hover img { transform: scale(1.04); }
.servicio__foto-ver {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: var(--dorado);
  color: var(--vino);
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5em 1.1em;
  border-radius: var(--r);
  opacity: 0;
  transition: opacity .25s var(--ease-out, ease);
  pointer-events: none;
}
.servicio__foto--pieza:hover .servicio__foto-ver,
.servicio__foto--pieza:focus-within .servicio__foto-ver { opacity: 1; }

/* ─── Bloques editoriales ───────────────────────────────── */
.servicio__bloques {
  padding: clamp(48px, 8vw, 96px) 0;
}

.servicio__bloques .container {
  max-width: 960px;
  display: grid;
  gap: clamp(36px, 6vw, 64px);
}

.servicio__bloque .section-line {
  width: 56px;
  height: 2px;
  background: var(--dorado);
  margin: 0 0 1.1rem;
}

.servicio__bloque-titulo {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  line-height: 1.25;
  margin: 0 0 .8rem;
  color: var(--tinta);
}

.servicio__bloque-texto {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
  color: var(--tinta-suave);
  opacity: .85;
}

/* Bloque sin foto: texto a ancho de lectura */
.servicio__bloque:not(.servicio__bloque--foto) {
  max-width: 760px;
}

/* Bloque con foto: dos columnas, la foto alterna de lado */
.servicio__bloque--foto {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.servicio__bloque--foto .servicio__foto {
  aspect-ratio: 4 / 3;
}

@media (min-width: 720px) {
  .servicio__bloque--foto {
    grid-template-columns: 1.15fr .85fr;
  }

  .servicio__bloque--foto-izq .servicio__bloque-cuerpo { order: 2; }
  .servicio__bloque--foto-izq .servicio__foto          { order: 1; }
}

/* ─── CTA final ─────────────────────────────────────────── */
.servicio__cta {
  padding: var(--space-section) 0;
  background: var(--vino-dark);
  color: var(--blanco);
}

.servicio__cta-inner {
  max-width: 64ch;
  text-align: center;
}

.servicio__cta .section-line {
  width: 56px;
  height: 2px;
  background: var(--dorado);
  margin: 0 auto 1.6rem;
}

.servicio__cta-titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin: 0 0 1rem;
}

.servicio__cta-texto {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 2rem;
  color: var(--crema);
}

.servicio__cta-texto a {
  color: var(--dorado);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.servicio__cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0;
}

/* El cierre va sobre fondo vino oscuro: el botón secundario "Ver el catálogo"
   (outline) hereda texto casi negro (--tinta) y borde tenue, que ahí no se lee
   —parecía que el botón de WhatsApp quedaba descentrado—. Se aclara. */
.servicio__cta .btn-cta--outline {
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .35);
}

.servicio__cta .btn-cta--outline:hover {
  color: var(--blanco);
  border-color: var(--blanco);
  background: rgba(255, 255, 255, .08);
}

/* ─── Otros servicios ───────────────────────────────────── */
.servicio__relacionados {
  padding: clamp(48px, 8vw, 96px) 0;
  background: var(--arena);
}

.servicio__relacionados .section-header {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.servicio__relacionados .section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 1rem;
  color: var(--tinta);
}

.servicio__relacionados .section-line {
  width: 56px;
  height: 2px;
  background: var(--dorado);
  margin: 0 auto;
}

.servicio__relacionados-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .servicio__relacionados-grid { grid-template-columns: repeat(2, 1fr); }
}

.servicio__relacionado {
  display: block;
  background: var(--blanco);
  border: 1px solid rgba(201, 168, 76, .25);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, transform .25s var(--ease-out);
}

.servicio__relacionado:hover {
  border-color: var(--dorado);
  transform: translateY(-3px);
}

.servicio__relacionado-titulo {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 .7rem;
  color: var(--tinta);
}

.servicio__relacionado-texto {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .98rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  color: var(--tinta-suave);
  opacity: .85;
}

.servicio__relacionado-mas {
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dorado-dark);
}

/* ─── Franja de precio en el hero ── */
.servicio__precio {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--dorado-dark);
  border: 1px solid var(--dorado-dark);
  border-radius: var(--r);
  padding: .55rem .95rem;
  white-space: nowrap;
}
.servicio__precio b {
  color: var(--vino);
  font-weight: 600;
  font-size: .95rem;
}

/* ─── Cita-ancla (remate emocional en serif) ── */
.servicio__ancla {
  text-align: center;
  padding: clamp(48px, 8vw, 88px) 0;
  background: var(--lino);
}
.servicio__ancla p {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  line-height: 1.18;
  color: var(--tinta);
}

/* ─── Banda de respaldo (tarjetas de garantía / tranquilidad) ── */
.servicio__respaldo {
  background: var(--arena);
  padding: clamp(56px, 8vw, 96px) 0;
}
.servicio__respaldo-head {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.servicio__respaldo-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--tinta);
  margin: .4rem 0 0;
}
.servicio__respaldo-head .section-line {
  margin: 1rem auto 0;
}
.servicio__respaldo-grid {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .servicio__respaldo-grid { grid-template-columns: repeat(3, 1fr); }
}
.servicio__respaldo-card {
  background: var(--blanco);
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 34px);
}
.servicio__respaldo-card .section-line {
  margin-bottom: 1rem;
}
.servicio__respaldo-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--tinta);
  margin: 0 0 .6rem;
}
.servicio__respaldo-card p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--tinta-suave);
  opacity: .85;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   Secciones de funnel (servicios con 'secciones' propias).
   Cada bloque de aquí abajo corresponde a un partial de
   template-parts/servicio/.
   ════════════════════════════════════════════════════════════ */

/* ─── Hero a dos columnas (hero_layout => 'lado') ───────── */
@media (min-width: 900px) {
  .servicio__hero--lado {
    text-align: left;
    /* No va a 0: cuando el servicio no declara precio ni hay reseñas, la
       columna de texto termina en el CTA y este quedaba pegado a la banda
       de confianza que viene justo debajo. */
    padding-bottom: clamp(32px, 4vw, 48px);
  }

  .servicio__hero--lado .servicio__hero-inner {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .servicio__hero--lado .servicio__title,
  .servicio__hero--lado .servicio__lead {
    margin-inline: 0;
  }

  .servicio__hero--lado .servicio__title { max-width: 15ch; }
  .servicio__hero--lado .servicio__lead  { max-width: 44ch; }

  /* El botón y el recuadro "Desde USD X" se apilan (botón arriba, precio abajo)
     en vez de ir lado a lado: así todas las páginas se ven igual, sin que el
     ancho del botón decida si el precio queda al lado (plata) o abajo (aros). */
  .servicio__hero--lado .servicio__hero-cta {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }

  .servicio__hero--lado .servicio__foto--hero {
    max-width: none;
    margin: 0;
    aspect-ratio: 16 / 10;
    box-shadow: 0 26px 60px rgba(42, 6, 8, .14);
  }

  .servicio__hero--lado .servicio__foto--hero img { object-fit: cover; }
}

/* Rating de Google (solo si está configurado en el Personalizador) */
.servicio__hero-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 1.5rem 0 0;
  font-size: .85rem;
  opacity: .8;
}

.servicio__hero--lado .servicio__hero-rating { justify-content: flex-start; }

.servicio__estrellas {
  color: var(--dorado-dark);
  letter-spacing: .12em;
}

/* ─── Encabezado común de sección ───────────────────────── */
.servicio__sec-head {
  max-width: 60ch;
  margin: 0 0 clamp(32px, 5vw, 52px);
}

.servicio__sec-head--centro {
  margin-inline: auto;
  text-align: center;
}

.servicio__sec-head h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.18;
  margin: .6rem 0 .9rem;
  color: var(--tinta);
}

.servicio__sec-head p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.03rem;
  line-height: 1.7;
  opacity: .85;
  max-width: 58ch;
}

.servicio__sec-head--centro p { margin-inline: auto; }
.servicio__sec-head .section-line { margin-top: 1.1rem; }
.servicio__sec-head--centro .section-line { margin-inline: auto; }

/* ─── Tira de confianza ─────────────────────────────────── */
.servicio__confianza {
  background: var(--vino-dark);
  color: var(--blanco);
  padding: clamp(28px, 4vw, 40px) 0;
}

.servicio__confianza-grid {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 820px) {
  .servicio__confianza-grid { grid-template-columns: repeat(4, 1fr); }
}

.servicio__confianza-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.5;
}

.servicio__confianza-item svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke: var(--dorado);
  margin-top: 1px;
}

.servicio__confianza-item b {
  display: block;
  font-weight: 500;
}

.servicio__confianza-item span span {
  opacity: .72;
  font-size: .82rem;
}

/* ─── Cómo funciona (pasos) ─────────────────────────────── */
.servicio__pasos { padding: clamp(56px, 8vw, 96px) 0; }

.servicio__pasos-grid {
  display: grid;
  gap: clamp(28px, 3.5vw, 40px);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) { .servicio__pasos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .servicio__pasos-grid { grid-template-columns: repeat(4, 1fr); } }

.servicio__paso {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(137, 22, 24, .14);
}

.servicio__paso-n {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--dorado-dark);
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}

.servicio__paso h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 0 0 .5rem;
  color: var(--tinta);
}

.servicio__paso p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.65;
  margin: 0;
  opacity: .82;
}

/* ─── Cuánto cuesta de verdad ───────────────────────────── */
.servicio__precio-sec {
  background: var(--lino);
  padding: clamp(56px, 8vw, 96px) 0;
}

.servicio__precio-ficha {
  background: var(--blanco);
  border: 1px solid rgba(201, 168, 76, .45);
  border-radius: var(--r);
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

@media (min-width: 860px) {
  .servicio__precio-ficha {
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
  }
}

.servicio__precio-cifra {
  text-align: center;
  border-bottom: 1px solid rgba(137, 22, 24, .14);
  padding-bottom: 1.8rem;
}

@media (min-width: 860px) {
  .servicio__precio-cifra {
    text-align: left;
    border-bottom: 0;
    border-right: 1px solid rgba(137, 22, 24, .14);
    padding: 0 2rem 0 0;
  }
}

.servicio__precio-desde {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
}

.servicio__precio-monto {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6.5vw, 4.2rem);
  line-height: 1;
  margin: .5rem 0 .4rem;
  color: var(--vino);
  font-variant-numeric: tabular-nums;
}

.servicio__precio-monto small {
  font-size: .34em;
  letter-spacing: .02em;
  opacity: .75;
}

.servicio__precio-nota {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
  opacity: .8;
}

.servicio__factores {
  display: grid;
  gap: 1.4rem;
  margin: 0;
}

.servicio__factor {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.servicio__factor dt {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  flex: 0 0 auto;
  min-width: 9.5ch;
  color: var(--tinta);
}

.servicio__factor dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .82;
}

.servicio__precio-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0;
}

.servicio__precio-cta span {
  font-family: var(--font-sans);
  font-size: .9rem;
  opacity: .78;
}

/* ─── Kicker dentro de un bloque editorial ──────────────── */
.servicio__bloque-cuerpo .section-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .7rem;
}

/* ─── Duda citada en las tarjetas de respaldo ───────────── */
.servicio__respaldo-card q {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  opacity: .7;
  margin-bottom: .5rem;
}

.servicio__respaldo-card q::before,
.servicio__respaldo-card q::after { content: none; }

/* ─── Banda del taller ──────────────────────────────────── */
.servicio__taller {
  background: var(--vino-dark);
  color: var(--blanco);
  padding: var(--space-section) 0;
}

.servicio__taller-inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 880px) {
  .servicio__taller-inner { grid-template-columns: 1.05fr .95fr; }
  .servicio__taller--solo-texto .servicio__taller-inner { grid-template-columns: 1fr; }
}

/* Sin foto del maestro: el texto se centra en la banda, en vez de quedar
   pegado a la izquierda con la mitad derecha vacía. */
.servicio__taller--solo-texto .servicio__taller-inner {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.servicio__taller--solo-texto .servicio__taller p { margin-inline: auto; }

.servicio__taller h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.18;
  margin: .7rem 0 1rem;
  color: var(--blanco);
}

.servicio__taller p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0;
  color: var(--crema);
  opacity: .85;
  max-width: 52ch;
}

.servicio__taller .servicio__foto { aspect-ratio: 5 / 4; }

.servicio__taller .servicio__foto--pendiente {
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(237, 199, 87, .06) 12px 24px),
    rgba(255, 245, 241, .05);
  border-color: rgba(237, 199, 87, .45);
}

.servicio__taller .servicio__foto--pendiente figcaption { color: var(--crema); }

/* ─── Reseñas de Google ─────────────────────────────────── */
.servicio__resenas { padding: clamp(56px, 8vw, 96px) 0; }

.servicio__resenas-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: .9rem;
  opacity: .8;
}

.servicio__resenas-grid {
  display: grid;
  gap: clamp(20px, 2.6vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .servicio__resenas-grid { grid-template-columns: repeat(3, 1fr); }
}

.servicio__resena {
  background: var(--blanco);
  border: 1px solid rgba(137, 22, 24, .14);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 32px);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.servicio__resena p {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.45;
  margin: 0;
  color: var(--tinta-suave);
}

.servicio__resena footer {
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .04em;
  opacity: .7;
  margin-top: auto;
}

/* ─── Piezas del taller (tarjetas del catálogo) ─────────── */
.servicio__piezas {
  background: var(--lino);
  padding: clamp(56px, 8vw, 96px) 0;
}

.servicio__piezas-grid {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .servicio__piezas-grid { grid-template-columns: repeat(4, 1fr); }
}

.servicio__piezas-mas {
  text-align: center;
  margin: clamp(32px, 4vw, 48px) 0 0;
}

/* ─── CTA fijo en móvil ─────────────────────────────────── */
.servicio__barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--vino-dark);
  border-top: 1px solid rgba(237, 199, 87, .35);
  padding: .7rem clamp(14px, 4vw, 20px);
}

.servicio__barra-texto {
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.35;
  color: var(--crema);
}

.servicio__barra-texto b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--dorado);
}

.servicio__barra .btn-cta {
  padding: 12px 20px;
  font-size: 10px;
  letter-spacing: .16em;
}

@media (max-width: 760px) {
  .servicio__barra { display: flex; }
  body:has(.servicio__barra) { padding-bottom: 76px; }
}

/* ─── Formas de pago ────────────────────────────────────── */
.servicio__pago { padding: clamp(48px, 7vw, 84px) 0; background: var(--arena); }
.servicio__pago-intro { max-width: 46ch; }

.servicio__pago-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
  list-style: none;
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: 0;
}

@media (min-width: 560px) {
  .servicio__pago-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 920px) {
  .servicio__pago-grid { grid-template-columns: repeat(4, 1fr); }
}

.servicio__pago-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-family: var(--font-sans);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--vino);
}

.servicio__pago-item svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  stroke: var(--dorado);
  margin-top: 1px;
}

.servicio__pago-item b { display: block; font-weight: 600; }
.servicio__pago-item span span { opacity: .78; font-size: .85rem; }

/* ─── Captura (módulo del funnel) ───────────────────────── */
.servicio__captura { padding: clamp(56px, 8vw, 96px) 0; background: var(--crema); }

.servicio__captura-card {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  background: var(--blanco);
  border: 1px solid #ebe2cf;
  border-radius: 16px;
  box-shadow: 0 16px 46px rgba(42, 6, 8, .07);
  text-align: center;
}

.servicio__captura-card .servicio__sec-head { margin-bottom: clamp(22px, 3.5vw, 32px); }
.servicio__captura-intro { max-width: 44ch; margin-inline: auto; }

.servicio__form { margin: 0; text-align: center; }

.servicio__form-campos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  text-align: left;
}

/* Nombre y WhatsApp comparten fila; Ciudad ocupa el ancho completo. */
@media (min-width: 520px) {
  .servicio__form-campos { grid-template-columns: 1fr 1fr; }
  .servicio__form-campo--ciudad { grid-column: 1 / -1; }
}

.servicio__form-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: .78rem;
}

.servicio__form-campo span {
  font-weight: 600;
  color: var(--vino);
  letter-spacing: .02em;
}

.servicio__form-campo input {
  font: inherit;
  font-size: .95rem;
  padding: 12px 14px;
  border: 1px solid #d9cdb4;
  border-radius: 9px;
  background: var(--crema);
  color: var(--vino);
}

.servicio__form-campo input:focus {
  outline: 2px solid var(--dorado);
  outline-offset: 1px;
  border-color: var(--dorado);
  background: var(--blanco);
}

/* Honeypot: fuera de pantalla, sin display:none para que los bots lo llenen. */
.servicio__form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.servicio__form-btn { width: 100%; margin-top: 20px; }

.servicio__form-nota {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: .8rem;
  opacity: .7;
}

.servicio__form-status {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: .85rem;
  min-height: 1.2em;
}

.servicio__form-status.is-error { color: #b23b3b; }
.servicio__form-status.is-ok { color: var(--vino); }
.servicio__form.is-sending .servicio__form-btn { opacity: .6; pointer-events: none; }