/* ═══════════════════════════════════════════════════════════════
   MOREAMORE — Checkout · Hoja de plantilla
   ═══════════════════════════════════════════════════════════════
   Carga DESPUÉS de styles.css y shop.css (tokens, --font-mono,
   --hairline, .sys-label).

   En WordPress: templates/page-checkout.html. El bloque de checkout
   de WooCommerce se reemplaza por uno propio — no por estética, sino
   porque el nativo asume UNA dirección y UNA fecha, y acá hay una
   por regalo (ver sección 4).

   ───────────────────────────────────────────────────────────────
   EL FINAL DE LA CURVA DE DESESCALADA

   Catálogo: Amore recomienda. Producto: argumenta. Carrito: revisa.
   Checkout: se calla, salvo en un punto.

   Esta página es deliberadamente la menos "diseñada" del sitio, y
   eso es una decisión, no una omisión:

     · Sin gradientes de marca. Sin superficies oscuras.
     · Sin Playfair en ninguna parte — ni en la tarjeta citada.
     · Morado sólo en el botón principal y en el estado activo de un
       campo. Nada más lo usa.
     · Sin animación, salvo la validación de un campo.
     · SIN NAVEGACIÓN EN EL HEADER. En el checkout se quitan las
       salidas: cada enlace es una oportunidad de abandonar. Queda
       el logo (sin link a home), el paso actual y el candado.
     · Sin footer de sitio. Sólo lo legal.

   Amore aparece EN UN SOLO LUGAR: confirmando que las fechas de
   entrega funcionan. Es lo único que un asistente aporta cuando
   alguien ya tiene la tarjeta en la mano — y es donde de verdad
   puede evitar un problema.

   ───────────────────────────────────────────────────────────────
   LA NUMERACIÓN 01/02/03 ACÁ SÍ ES LEGÍTIMA

   En el catálogo los números de los criterios codificaban prioridad
   real. Acá codifican secuencia real: no podés elegir cómo pagar
   antes de decir a dónde va. Es un orden, no un adorno.
   ═══════════════════════════════════════════════════════════════ */

body.checkout {
  background: var(--mm-perla-calida);
}

/* ═══════════════════════════════════════════════════════════════
   1 · HEADER REDUCIDO — pattern "mam/checkout-header"
   ───────────────────────────────────────────────────────────────
   Reemplaza al header del sitio. Ver nota de cabecera: en checkout
   toda salida es una fuga. El único camino hacia atrás es explícito
   y va al carrito, no a seguir comprando.
   ═══════════════════════════════════════════════════════════════ */
.co-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mm-blanco-perla);
  border-bottom: var(--hairline);
}
.co-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}
/* El logo NO es un enlace acá: es identidad, no navegación. */
.co-logo img { height: 34px; width: auto; }

.co-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-gris);
  transition: color 0.2s;
}
.co-back:hover { color: var(--mm-grafito); }

.co-secure {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-verde-confirmacion);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   2 · LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.co-main { padding: 40px 0 80px; }

.co-title { margin-bottom: 32px; }
.co-title h1 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mm-grafito);
}
.co-title p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--mm-gris);
}

.co-layout {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 48px;
  align-items: start;
}
.co-form { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════
   3 · SECCIÓN NUMERADA
   ───────────────────────────────────────────────────────────────
   Una sola página, no un wizard de cuatro pasos. Un wizard esconde
   cuánto falta y cada transición es un punto de abandono; una página
   con secciones numeradas deja ver el total del esfuerzo desde el
   principio, que es lo que reduce la ansiedad.
   ═══════════════════════════════════════════════════════════════ */
.co-section + .co-section { margin-top: 40px; padding-top: 40px; border-top: var(--hairline); }

.co-sec-head {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 20px;
}
.co-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-morado);
  padding-top: 2px;
}
.co-sec-head h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--mm-grafito);
  letter-spacing: -0.01em;
}
.co-sec-head p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mm-gris);
  max-width: 58ch;
}
.co-sec-body { padding-left: 44px; }

/* ═══════════════════════════════════════════════════════════════
   4 · CAMPOS
   ───────────────────────────────────────────────────────────────
   Etiqueta arriba en mono, no floating label: el label flotante
   desaparece justo cuando el usuario lo necesita (mientras escribe)
   y obliga a recordar qué campo era. En un formulario de dirección
   con ocho campos eso cuesta errores reales.
   ═══════════════════════════════════════════════════════════════ */
.fields { display: grid; gap: 16px; }
.fields.two { grid-template-columns: 1fr 1fr; }
.fields.three { grid-template-columns: 1fr 1fr 1fr; }
.field.span2 { grid-column: span 2; }

.field { display: grid; gap: 6px; min-width: 0; }
.field > label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris-texto);
}
.field > label .opt { color: var(--mm-gris); letter-spacing: 0.04em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 10px;
  background: var(--mm-blanco-perla);
  font-family: inherit;
  font-size: 14px;
  color: var(--mm-grafito);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--mm-morado);
  box-shadow: 0 0 0 3px rgba(139, 48, 137, 0.10);
}
.field input::placeholder { color: var(--mm-gris-seda); }
.field select { appearance: none; cursor: pointer; background-image: none; }
.field.mono input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Error: dice qué pasó y cómo se arregla. No se disculpa y no es
   vago. Nunca "campo inválido". */
.field.err input, .field.err select { border-color: var(--mm-rojo-error); }
.field-err {
  display: none;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--mm-rojo-error);
}
.field.err .field-err { display: block; }

.field-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mm-gris);
}

/* Checkbox / radio en línea */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-gris-texto);
  cursor: pointer;
}
.check input {
  appearance: none;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.5px solid var(--mm-gris-seda);
  border-radius: 5px;
  display: grid;
  place-items: center;
  transition: background 0.16s, border-color 0.16s;
}
.check input::after {
  content: '';
  width: 9px;
  height: 9px;
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%);
  transform: scale(0);
  transition: transform 0.14s;
}
.check input:checked { background: var(--mm-morado); border-color: var(--mm-morado); }
.check input:checked::after { transform: scale(1); }
.check strong { font-weight: 600; color: var(--mm-grafito); }

/* ═══════════════════════════════════════════════════════════════
   5 · ENTREGA POR REGALO — pattern "mam/checkout-gift-delivery"
   ───────────────────────────────────────────────────────────────
   LA RAZÓN POR LA QUE ESTA PÁGINA NO PUEDE SER EL CHECKOUT DE WOO.

   WooCommerce asume una dirección de envío y una fecha. Acá hay una
   por regalo: dos regalos pueden ir a dos personas, en dos ciudades,
   en dos fechas distintas.

   Y hay un problema que nadie resuelve: QUIEN REGALA MUCHAS VECES NO
   SABE LA DIRECCIÓN. Es una de las causas más comunes de que una
   compra de regalo se caiga en el último paso. Por eso el destino no
   es un formulario, es una decisión de tres caminos:

     · La sé  → formulario normal
     · Se la pido a ella  → se le manda un enlace por WhatsApp donde
       ella escribe su dirección, sin ver qué es ni de quién viene
     · Me lo mandan a mí  → lo entrego en persona

   El segundo camino es el que convierte un abandono en una venta.
   Requiere: token de un uso, formulario público mínimo, y no revelar
   producto ni remitente.
   ═══════════════════════════════════════════════════════════════ */
.co-gift {
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
  overflow: hidden;
}
.co-gift + .co-gift { margin-top: 16px; }

.cg-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  background: var(--mm-perla-calida);
  border-bottom: var(--hairline);
  flex-wrap: wrap;
}
.cg-idx {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--mm-grafito);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}
.cg-head h3 { font-size: 14px; font-weight: 600; color: var(--mm-grafito); }
.cg-head .cg-what {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mm-gris);
  text-align: right;
}

.cg-body { padding: 18px; }

/* ── Los tres caminos del destino ── */
.dest-opts { display: grid; gap: 8px; margin-bottom: 18px; }

.dest-opt {
  position: relative;
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.dest-opt:hover { border-color: var(--mm-malva); }
.dest-opt input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.5px solid var(--mm-gris-seda);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.16s;
}
.dest-opt input::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-morado);
  transform: scale(0);
  transition: transform 0.16s;
}
.dest-opt input:checked { border-color: var(--mm-morado); border-width: 2px; }
.dest-opt input:checked::after { transform: scale(1); }
.dest-opt:has(input:checked) { border-color: var(--mm-morado); background: var(--mm-rosa-bruma); }

.dest-opt .d-name { font-size: 13.5px; font-weight: 500; color: var(--mm-grafito); }
.dest-opt .d-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mm-gris);
}
.dest-opt .d-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--mm-azul-lavanda);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-uva);
  vertical-align: 1px;
}

/* Paneles que dependen del camino elegido */
.dest-panel { display: none; }
.dest-panel.on { display: block; }

/* Panel de "se la pido a ella": explica exactamente qué ve la otra
   persona. Sin eso el usuario no lo usa por miedo a arruinar la
   sorpresa — y esa duda es justo lo que hay que quitarle. */
.ask-addr {
  padding: 15px 17px;
  border: 1px dashed var(--mm-gris-seda);
  border-radius: var(--radius);
  background: var(--mm-arena);
}
.ask-addr .sys-label { display: block; color: var(--mm-gris-texto); margin-bottom: 8px; }
.ask-addr p { font-size: 12.5px; line-height: 1.55; color: var(--mm-gris-texto); }
.ask-preview {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--mm-blanco-perla);
  border: var(--hairline);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mm-gris-texto);
}
.ask-preview .apk {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-gris);
  margin-bottom: 5px;
}

/* ── Fecha de entrega ── */
.cg-when {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--hairline);
}
.cg-when > .sys-label { display: block; color: var(--mm-gris-texto); margin-bottom: 11px; }

.day-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.day-opt {
  position: relative;
  padding: 10px 14px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s;
}
.day-opt:hover { border-color: var(--mm-malva); }
.day-opt input { position: absolute; opacity: 0; pointer-events: none; }
.day-opt:has(input:checked) { border-color: var(--mm-morado); background: var(--mm-rosa-bruma); }
.day-opt .dow {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris);
}
.day-opt .dnum {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-grafito);
}
.day-opt .dfee {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mm-verde-confirmacion);
}
.day-opt .dfee.pay { color: var(--mm-ambar-advertencia); }
/* Día imposible: se muestra deshabilitado, no se oculta. Saber que
   el jueves no alcanza es información; que el jueves no exista es
   confuso. */
.day-opt.off { opacity: 0.42; cursor: not-allowed; }
.day-opt.off .dfee { color: var(--mm-gris); }

/* Entrega sorpresa */
.cg-surprise { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mm-gris-nube); }

/* ═══════════════════════════════════════════════════════════════
   6 · LA ÚNICA APARICIÓN DE AMORE — pattern "mam/checkout-dates"
   ───────────────────────────────────────────────────────────────
   Una franja, no una tarjeta. Sin órbita animada, sin gradiente de
   marca: un punto de color, una línea de texto y una acción. Confirma
   que las fechas funcionan o avisa que no, y nada más.

   Es lo único que un asistente aporta en este punto — y como es lo
   único, se nota.
   ═══════════════════════════════════════════════════════════════ */
.co-dates {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 13px;
  align-items: start;
  margin-top: 16px;
  padding: 14px 17px;
  border-left: 2px solid var(--mm-morado);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, var(--mm-azul-lavanda), rgba(217,221,246,0.22));
}
.co-dates .cd-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%);
}
.co-dates .sys-label { display: block; color: var(--mm-uva); margin-bottom: 5px; }
.co-dates p { font-size: 13px; line-height: 1.55; color: var(--mm-gris-texto); }
.co-dates p strong { font-weight: 600; color: var(--mm-grafito); }
.co-dates .cd-fix {
  border: none;
  background: none;
  padding: 0 0 1px;
  border-bottom: 1px solid currentColor;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm-morado);
  white-space: nowrap;
}
.co-dates.warn { border-left-color: var(--mm-ambar-advertencia); background: #FDF6E7; }
.co-dates.warn .sys-label { color: #8A5F16; }
.co-dates.warn p { color: #6E4F14; }

/* ═══════════════════════════════════════════════════════════════
   7 · ENTREGA A BOLD — pattern "mam/bold-handoff"
   ───────────────────────────────────────────────────────────────
   Reemplaza al selector de medios de pago y a los campos de tarjeta.
   Con Bold no hay ninguno de los dos: la pasarela captura todo en su
   dominio y decide qué métodos ofrece.

   POR QUÉ ESTE BLOQUE EXISTE: una redirección a un dominio ajeno con
   la tarjeta en la mano es el punto de mayor desconfianza del flujo
   completo. La defensa no es un candado ni la palabra "seguro" — es
   decir con precisión qué va a pasar antes de que pase. Los tres
   pasos numerados son el bloque más importante de la página, y acá
   la numeración codifica secuencia real.

   Registro visual: Grafito Íntimo, sin morado. Es el momento en que
   moreAmore le pasa el turno a otro, y la página lo refleja bajando
   a neutro en vez de reforzar la marca propia.
   ═══════════════════════════════════════════════════════════════ */
.handoff {
  margin-top: 40px;
  padding: 24px 26px 26px;
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
}

.ho-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: var(--hairline);
}

/* Placeholder del wordmark. En producción se usa el recurso oficial
   de Bold (developers.bold.co/graphic-resources): no recrear la
   marca de un tercero a mano. */
.ho-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--mm-grafito);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ho-head h2 { font-size: 15.5px; font-weight: 600; color: var(--mm-grafito); }
.ho-head p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mm-gris);
  max-width: 56ch;
}

.ho-steps { margin-top: 18px; display: grid; gap: 13px; }
.ho-steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mm-gris-texto);
}
.ho-steps .ho-n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mm-gris-nube);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mm-gris-texto);
}
/* La tranquilidad va en cursiva, no en negrita: es un aparte, no
   un énfasis comercial. */
.ho-steps em { font-style: italic; color: var(--mm-grafito); }

/* El plazo de 24 h del plugin de Bold, dicho en claro. Es una
   restricción real de la pasarela y esconderla produce el peor
   escenario posible: alguien que vuelve a pagar y descubre que su
   fecha de entrega ya no existe. */
.ho-note {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 2px solid var(--mm-gris-seda);
  border-radius: 0 9px 9px 0;
  background: var(--mm-arena);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mm-gris-texto);
}
.ho-note strong { font-weight: 600; color: var(--mm-grafito); }

/* ═══════════════════════════════════════════════════════════════
   8 · RESUMEN
   ───────────────────────────────────────────────────────────────
   Sin campo de cupón: si el usuario tenía uno lo aplicó en el
   carrito. Ofrecerlo otra vez acá sólo abre la puerta a que se vaya
   a buscar códigos con la tarjeta en la mano.
   ═══════════════════════════════════════════════════════════════ */
.co-summary { position: sticky; top: 84px; }

.cs-card {
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
  overflow: hidden;
}
.cs-head { padding: 17px 20px 15px; border-bottom: var(--hairline); }
.cs-head h2 { font-size: 15px; font-weight: 600; color: var(--mm-grafito); }

.cs-gifts { padding: 6px 20px; }
.cs-gift { padding: 13px 0; }
.cs-gift + .cs-gift { border-top: 1px solid var(--mm-gris-nube); }
.cs-gift .csg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cs-gift .csg-who { font-size: 13px; font-weight: 600; color: var(--mm-grafito); }
.cs-gift .csg-amt {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--mm-grafito);
}
.cs-gift ul { margin-top: 6px; display: grid; gap: 3px; }
.cs-gift li {
  list-style: none;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mm-gris);
}
.cs-gift .csg-date {
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mm-verde-confirmacion);
}

.cs-rows { padding: 14px 20px; border-top: var(--hairline); display: grid; gap: 9px; }
.cs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--mm-gris-texto);
}
.cs-row .v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--mm-grafito);
}
.cs-row .v.free { color: var(--mm-verde-confirmacion); }

.cs-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-top: var(--hairline);
  background: var(--mm-perla-calida);
}
.cs-total .k { font-size: 14px; font-weight: 600; color: var(--mm-grafito); }
.cs-total .v {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--mm-grafito);
}

.cs-place { padding: 18px 20px 20px; }
.btn-place {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.22s;
}
.btn-place:hover { background: var(--mm-morado-accion); }
.btn-place:disabled { background: var(--mm-gris-seda); pointer-events: none; }

/* Variante del botón cuando el pago sale del sitio: Grafito, no
   morado. El morado es la acción de moreAmore; esta acción es un
   traspaso. En producción el plugin de Bold renderiza su propio
   botón acá — configurar la variante oscura en el panel de Bold. */
.btn-place.is-bold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--mm-grafito);
}
.btn-place.is-bold:hover { background: #000; }
.btn-place.is-bold .bold-mark {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}
.cs-legal {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--mm-gris);
  text-align: center;
}
.cs-legal a { text-decoration: underline; }

.cs-trust { padding: 14px 20px 18px; border-top: var(--hairline); display: grid; gap: 7px; }
.cs-trust li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  align-items: start;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--mm-gris-texto);
}
.cs-trust svg { color: var(--mm-verde-confirmacion); transform: translateY(3px); }

/* ═══════════════════════════════════════════════════════════════
   9 · FOOTER MÍNIMO
   ═══════════════════════════════════════════════════════════════ */
.co-footer {
  padding: 22px 0 34px;
  border-top: var(--hairline);
  background: var(--mm-blanco-perla);
}
.co-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mm-gris);
}
.co-footer a:hover { color: var(--mm-grafito); }
.co-footer .cf-links { display: flex; gap: 18px; }

/* ═══════════════════════════════════════════════════════════════
   10 · BARRA DE PAGO MÓVIL
   ═══════════════════════════════════════════════════════════════ */
.place-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  border-top: var(--hairline);
}
.place-dock .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mm-gris);
}
.place-dock .v {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-grafito);
}
.place-dock .btn-place { flex: 1; width: auto; padding: 13px; font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .co-layout { grid-template-columns: 1fr 330px; gap: 30px; }
  .co-sec-body { padding-left: 0; }
}

@media (max-width: 900px) {
  .co-layout { grid-template-columns: 1fr; gap: 32px; }
  .co-summary { position: static; order: 2; }
  .co-form { order: 1; }
  .co-main { padding-bottom: 96px; }
  .place-dock { display: flex; }
  .cs-place { display: none; }
}

@media (max-width: 680px) {
  .co-header-inner { height: 58px; gap: 12px; }
  .co-logo img { height: 28px; }
  .co-back span { display: none; }
  .co-title h1 { font-size: 21px; }
  .fields.two, .fields.three { grid-template-columns: 1fr; }
  .field.span2 { grid-column: auto; }
  .co-sec-head { grid-template-columns: 24px 1fr; gap: 10px; }
  .cg-head .cg-what { margin-left: 0; width: 100%; text-align: left; }
  .day-opts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .co-dates { grid-template-columns: 20px 1fr; }
  .handoff { padding: 18px 18px 20px; }
  .ho-head { grid-template-columns: 1fr; gap: 12px; }
  .ho-mark { justify-self: start; }
  .co-dates .cd-fix { grid-column: 2; justify-self: start; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}