/* itsmarianaus.com · página de captura: guía gratis "Tu primer presupuesto"
   Un solo objetivo: que la persona deje su nombre y su correo.
   Colores de tu marca: crema, rubor de Glow Up, malva, vino, mantequilla y coral. */
:root {
  --crema: #FBF6F1;
  --papel: #FFFDFB;
  --rubor: #F8E3DE;
  --rubor-2: #E9C9C4;
  --malva: #7E6266;
  --vino: #6E2233;
  --vino-osc: #3E1520;
  --coral: #B5473F;
  --mantequilla: #EED9A4;
  --tinta: #5E4A4C;
  --linea: rgba(110, 34, 51, .16);

  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --firma: "Pinyon Script", "Snell Roundhand", cursive;
  --gutter: clamp(16px, 5vw, 48px);
  --ancho: 1200px;
  --radio: 18px;
  --sombra: 0 26px 50px -26px rgba(62, 21, 32, .4);
  --suave: cubic-bezier(.2, .8, .2, 1);
  --firme: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--vino);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- piezas comunes ---------- */
.pastilla {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  padding: 9px 18px; border-radius: 999px;
  background: var(--rubor); color: var(--coral);
}
.pastilla::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
@media (max-width: 420px) { .pastilla { font-size: 11px; letter-spacing: .12em; padding: 8px 14px; } }

.boton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font: 800 13px/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase;
  color: var(--crema); background: var(--vino);
  border: 1.5px solid var(--vino); border-radius: 999px;
  padding: 19px 32px; min-height: 58px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(110, 34, 51, .55);
  transition: color .35s var(--suave), transform .35s var(--suave), box-shadow .35s var(--suave);
}
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--coral); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--firme);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(181, 71, 63, .6); }
.boton:hover::before { transform: scaleX(1); transform-origin: left; }
.boton--contorno { background: transparent; color: var(--vino); padding: 12px 22px; min-height: 46px; font-size: 12px; box-shadow: none; white-space: nowrap; }
.boton--contorno:hover { color: var(--crema); border-color: var(--coral); }
@media (max-width: 420px) { .boton--contorno { padding: 10px 14px; font-size: 11px; letter-spacing: .1em; } }
.flecha { display: inline-block; font-size: 16px; letter-spacing: 0; }

.caja {
  display: inline-block;
  background: var(--coral); color: #fff;
  padding: .02em .22em .1em; margin-top: .08em; border-radius: .14em;
  font-style: italic; font-weight: 500; letter-spacing: -.01em;
}

/* marcador amarillo */
mark {
  color: inherit; padding: 0 .1em;
  background: linear-gradient(transparent 52%, var(--mantequilla) 52%, var(--mantequilla) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}

/* tachado que se dibuja */
s { text-decoration: none; position: relative; white-space: nowrap; opacity: .65; }
s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; background: var(--coral); transform-origin: left; }
.nuevo { display: inline-block; font-style: normal; color: var(--coral); }

/* cinta de texto corriendo (como la de tu "Volver a ti") */
.cinta {
  position: relative; z-index: 3;
  width: calc(100% + 120px); margin: 0 -60px; rotate: -1.6deg;
  background: var(--vino); color: var(--crema);
  overflow: hidden; padding: 12px 0;
}
.cinta__pista { display: flex; width: max-content; }
.cinta__grupo { display: flex; align-items: center; flex: none; }
.cinta__grupo span { padding: 0 22px; font-size: clamp(11px, 1.2vw, 13px); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.cinta__grupo svg { width: 7px; height: 7px; flex: none; border-radius: 999px; overflow: hidden; }

/* ---------- encabezado ---------- */
.encabezado {
  max-width: var(--ancho); margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marca__logo { position: relative; display: grid; place-items: center; width: 196px; height: 50px; }
.marca__mu { font: 400 44px/1 var(--serif); letter-spacing: .04em; color: var(--malva); opacity: .45; }
.marca__firma {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%;
  font: 400 26px/1 var(--firma); color: var(--vino); white-space: nowrap;
}
.marca__nombre { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--vino); }
@media (max-width: 600px) {
  .marca__nombre { display: none; }
  .marca__logo { width: 150px; }
  .marca__firma { font-size: 22px; }
  .marca__mu { font-size: 38px; }
}

/* ---------- la captura ---------- */
.captura {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 104px);
  display: grid; gap: clamp(44px, 5vw, 72px); align-items: center;
}
@media (min-width: 960px) { .captura { grid-template-columns: 1.08fr .92fr; } }
.captura__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.captura h1 {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: -.02em; line-height: 1;
  font-size: clamp(44px, 6.6vw, 86px);
  color: var(--vino);
}
.captura h1 .caja { font-size: .92em; }
.captura__sub { font-size: clamp(17px, 1.7vw, 20px); color: var(--tinta); max-width: 560px; }
.captura__sub strong { color: var(--vino); }

.incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.incluye li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 600; color: var(--vino); }
.incluye li::before {
  content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 999px; margin-top: -1px;
  background: var(--rubor); color: var(--coral); display: grid; place-items: center; font-size: 13px; font-weight: 800;
}

/* formulario: tarjeta clara */
.formulario {
  width: 100%; max-width: 580px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--papel); border-radius: 24px;
  padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 60px -32px rgba(62, 21, 32, .45);
  border: 1px solid var(--linea);
}
.campos { display: grid; gap: 12px; }
@media (min-width: 600px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vino); }
.campo input {
  font: 500 16px/1.3 var(--texto); letter-spacing: 0; text-transform: none; color: var(--vino-osc);
  padding: 15px 18px; min-height: 54px;
  background: var(--crema); border: 1.5px solid var(--rubor-2); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px rgba(181, 71, 63, .14); }
.campo input::placeholder { color: #A08C8E; }
.formulario .boton { width: 100%; }
.formulario__nota { font-size: 13px; color: var(--tinta); text-align: center; }
.trampa { display: none; }

/* foto en arco + arco de color detrás + sello que gira + la guía flotando */
.captura__visual { justify-self: center; width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.foto-arco { margin: 0 22px 22px 0; width: calc(100% - 22px); position: relative; isolation: isolate; }
.foto-arco::before {
  content: ""; position: absolute; top: 22px; left: 22px; right: -22px; aspect-ratio: 4 / 5; z-index: -1;
  background: var(--mantequilla); border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px;
}
.foto-arco > img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: 50% 50% 22px 22px / 40% 40% 22px 22px; background: var(--rubor);
}
.sello-giro { position: absolute; right: clamp(-30px, -5%, -10px); top: 4%; width: 28%; z-index: 2; filter: drop-shadow(0 12px 18px rgba(62, 21, 32, .35)); }
.sello-giro .anillo { transform-box: view-box; transform-origin: 60px 60px; }
.guia-flota { position: absolute; left: clamp(-34px, -7%, -10px); bottom: -10%; width: 44%; rotate: -6deg; z-index: 3; }
@media (max-width: 600px) { .guia-flota { left: -6px; width: 40%; } }
.guia-flota img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 50px -22px rgba(62, 21, 32, .55); }
.guia-flota__tag {
  position: absolute; right: -24%; bottom: 8%; rotate: 8deg;
  background: var(--vino); color: var(--crema); border-radius: 14px;
  padding: 10px 14px 8px; font: 500 20px/1 var(--serif); white-space: nowrap;
  box-shadow: 0 16px 28px -14px rgba(62, 21, 32, .6);
}
.guia-flota__tag small { display: block; margin-top: 5px; font: 800 9px/1.2 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--mantequilla); }
.captura__firma { margin-top: 40px; font: 400 clamp(28px, 3.4vw, 36px)/1.2 var(--firma); color: var(--vino); text-align: center; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--linea); margin-top: clamp(48px, 7vw, 80px); }
.pie__dentro {
  padding-top: 24px; padding-bottom: 28px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13px; color: var(--tinta);
}

/* ---------- página de gracias ---------- */
.gracias { min-height: 100vh; display: flex; flex-direction: column; background: var(--rubor); }
.gracias .encabezado { width: 100%; margin-bottom: clamp(24px, 5vw, 56px); }
.gracias__tarjeta {
  width: min(100% - 2 * var(--gutter), 680px); margin: 0 auto clamp(40px, 6vw, 72px);
  background: var(--papel); border-radius: 28px;
  box-shadow: var(--sombra);
  padding: clamp(36px, 6vw, 60px) clamp(22px, 5vw, 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.gracias__check { width: 72px; height: 72px; border-radius: 999px; background: var(--mantequilla); display: grid; place-items: center; }
.gracias h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; font-size: clamp(40px, 6.4vw, 64px); color: var(--vino); }
.gracias h1 .caja { font-size: .92em; }
.gracias__texto { font-size: 18px; color: var(--tinta); }
.gracias__texto strong { color: var(--vino); }
.pasos { width: 100%; text-align: left; background: var(--crema); border-radius: var(--radio); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pasos h2 { font: 500 24px/1.1 var(--serif); }
.paso { display: flex; gap: 14px; align-items: flex-start; }
.paso > span { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--rubor); color: var(--coral); display: grid; place-items: center; font: italic 500 19px/1 var(--serif); }
.paso p { font-size: 15px; color: var(--tinta); padding-top: 6px; }

/* =========================================================
   ANIMACIÓN: movimiento con elegancia
   Si el teléfono tiene "reducir movimiento", todo se ve quieto y completo.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .cinta__pista { animation: desliza 40s linear infinite; }
  .boton .flecha { animation: empuja 2.2s var(--suave) infinite; }
  .sello-giro .anillo { animation: gira 24s linear infinite; }
  .guia-flota { animation: flota 6s ease-in-out 2.4s infinite; }

  .js .marca__mu { animation: aparece-mu 1.1s var(--suave) both; }
  .js .marca__firma { animation: escribe-firma 1.4s var(--firme) .3s both; }
  .js .marca__nombre { animation: sube .8s var(--suave) .5s both; }

  .js .captura h1:not([data-partido]), .js .gracias h1:not([data-partido]) { visibility: hidden; }

  .js .aparece {
    opacity: 0; translate: 0 28px;
    transition: opacity .8s var(--suave), translate 1s var(--suave);
    transition-delay: calc(var(--retraso, 0ms) + 400ms);
  }
  .js .aparece.visible { opacity: 1; translate: 0 0; }

  .js mark { background-size: 0% 100%; transition: background-size 1s var(--firme) 1.2s; }
  .js .captura h1.visible ~ .captura__sub mark { background-size: 100% 100%; }

  .js .palabra { display: inline-block; clip-path: inset(-60% -12% -0.22em -12%); }
  .js .palabra > span { display: inline-block; translate: 0 118%; transition: translate 1s var(--suave) var(--d, 0ms); }
  .js [data-partido].visible .palabra > span { translate: 0 0; }
  .js [data-partido] .caja { clip-path: inset(0 100% 0 0 round .14em); transition: clip-path .7s var(--firme) var(--d, 0ms); }
  .js [data-partido].visible .caja { clip-path: inset(0 0 0 0 round .14em); }

  /* foto, sello y guía */
  .js .foto-arco > img { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--firme) .3s; }
  .js .foto-arco.visible > img { clip-path: inset(0 0 0 0); }
  .js .foto-arco::before { translate: -22px -22px; opacity: 0; transition: translate 1s var(--suave) 1s, opacity .6s 1s; }
  .js .foto-arco.visible::before { translate: 0 0; opacity: 1; }
  .js .sello-giro { opacity: 0; scale: .6; rotate: -90deg; transition: opacity .6s 1.4s, scale 1s var(--suave) 1.4s, rotate 1.2s var(--suave) 1.4s; }
  .js .foto-arco.visible .sello-giro { opacity: 1; scale: 1; rotate: 0deg; }
  .js .guia-flota { opacity: 0; translate: -30px 40px; transition: opacity .8s var(--suave) 1.6s, translate 1.1s var(--suave) 1.6s; }
  .js .foto-arco.visible .guia-flota { opacity: 1; translate: 0 0; }

  /* "cero" se tacha y llega "nuevo" */
  .js .captura__firma s::after { scale: 0 1; transition: scale .55s var(--firme) 2.4s; }
  .js .captura__firma.visible s::after { scale: 1 1; }
  .js .captura__firma .nuevo { opacity: 0; translate: 0 10px; transition: opacity .6s 2.9s, translate .8s var(--suave) 2.9s; }
  .js .captura__firma.visible .nuevo { opacity: 1; translate: 0 0; }

  /* gracias */
  .js .gracias__tarjeta { animation: sube-tarjeta 1s var(--suave) .1s both; }
  .js .gracias__check path { stroke-dasharray: 1; animation: dibuja .7s ease-out .8s both; }
  .js .paso { animation: sube .8s var(--suave) both; }
  .js .paso:nth-of-type(1) { animation-delay: 1.1s; }
  .js .paso:nth-of-type(2) { animation-delay: 1.25s; }
  .js .paso:nth-of-type(3) { animation-delay: 1.4s; }
}

@keyframes desliza { to { translate: -50% 0; } }
@keyframes empuja { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 5px 0; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes flota { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 10px; } }
@keyframes aparece-mu { from { opacity: 0; letter-spacing: .3em; } }
@keyframes escribe-firma { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes sube { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes sube-tarjeta { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }