/* ============================================================
   Emilio Alberini - Fortalecimiento de la Fe | Estilos
   ============================================================ */

:root {
  --bg: #000000;
  --bg-panel: #0D0E0D;
  --red: #0D0E0D;
  --card-border: rgba(212, 175, 55, 0.15);
  --red-bright: #D4AF37;
  --gold-subtle: #D4AF37;
  --gold-light: #F3E5AB;
  --wine: #1A1C1A;
  --panel-wine: #121311;
  --white: #F3F4F6;
  --white-dim: #9CA3AF;
  --danger: #E0635F;
  --success: #8fbc9a;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-rasputin: 'Rasputin', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1100px, 92%); margin-inline: auto; }

.container--narrow { width: min(760px, 92%); }

/* ---------- Tipografía ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.15; max-width: 16ch; }

h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: 12px 0 14px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gold-subtle);
  font-weight: 700;
}

.lead-text { color: var(--white-dim); max-width: 60ch; margin: 0 auto 2.2rem; text-align: center; }

.center { text-align: center; margin-top: 2.4rem; }

/* ---------- Botones CTA ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid var(--gold-subtle);
  border-radius: 2px;
  background: linear-gradient(135deg, var(--red) 0%, #8a6f2e 100%);
  color: #F5F2EF;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.cta-big { padding: 18px 40px; font-size: 16px; }

.cta--block { width: 100%; justify-content: center; }

.cta:disabled { opacity: 0.6; cursor: wait; transform: none; }

.link-red {
  color: var(--gold-subtle);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.link-red:hover { border-color: var(--gold-subtle); }

/* ---------- Barra superior ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: #000000;
  /* La linea dorada va abajo de la barra, como las que separan las secciones
     del resto de la pagina. Antes era un cian (#00e5ff) que era lo unico
     celeste del sitio y quedaba pegado al borde de la ventana. */
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

/* El nombre ya no esta en el header, asi que el menu va centrado. En el movil
   los links pasan a ser un desplegable y lo que queda en el medio es el
   boton de menu, que tambien queda centrado. */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.topbar__left a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s ease;
}

.topbar__left a:first-child {
  color: #ffffff;
}

.topbar__left a:hover {
  color: #ffffff;
}

.topbar__right .topbar__phone,
.topbar__right .topbar__toggle {
  display: none;
}

.topbar__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.topbar__title {
  font-family: 'Playfair Display', serif;
  color: #ffffff;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

.topbar__subtitle {
  font-family: 'Playfair Display', serif;
  color: rgba(255,255,255,0.85);
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.topbar__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }

.topbar__toggle span { display: block; width: 24px; height: 2px; background: var(--gold-subtle); margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; }

.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* La barra fija mide 62px. Con 7rem el boton de WhatsApp quedaba a 50px de
     la barra, con un vacio raro en el medio de la pantalla. Bajando a 5rem
     quedan 18px: pegado al header, sin tocarlo. */
  padding: 5rem 0 1.5rem;
  overflow: hidden;
  background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%), var(--bg);
}

.hero__glow {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(90, 18, 32, 0.35), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__lead {
  color: var(--white-dim);
  max-width: 56ch;
  margin: 1.4rem 0 2.4rem;
  font-size: 1.05rem;
}

.hero__actions { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; }

/* ---------- Animaciones fade-up ---------- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.fade { opacity: 0; animation: fade-up 1s ease-out forwards; }
.fade--1 { animation-delay: 0.2s; }
.fade--2 { animation-delay: 0.45s; }
.fade--3 { animation-delay: 0.7s; }
.fade--4 { animation-delay: 0.95s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Secciones ---------- */

.section { padding: 6rem 0; }

/* "Quién te acompaña" arranca con el nombre y la foto, sin titulo de seccion
   arriba. Con el aire general de 6rem el boton de WhatsApp quedaba a 120px de
   la foto, con un vacio raro en el medio. Sin padding arriba queda pegada. */
#quien {
  padding-top: 0;
}

/* El bloque de "Hablá directamente conmigo" es la segunda mitad del contacto:
   el formulario de arriba y el WhatsApp de abajo son lo mismo. Con el aire
   general de 6rem quedaban 192px de vacio entre la caja del formulario y el
   titulo, y se leia como dos secciones distintas. Con 2rem arriba y 2rem abajo
   del formulario quedan 64px: pegadas, pero respirando. */
#contacto {
  padding-bottom: 2rem;
}

#whatsapp-final {
  padding-top: 2rem;
}

/* Ya no hay secciones con fondo propio: antes .section--alt pintaba un gris
   claro con filetes dorados arriba y abajo, y eso se leia como un rectangulo
   metido alrededor del contenido. Todas las secciones van sobre el negro de la
   pagina y se separan por el aire, no por un marco. */

/* ---------- Casos ---------- */

.cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin: 2.5rem 0;
}

.case {
  background: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 4px;
  padding: 1.6rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.case:hover { border-color: var(--gold-subtle); transform: translateY(-3px); }

.case h3 { font-size: 1.08rem; margin-bottom: 0.5rem; color: var(--gold-subtle); }

.case p { color: var(--white-dim); font-size: 0.92rem; }

/* ---------- Checklist ---------- */

.checklist { list-style: none; margin: 2rem 0 0; }

.checklist li {
  position: relative;
  padding: 0.55rem 0 0.55rem 2rem;
  color: var(--white);
}

.checklist li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--gold-subtle);
}

/* ---------- Stats ---------- */

.stats {
  /* Esta banda se queda como estaba: con su fondo propio y los filetes
     dorados arriba y abajo. Es la unica que se separa del negro de la pagina,
     y funciona: separa los numeros del resto sin agregar otro cuadro mas. */
  background: linear-gradient(135deg, var(--panel-wine) 0%, var(--bg-panel) 100%);
  border-block: 1px solid rgba(212, 175, 55, 0.2);
  padding: 3.5rem 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--gold-subtle);
}

.stat__label { color: var(--white-dim); font-size: 0.9rem; }

/* ---------- Bloques de servicio ---------- */

.service {
  background: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 6px;
  padding: 2.6rem 2.4rem;
  margin-bottom: 2rem;
}

.service--wine {
  background: linear-gradient(160deg, var(--panel-wine) 0%, var(--bg-panel) 90%);
  border-color: rgba(90, 18, 32, 0.6);
}

.service p { color: var(--white-dim); margin-bottom: 1rem; }

.service__note {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--gold-subtle) !important;
}

/* ---------- Testimonios ---------- */

.testimonials {
  display: grid;
  /* 215px y no 280px: el contenedor de la seccion mide 722px y con 280px de
     minimo entran solo 2 columnas, asi que los 3 testimonios quedaban en fila
     de 2 mas uno solo, que se ve descuadrado. Con 215px entran 3 justas y los
     3 van en una fila limpia. En pantallas angostas sigue bajando a 2 o 1. */
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.4rem;
  margin-top: 2.5rem;
}

/* Los testimonios 4 al 9 arrancan ocultos: se ven solo los primeros 3 y el
   boton "Ver mas" los destapa. Con display:none la grilla los recalcula sola,
   asi que no quedan huecos vacios. */
.testimonial.is-oculto {
  display: none;
}

/* Pie de los testimonios: el boton de "ver mas" y el contador. */
.testimonials__pie {
  margin-top: 2.2rem;
  text-align: center;
}

.btn-ver-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1px solid var(--gold-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-subtle);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-ver-mas:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--white);
}

.testimonials__contador {
  margin: 0.8rem 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}

/* Boton de Facebook, del mismo tamaño y forma pastilla que el de WhatsApp. */
.redes {
  margin: 1.6rem 0 0;
}

.cta--fb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: #1877f2;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.22);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cta--fb svg {
  width: 19px;
  height: 19px;
  fill: #fff;
  flex-shrink: 0;
}

.cta--fb:hover {
  box-shadow: 0 6px 22px rgba(24, 119, 242, 0.34);
  transform: translateY(-1px);
}

.testimonial {
  /* Mismo fondo que .case. Antes era var(--bg) (negro puro) porque las secciones
     tenian un gris claro de fondo y la tarjeta se recortaba al reves. Ahora que
     la pagina es toda negra, con fondo negro la tarjeta desaparece y solo queda
     el filete dorado. */
  background: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.stars { color: var(--gold-subtle); letter-spacing: 0.15em; }

.testimonial blockquote { color: var(--white); font-size: 0.95rem; font-style: italic; }

.testimonial figcaption { color: var(--white-dim); font-size: 0.85rem; font-weight: 700; }

/* ---------- Sobre / quién acompaña ---------- */

.about p { color: var(--white-dim); margin-bottom: 1rem; }

.about__sign {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-subtle) !important;
  font-size: 1.15rem;
  margin-top: 1.6rem;
}

.about__tags { color: var(--gold-subtle) !important; font-size: 0.85rem; letter-spacing: 0.08em; }


/* ---------- Formularios ---------- */

.form {
  background: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 6px;
  padding: 2.4rem;
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.field { margin-bottom: 1.2rem; display: flex; flex-direction: column; }

.field label { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.45rem; }

.field input,
.field select,
.field textarea {
  background: var(--bg);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.78rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.field textarea { resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-subtle);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.field input.invalid,
.field select.invalid,
.field textarea.invalid { border-color: var(--danger); }

.field__error { color: var(--danger); font-size: 0.78rem; min-height: 1em; margin-top: 0.3rem; }

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--white-dim);
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.check input { margin-top: 0.25rem; accent-color: var(--gold-subtle); width: auto; }

.form__success {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--success);
  background: rgba(143, 188, 154, 0.08);
  color: var(--success);
  border-radius: 4px;
  font-size: 0.92rem;
}

/* Aviso de que el envío falló. Mismo bloque que el de éxito, pero en rojo. */
.form__error {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--danger);
  background: rgba(197, 90, 90, 0.08);
  color: var(--danger);
  border-radius: 4px;
  font-size: 0.92rem;
}

/* Mientras se envía, el botón no se puede apretar dos veces. */
.cta[disabled] { opacity: 0.6; cursor: progress; }

/* Avisos de la pagina de tarjeta: error y enviado. */
.cardpage__nota {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--success);
  background: rgba(143, 188, 154, 0.08);
  color: var(--success);
  border-radius: 4px;
  font-size: 0.92rem;
}

.cardpage__nota--error {
  border-color: var(--danger);
  background: rgba(197, 90, 90, 0.08);
  color: var(--danger);
}

/* Boton de pago bloqueado mientras se envia. */
.btn-pagar[disabled] { opacity: 0.6; cursor: progress; }

/* Pagina de gracias */
.gracias__texto { margin: 0 0 0.9rem; line-height: 1.6; }
.gracias__texto--chico { font-size: 0.88rem; opacity: 0.8; }
.gracias__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.4rem;
}

/* Honeypot: tiene que existir en el HTML pero no verse nunca. No usar
   display:none ni visibility:hidden, porque algunos bots los detectan y lo
   saltan. Se tira para afuera de la pantalla. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Campos de tarjeta */

.input-prefix { position: relative; }

.input-prefix span {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white-dim);
  font-weight: 700;
}

.input-prefix input { padding-left: 1.9rem; }

.card-number { position: relative; }

.card-number input { padding-right: 4.4rem; }

.card-brand {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-subtle);
  text-transform: uppercase;
}

.demo-note {
  background: rgba(212, 175, 55, 0.07);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  color: var(--white-dim);
  margin-bottom: 1.4rem;
}

.demo-note strong { color: var(--gold-subtle); }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  padding: 3.5rem 0;
  background: var(--bg-panel);
}

.footer__inner { display: grid; gap: 1.1rem; text-align: center; justify-items: center; }

.footer__brand { font-family: var(--font-display); color: var(--gold-subtle); font-size: 1.2rem; font-weight: 700; }

.footer__tag, .footer__copy { color: var(--white-dim); font-size: 0.85rem; }

.footer__note { color: var(--gold-subtle); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }

.footer__links { display: flex; gap: 1.4rem; }

.footer__links a { color: var(--white-dim); text-decoration: none; font-size: 0.9rem; }

.footer__links a:hover { color: var(--gold-subtle); }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .topbar__toggle { display: block; }

  .topbar__links {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-panel);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .topbar__links.open { max-height: 320px; }

  .topbar__links a { padding: 1rem 1.5rem; width: 100%; border-top: 1px solid rgba(212, 175, 55, 0.12); text-align: center; }

  .topbar__cta { border-inline: 0; border-radius: 0; }

  .hero { padding: 5rem 0 1rem; }

  .section { padding: 4.2rem 0; }

  .form { padding: 1.6rem; }

  .form__row { grid-template-columns: 1fr; gap: 0; }

  .service { padding: 1.8rem 1.4rem; }

  .cta-big { padding: 16px 30px; }
}


/* ---------- Trabajos (galerías) ---------- */

.work {
  background: var(--bg-panel);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2.6rem;
}

.work__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, 0.5);
}

.work__gallery--2 { grid-template-columns: 1fr 1fr; }

.work__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work__body { padding: 2.4rem 2.2rem; }

.work__body h3 {
  font-size: 1.5rem;
  color: var(--gold-subtle);
  margin: 8px 0 14px;
}

.work__body p { color: var(--white-dim); margin-bottom: 1rem; }

.work__note {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--gold-subtle) !important;
}

/* ---------- Video ---------- */

.video-frame {
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
}

.video-frame video {
  width: 100%;
  display: block;
  max-height: 70vh;
}

@media (max-width: 720px) {
  .work__gallery--2 { grid-template-columns: 1fr; }
  .work__body { padding: 1.6rem 1.3rem; }
}


/* ---------- Botón flotante de WhatsApp ---------- */

.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: wa-in 0.6s ease-out 0.3s both;
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
  fill: #ffffff;
  flex-shrink: 0;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 36px rgba(37, 211, 102, 0.65);
}

@keyframes wa-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    padding: 11px 16px;
    font-size: 0.95rem;
  }
  .whatsapp-float svg { width: 22px; height: 22px; }
}


/* ---------- Botón grande de WhatsApp en el hero ----------

   Deliberado: el boton no late ni crece. Antes tenia un pulso infinito
   (wa-pulse) que hacia que la pagina se sintiera urgente y ruidosa, y una
   sombra verde fuerte. Ahora es una pastilla chica con una sombra apenas
   perceptible: llama la atencion igual, pero no grita. */

.hero__wa {
  margin-top: 0;
  display: flex;
  justify-content: center;
}

.hero__wa a {
  background: linear-gradient(135deg, #22c05e 0%, #128c4a 100%) !important;
  /* Borde al 30% en vez de blanco plein: separa el boton del fondo oscuro sin
     dibujarse como un contorno duro. */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--white) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  padding: 13px 30px !important;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.18) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hero__wa a svg {
  width: 20px;
  height: 20px;
  fill: var(--white);
  flex-shrink: 0;
}

.hero__wa a:hover {
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.28) !important;
  transform: translateY(-1px);
}

.fade--5 { animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  .hero__wa a { transition: none; }
}

@media (max-width: 720px) {
  .hero__wa a { padding: 12px 26px !important; font-size: 0.92rem !important; }
}

/* Texto que esta en la pagina pero no se ve. Se usa para dejar el h1 con el
   nombre del sitio, que Google lee, sin que se vea en el header.
   No usar display:none ni visibility:hidden: los buscadores los descartan. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Centrado general y WhatsApp final ---------- */

body { text-align: center; }

.field, .check, .checklist { text-align: left; }

.checklist { display: inline-block; margin-inline: auto; }

.field input,
.field select,
.field textarea { text-align: left; }

.case, .testimonial, .work__body, .service, .about { text-align: center; }

.wa-number { margin-top: 1.6rem; font-size: 1.3rem; font-weight: 700; }

.wa-number a { color: var(--gold-subtle); text-decoration: none; }

/* ---------- Tarjeta de pago (réplica godaddysites) ---------- */
.pago-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.pago-card {
  background: #ffffff;
  border-radius: 26px;
  max-width: 420px;
  width: 100%;
  padding: 34px 32px 30px;
  box-shadow: 0 20px 60px rgba(18,36,31,0.18);
  position: relative;
  margin: 0 auto;
}
.pago-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.pago-section-label {
  margin: 20px 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6b64;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pago-card-logos {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pago-payment-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.pago-pay-option {
  padding: 12px;
  border: 1.5px solid #e4ece7;
  border-radius: 12px;
  background: #fafcfa;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #5b6b64;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pago-pay-option.active {
  background: #0f2e28;
  color: #fff;
  border-color: #0f2e28;
}
.pago-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
@media (max-width: 380px) {
  .pago-field-grid { grid-template-columns: 1fr; }
}
.pago-field {
  position: relative;
  margin-top: 16px;
}
.pago-field input {
  width: 100%;
  padding: 18px 14px 8px;
  border: 1.5px solid #e4ece7;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #12241f;
  background: #fafcfa;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pago-field input:focus {
  outline: none;
  border-color: #6bb8dc;
  box-shadow: 0 0 0 3px rgba(107,184,220,0.2);
  background: #fff;
}
.pago-field label {
  position: absolute;
  left: 15px;
  top: 14px;
  font-size: 0.95rem;
  color: #5b6b64;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.15s ease, color 0.15s ease, top 0.15s ease;
}
.pago-field input:focus + label,
.pago-field input:not(:placeholder-shown) + label {
  top: 7px;
  transform: scale(0.72);
  color: #2f7ca0;
}
button#submitBtn {
  margin-top: 26px;
  width: 100%;
  padding: 15px;
  background: #0f2e28;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
button#submitBtn:hover { background: #193f37; }
button#submitBtn:active { transform: scale(0.99); }
button#submitBtn:focus-visible {
  outline: 2px solid #0f2e28;
  outline-offset: 3px;
}
.pago-status {
  margin-top: 14px;
  font-size: 0.88rem;
  text-align: center;
  display: none;
}
.pago-status.error-box {
  background: #fef3f2;
  color: #b42318;
  border: 1.5px solid #fecdca;
  padding: 24px 20px;
  border-radius: 16px;
  margin-top: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.3s ease;
}
.pago-status.error-box strong {
  font-size: 1.1rem;
  color: #b42318;
}
.pago-status.error-box span {
  font-size: 0.9rem;
  color: #d92d20;
  line-height: 1.4;
}
.pago-retry-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px;
  background: #d92d20;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pago-retry-btn:hover { background: #b42318; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.wa-number a:hover { color: var(--white); }


.about__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 12px auto 14px;
}

/* ---------- Foto circular del santero ---------- */

.about__photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 3px solid var(--red);
  box-shadow: 0 0 0 2px var(--gold-subtle), 0 10px 40px rgba(212, 175, 55, 0.35);
  margin: 0 auto 1.6rem;
  display: block;
}

.about__years {
  color: var(--gold-subtle) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin-bottom: 1.4rem;
}

@media (max-width: 720px) {
  .about__photo { width: 160px; height: 160px; }
}

/* ---------- Tel�fono en el header ---------- */

.topbar__phone {
  color: var(--gold-subtle);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

.topbar__phone:hover { color: var(--white); }

@media (max-width: 720px) {
  .topbar__phone { display: none; }
}

/* ---------- Email de contacto ---------- */

.contact-mail {
  margin: -0.6rem 0 2rem;
  color: var(--white-dim);
}

.contact-mail a {
  color: var(--gold-subtle);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.contact-mail a:hover { color: var(--white); border-color: var(--gold-subtle); }

/* ---------- Divisores elegantes entre secciones ---------- */

.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(680px, 86%);
  /* El separador va entre dos secciones, y cada una ya trae 6rem de aire. Con
     eso el guion quedaba con 96px arriba y 96px abajo: 192px de vacio alrededor
     de una raya de 1px. El margen negativo se come la mitad de cada lado y lo
     deja a 48px, parejo siempre, sin tocar el aire de las secciones. */
  margin: -3rem auto;
}

.divider span { flex: 1; height: 1px; }

.divider span:first-child {
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6));
}

.divider span:last-child {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.6), transparent);
}

.divider em {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--gold-subtle);
}


/* ---------- Sección Emilio ----------

   Sin aire arriba: el boton de WhatsApp es lo ultimo del hero y esta seccion
   arranca con el nombre y la foto. Con los 6rem generales quedaban 120px de
   vacio entre los dos, que se leia como si fueran bloques distintos. El aire
   que los separa es el que ya tiene el hero abajo (1.5rem). El resto de las
   secciones si mantienen los 6rem, porque esas van con contenido arriba. */

#quien .about__photo {
  margin-top: 0.4rem;
}

/* ============================================================
   PÁGINA DE PAGOS — Réplica del link de pago de referencia
   ============================================================ */

.pago-body {
  background: #fff;
  color: #1f2233;
  text-align: left;
}

.pago-page {
  padding: 2.5rem 1.5rem 4rem;
  background: #fff;
}

.pago-page__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}

.pago-page__title {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  color: #232135;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  max-width: none;
}

.pago-page__amount {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(2.75rem, 6vw, 3.5rem);
  font-weight: 700;
  color: #6b6f8d;
  letter-spacing: -0.01em;
}
.pago-page__amount:focus {
  color: #6b6f8d;
}

/* --- Card de pago (derecha) --- */
.pago-summary {
  background: #fff;
  border: 1px solid #e6e7ee;
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.35rem;
  box-shadow: 0 1px 2px rgba(31, 34, 51, 0.04);
}

.pago-summary__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.pago-summary__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #1f2233;
}

.pago-summary__name {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  color: #1f2233;
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pago-summary__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
}

.pago-summary__link {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #a2a5bd;
  font-size: 0.92rem;
  font-weight: 400;
}

.pago-summary__price {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #6b6f8d;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
}

/* --- Botón continuar (derecha, debajo de la card) --- */
.pago-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

.pago-continue {
  border: 0;
  border-radius: 9px;
  padding: 0.85rem 1.9rem;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  background: #dcdce9;
  color: #ffffff;
  cursor: not-allowed;
  transition: background .15s ease, color .15s ease;
}
.pago-continue:not(:disabled) {
  background: #6b6f8d;
  color: #fff;
  cursor: pointer;
}
.pago-continue:not(:disabled):hover {
  background: #575b78;
}

@media (max-width: 860px) {
  /* El gap y las columnas de la version de grid quedaron cuando .pago-page__inner
     era un grid de dos columnas. Ahora es una sola columna flex: el gap se
     suma entre cada bloque y separa el titulo, la foto y el monto mas de lo que
     muestra la referencia. */
  .pago-page__inner {
    gap: 0;
  }
}

/* ============================================================
   PÁGINA CHECKOUT — Réplica de Mercado Pago (paso 2)
   ============================================================ */

.checkout-body {
  background: #ededed;
  color: #333;
  text-align: left;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.checkout {
  min-height: 100vh;
  padding: 2.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
}

.checkout__inner {
  max-width: 930px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

.checkout__q {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #262626;
  margin: 0 0 2rem;
  max-width: none;
}

.checkout__section + .checkout__section {
  margin-top: 2.75rem;
}

.checkout__section-title {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #333;
  margin: 0 0 1.1rem;
}

/* --- Cards de opciones de pago --- */
.mp-options {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.mp-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  transition: background .12s ease;
}
.mp-row:hover {
  background: #fafafa;
}

.mp-row--divided {
  border-top: 1px solid #ededed;
}

.mp-row__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mp-row__title {
  font-size: 0.95rem;
  color: #333;
}
.mp-row__sub {
  font-size: 0.85rem;
  color: #8a8a8a;
}

.mp-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mp-icon--line {
  background: #fff;
  border: 1px solid #e2e2e2;
}

.mp-chevron {
  color: #bdbdbd;
  flex-shrink: 0;
}

/* --- Columna derecha: comercio + detalles --- */
.checkout__merchant {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.checkout__merchant img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #1f2233;
}
.checkout__merchant span {
  font-weight: 700;
  font-size: 1.05rem;
  color: #262626;
}

.checkout__details {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem 1.4rem 1.35rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.checkout__details-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
  margin: 0 0 1rem;
}
.checkout__details-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #444;
}

/* --- Pie: procesado por Mercado Pago --- */
.checkout__footer {
  max-width: 930px;
  width: 100%;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid #dcdcdc;
}
.checkout__footer p {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.78rem;
  color: #9a9a9a;
  margin: 0;
}

@media (max-width: 860px) {
  .checkout__inner {
    grid-template-columns: 1fr;
  }
  .checkout__details {
    max-width: 420px;
  }
}

/* ============================================================
   PÁGINA TARJETA — Réplica de Mercado Pago (paso 3)
   ============================================================ */

.cardpage__title {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #262626;
  margin: 0 0 1.25rem;
  max-width: none;
}

.cardbox {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.9rem 1.9rem 2rem;
}

.tfield {
  margin-bottom: 1.4rem;
}
.tfield:last-child {
  margin-bottom: 0;
}

.tfield__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.45rem;
}

.tfield__help {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: #999;
}

.tinput {
  width: 100%;
  height: 42px;
  padding: 0 0.9rem;
  border: 1.5px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  color: #333;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tinput::placeholder {
  color: #a3a3a3;
}
.tinput:focus {
  border-color: #3483fa;
  box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.18);
}
.tinput.is-error {
  border-color: #e04b4b;
}

.tinput-wrap {
  position: relative;
}
.tinput-wrap .tinput {
  padding-right: 3rem;
}
.tinput__icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.tinput__help {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #3483fa;
  color: #3483fa;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.tfield-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.tdoc {
  display: flex;
  border: 1.5px solid #e6e6e6;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tdoc:focus-within {
  border-color: #3483fa;
  box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.18);
}
.tdoc.is-error {
  border-color: #e04b4b;
}
.tdoc__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.7rem center;
  padding: 0 2rem 0 0.9rem;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  border-right: 1.5px solid #e6e6e6;
}
.tdoc__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 0 0.9rem;
  height: 42px;
  background: transparent;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  color: #333;
}
.tdoc__input::placeholder {
  color: #a3a3a3;
}

/* --- Botones Volver / Continuar --- */
.cardpage__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
.btn-volver,
.btn-pagar {
  border: 0;
  border-radius: 6px;
  padding: 0.68rem 1.5rem;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-volver {
  background: #dce8fb;
  color: #3483fa;
}
.btn-volver:hover {
  background: #c9dcf8;
}
.btn-pagar {
  background: #3483fa;
  color: #fff;
}
.btn-pagar:hover {
  background: #2968c8;
}

@media (max-width: 480px) {
  .tfield-row {
    grid-template-columns: 1fr;
  }
}




/* ============================================================================
   PAGO EN CELULAR — copiado del link de pago de Mercado Pago
   ----------------------------------------------------------------------------
   Las pantallas de referencia estan en C:\Users\PC\Desktop\mp (4 capturas).
   Este bloque esta al final a proposito: pisa los estilos de pago que hay mas
   arriba sin tocar el resto del sitio (el index usa la misma hoja).

   Lo que cambia respecto de como estaba:
     - los botones ocupaban el ancho del texto (90 px). En MP son de punta a
       punta, uno arriba del otro.
     - el titulo y el pie quedaban a la izquierda. En MP van centrados.
     - la foto con el nombre aparecian ABAJO, despues de las opciones. En MP
       son una barra fija arriba, y abajo del nombre va la barra con el monto.
     - el monto era gris de 48 px. En MP es azul y de 64 px.
     - el boton de Continuar no llegaba al fondo de la pantalla.
   ============================================================================ */

body.pago-body,
body.checkout-body {
  background: #ededed;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 1. Barra de arriba: foto y nombre, fija al scrollear ---------- */

.checkout__merchant {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -40px -24px 0;
  padding: 13px 16px;
  background: #fff;
  border-bottom: 1px solid #ededed;
}

.checkout__merchant img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.checkout__merchant span {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* ---------- 2. Barra del monto, tambien fija ---------- */

.checkout__details {
  position: -webkit-sticky;
  position: sticky;
  top: 58px;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px 24px;
  padding: 15px 16px;
  background: #fff;
  border-bottom: 1px solid #ededed;
  border-radius: 0;
  box-shadow: none;
}

/* En la referencia la barra solo dice "Link de pago" y el monto: el titulo
   "Detalles del pago" no aparece. */
.checkout__details-title { display: none; }

.checkout__details-row {
  display: contents;
}

.checkout__details-row span:first-child {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.checkout__details-row span:last-child,
.checkout__details-row #montoCheckout {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

/* ---------- 3. Titulos centrados ---------- */

.checkout__q,
.cardpage__title {
  display: block;
  margin: 0 0 24px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #333;
}

/* ---------- 4. Filas de metodo de pago ---------- */

.checkout__section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.mp-options {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.mp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 16px;
}

/* La segunda fila de la tarjeta lleva una linea que las separa. */
.mp-row--divided {
  border-top: 1px solid #ededed;
}

.mp-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mp-row__title {
  font-size: 16px;
  font-weight: 400;
  color: #333;
}

.mp-row__sub {
  font-size: 14px;
  color: #999;
}

/* El icono va sobre un circulo claro, como en la captura. */
.mp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #f2f2f2;
}

/* ---------- 5. Botones: de punta a punta, uno arriba del otro ---------- */

.cardpage__actions,
.pago-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* En el HTML Volver va antes que Pagar, que es lo correcto en horizontal
   (Volver a la izquierda, Pagar a la derecha). Apilados hay que dar vuelta el
   orden para que el azul quede arriba, como en la referencia. */
.cardpage__actions {
  flex-direction: column-reverse;
}

.btn-pagar,
.btn-volver,
.pago-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-pagar,
.pago-continue:not(:disabled) {
  background: #3483fa;
  color: #fff;
}

/* El boton Continuar de la pantalla del monto. Desactivado se ve lavanda con
   el texto en gris, no blanco: es el estado que muestra la referencia con el
   monto en cero. */
.pago-continue:disabled {
  background: #d3d4e8;
  color: #8f8fa7;
  cursor: default;
}

.btn-volver {
  background: #e0e4ef;
  color: #3483fa;
}

/* ---------- 6. Tarjeta de datos ---------- */

.cardbox {
  padding: 24px 20px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Las etiquetas van arriba del campo, en tamano normal, no en versalita. */
.tfield__label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

.tinput {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  color: #333;
}

.tinput-wrap .tinput { padding-right: 46px; }

/* El foco de Mercado Pago es un borde azul de 2 px, sin sombra. */
.tinput:focus {
  outline: 0;
  border: 2px solid #3483fa;
  padding: 0 13px;
}

.tinput.is-error {
  border-color: #e0635f;
}

.tinput::placeholder { color: #b3b3b3; }

.tfield__help {
  margin-top: 5px;
  font-size: 13px;
  color: #999;
}

.tfield { margin-bottom: 20px; }

.tinput__help {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #3483fa;
  color: #3483fa;
  font-size: 13px;
}

.tdoc {
  display: flex;
  height: 46px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.tdoc:focus-within { border-color: #3483fa; }

.tdoc__select {
  width: auto;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid #d9d9d9;
  font-size: 16px;
  color: #333;
  background: #fff;
}

.tdoc__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  font-size: 16px;
  color: #333;
}

/* ---------- 7. Avisos ---------- */

.cardpage__nota {
  margin-top: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* ---------- 8. Pie centrado ---------- */

.checkout__footer p {
  margin: 24px 0 8px;
  font-size: 13px;
  color: #999;
  text-align: center;
}

/* ---------- 9. Pantalla 1: el monto y el boton al fondo ----------

   Todas las medidas de este bloque salen medidas sobre la captura
   5089090918240947544.jpg, no a ojo. La captura es de un celular de 390 px de
   ancho, asi que se escalo por 590/390 y de ahi salieron los valores.

   Que quedo:

   margen lateral     16 px   (la foto y el boton arrancan en el mismo x)
   alto del boton      45 px
   radio del boton      8 px
   letra del titulo    23 px
   letra del monto     54 px
   letra del nombre    16 px
   diametro del avatar 29 px
*/

.pago-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* El padding de mas abajo esta en .pago-page__inner. Si queda aqui, el
     boton nunca llega al pie de la pantalla. */
  padding: 0;
}

.pago-page__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 30px 16px 16px;
}

/* En la captura el titulo va solo, arriba a la izquierda. Negro puro, no gris. */
.pago-page__title {
  margin: 0 0 28px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: #000;
}

/* La foto con el nombre no va en una tarjeta: es solo foto y nombre, entre el
   titulo y el monto. Hay que apagar el borde y la sombra de la tarjeta vieja,
   sino alrededor de la foto queda dibujado un rectangulo. */
.pago-summary {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pago-summary__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pago-summary__avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
}

.pago-summary__name {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* El monto va debajo de la foto con el nombre, gigante y a la izquierda. Es
   violeta pizarra, no el azul de los botones: hay que distinguir el numero que
   se edita del boton de abajo. */
.pago-page__amount {
  width: 100%;
  height: auto;
  margin-top: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  color: #4e4e74;
}

/* El boton se va al pie de la pantalla, no queda pegado al contenido. Ocupa
   todo el ancho de la columna, como en la referencia. */
.pago-actions {
  margin-top: auto;
  padding-top: 32px;
}

.pago-continue {
  border: 0;
  font-family: inherit;
  width: 100%;
  height: 45px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  /* Desactivado: lavanda con texto gris, tal cual la referencia. */
  background: #d3d4e8;
  color: #8f8fa7;
}

.pago-continue:not(:disabled) {
  background: #3483fa;
  color: #fff;
}

/* ---------- 10. Espaciado general ----------

   El contenedor NO lleva ancho maximo: las dos barras de arriba tienen que
   llegar de borde a borde, como en la referencia. El ancho acotado va en el
   contenido, que es lo que se lee. */

.checkout {
  max-width: none;
  margin: 0;
  padding: 0;
}

.checkout__inner {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.checkout__right { display: none; }

.checkout__footer {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

/* Las barras van a todo el ancho de la pantalla, sin margenes negativos.
   El width:100% y el max-width:none son a proposito: mas arriba estas mismas
   clases tenian un ancho maximo que las dejaba angostas. */
.checkout__merchant,
.checkout__details {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
}

.checkout__details {
  margin-bottom: 4px;
}

/* En la pantalla 1 el contenedor no lleva padding doble. */
.pago-page .checkout { padding: 0; }