/* Súmate — la ronda que se abre, recortes para elegir y la hoja de inscripción */
.sm-page { background: var(--plum); }

/* bordes cortados a tijera: js/sumate.js dibuja un polígono irregular en --cut.
   El recorte va en una capa de fondo, así el contorno de foco del teclado no queda cortado. */
.sm-cut, .sm-sheet { isolation: isolate; }
.sm-cut::before, .sm-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: var(--cut, none);
}

/* píldoras (mismo gesto que los botones del menú y del pie) */
.sm-pill {
  display: inline-grid; place-items: center; min-height: 52px; padding: 0 30px; border-radius: 999px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(14px, 1.15vw, 19px); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), background-color .3s, color .3s;
}
.sm-pill:hover { transform: rotate(-3deg) scale(1.05); }
.sm-pill:focus-visible, .sm-cut:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.sm-pill--sun { background: var(--sun); color: var(--forest); }
.sm-pill--line { box-shadow: inset 0 0 0 2px var(--cream); color: var(--cream); }
.sm-pill--line:hover { background: var(--cream); color: var(--plum); }
.sm-pill--plum { background: var(--plum); color: var(--cream); }
.sm-pill--line-dark { box-shadow: inset 0 0 0 2px var(--forest); color: var(--forest); }

.sm-h2 {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1.08;
  font-size: clamp(30px, 5.4vw, 92px); letter-spacing: .08em; color: var(--plum);
}
.sm-h2--light { color: var(--cream); }

/* ========== 1. HERO ========== */
.sm-hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; background: var(--plum);
  padding-top: calc(330 * var(--u));
}
.sm-hero-copy { position: relative; z-index: 3; padding: 0 calc(180 * var(--u)); max-width: calc(1700 * var(--u)); color: var(--cream); }
.sm-kicker { margin: 0 0 .4em; font-family: 'Mandali', sans-serif; font-size: clamp(15px, 1.5vw, 26px); letter-spacing: .14em; color: var(--pink); }
.sm-title {
  margin: 0; display: flex; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1;
  font-size: clamp(54px, 11vw, 220px); letter-spacing: .06em; color: var(--cream);
}
.sm-title span { display: inline-block; }
.sm-lead {
  margin: calc(40 * var(--u)) 0 0; max-width: 36em; font-family: 'Montserrat', sans-serif; font-weight: 500;
  font-size: clamp(15px, 1.55vw, 27px); letter-spacing: .05em; line-height: 1.5;
}
.sm-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: calc(70 * var(--u)); }

.sm-plant { position: absolute; z-index: 1; pointer-events: none; transform-origin: 50% 50%; }
.sm-plant--r { right: calc(-420 * var(--u)); bottom: calc(330 * var(--u)); width: calc(1250 * var(--u)); rotate: 66.56deg; }
.sm-plant--l { left: calc(-470 * var(--u)); bottom: calc(150 * var(--u)); width: calc(820 * var(--u)); rotate: -66.56deg; scale: -1 1; }
.sm-butterfly { position: absolute; z-index: 4; right: calc(780 * var(--u)); top: calc(420 * var(--u)); width: clamp(54px, calc(185 * var(--u)), 120px); pointer-events: none; }

.sm-ground { position: relative; z-index: 2; align-self: end; margin-top: calc(-60 * var(--u)); min-height: calc(780 * var(--u)); }
.sm-grass { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: calc(620 * var(--u)); }
.sm-ground::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--cream); }
.sm-ronda { position: absolute; margin: 0; right: calc(260 * var(--u)); bottom: calc(-20 * var(--u)); width: calc(1600 * var(--u)); z-index: 2; }
.sm-ronda > img { width: 100%; height: auto; }
.sm-bubble {
  position: absolute; right: calc(60 * var(--u)); top: calc(-250 * var(--u)); width: calc(760 * var(--u)); aspect-ratio: 660.53 / 194.687;
  display: flex; align-items: center; justify-content: center; padding: 0 9% 5% 7%; /* el texto va en el cuerpo del globo, no en la punta (el % se mide sobre el ancho) */
  background: url("../assets/sumate/bubble.svg") center / 100% 100% no-repeat;
  font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; text-align: center; color: var(--plum);
  font-size: clamp(11px, calc(34 * var(--u)), 21px); letter-spacing: .03em; line-height: 1.25;
}

/* ========== 2. FORMAS DE SUMARTE ========== */
.sm-formas { position: relative; background: var(--cream); padding: calc(300 * var(--u)) calc(140 * var(--u)) calc(380 * var(--u)); text-align: center; }
.sm-sub { margin: .7em auto 0; font-family: 'Mandali', sans-serif; font-size: clamp(16px, 1.6vw, 28px); letter-spacing: .06em; color: var(--forest); }
.sm-cuts {
  list-style: none; margin: calc(130 * var(--u)) auto 0; padding: 0; max-width: 1500px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(22px, 2.6vw, 44px) clamp(16px, 2vw, 34px);
}
.sm-cuts > li { flex: 0 1 clamp(230px, 21vw, 330px); display: flex; }
.sm-cuts > li:nth-child(odd) { margin-top: clamp(0px, 2.4vw, 46px); }
.sm-cut {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) clamp(26px, 2.4vw, 36px);
  --paper: var(--bg); color: var(--fg); rotate: var(--r);
  transition: rotate .35s steps(3), translate .35s steps(3);
}
.sm-cut:hover { rotate: calc(var(--r) * -1.6); translate: 0 -8px; }
.sm-cut.is-picked { rotate: 0deg; }
.sm-cut-art { display: block; height: clamp(110px, 10vw, 150px); margin-bottom: 14px; }
.sm-cut-art img { height: clamp(110px, 10vw, 150px); width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; transform-origin: 50% 100%; }
.sm-cut:hover .sm-cut-art img { animation: sm-hop .6s steps(3) 1; }
/* los niños se salen del recorte, como pegados encima */
.sm-cut-art--kid img { position: relative; height: calc(clamp(110px, 10vw, 150px) * 1.75); margin-top: calc(clamp(110px, 10vw, 150px) * -.75); }
.sm-cut-t { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 1.45vw, 24px); letter-spacing: .06em; line-height: 1.15; }
.sm-cut-p { margin-top: 10px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.5; font-weight: 400; }
.sm-cut-go {
  margin-top: auto; padding-top: 18px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6em;
}
.sm-cut-go::after { content: "→"; font-size: 1.3em; transition: translate .3s steps(2); }
.sm-cut:hover .sm-cut-go::after { translate: 6px 0; }
.sm-worm { position: absolute; left: calc(220 * var(--u)); bottom: calc(160 * var(--u)); width: clamp(48px, 5vw, 90px); }
@keyframes sm-hop { 0%, 100% { transform: none; } 33% { transform: translateY(-10px) rotate(-6deg); } 66% { transform: translateY(-4px) rotate(5deg); } }

/* ========== 3. INSCRIPCIÓN ========== */
.sm-insc {
  position: relative; z-index: 2; background: var(--plum); color: var(--cream);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(140 * var(--u)); align-items: start;
  padding: calc(200 * var(--u)) calc(180 * var(--u)) calc(660 * var(--u));
}
/* borde ondulado donde empieza la sección (como en Conócenos) */
.sm-insc::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: clamp(28px, 4.2vw, 80px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C52 6 96 46 150 28S250 6 300 26 370 48 400 30V60H0Z' fill='%2390295B'/%3E%3C/svg%3E") 0 100% / clamp(260px, 38vw, 720px) 100% repeat-x;
  pointer-events: none;
}
.sm-insc-side { position: sticky; top: calc(340 * var(--u)); }
.sm-insc-lead { margin: .8em 0 0; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: clamp(16px, 1.5vw, 26px); letter-spacing: .05em; line-height: 1.5; }
.sm-steps { list-style: none; margin: calc(80 * var(--u)) 0 0; padding: 0; display: grid; gap: 14px; }
.sm-steps li { display: flex; align-items: center; gap: 14px; font-size: clamp(15px, 1.2vw, 20px); }
.sm-steps b {
  flex: none; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--pink); color: var(--forest); font-family: 'Montserrat', sans-serif; font-weight: 800;
}
.sm-steps li:nth-child(2) b { background: var(--sun); }
.sm-steps li:nth-child(3) b { background: var(--sky); }
.sm-insc-alt { margin: calc(80 * var(--u)) 0 0; font-size: clamp(14px, 1.05vw, 17px); opacity: .9; }
.sm-insc-alt a { color: var(--sun); text-underline-offset: .2em; word-break: break-all; }
.sm-insc-kid { width: clamp(120px, 12vw, 220px); margin-top: calc(90 * var(--u)); transform-origin: 50% 100%; }

/* la hoja */
.sm-sheet {
  position: relative; --paper: var(--cream); color: var(--forest); rotate: .6deg;
  padding: clamp(26px, 3.4vw, 64px) clamp(22px, 3.4vw, 64px) clamp(34px, 3.6vw, 70px);
}
.sm-form, .sm-thanks { rotate: -.6deg; }
.sm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sm-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sm-field > span, .sm-field legend {
  padding: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--forest);
}
.sm-field i { font-style: normal; color: var(--rust); }
.sm-tipos legend, .sm-aportes legend { margin-bottom: 12px; }
.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin: 30px 0 22px; }
.sm-wide { grid-column: 1 / -1; }
.sm-aportes { margin-bottom: 22px; }

.sm-form input[type="text"], .sm-form input[type="email"], .sm-form input[type="tel"], .sm-form select, .sm-form textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border: 2px solid rgba(35, 52, 25, .25); border-radius: 14px;
  background: #fffbe6; color: var(--forest); font: 400 16px/1.4 'Poppins', sans-serif;
  transition: border-color .2s, background-color .2s;
}
.sm-form textarea { resize: vertical; min-height: 120px; }
.sm-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23233419' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.sm-form ::placeholder { color: rgba(35, 52, 25, .45); }
.sm-form input:focus, .sm-form select:focus, .sm-form textarea:focus { outline: none; border-color: var(--plum); background: #fff; }
.sm-field.bad input, .sm-field.bad select { border-color: var(--rust); }

/* opciones como papelitos */
.sm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-chips label { position: relative; cursor: pointer; }
.sm-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sm-chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 2px solid var(--plum); color: var(--plum); font-weight: 500; font-size: 15px;
  transition: background-color .2s, color .2s, transform .3s cubic-bezier(.3,1.6,.5,1);
}
.sm-chips label:hover span { transform: rotate(-2deg); }
.sm-chips input:checked + span { background: var(--plum); color: var(--cream); }
.sm-chips input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.sm-chips--soft span { border-color: var(--olive); color: var(--forest); }
.sm-chips--soft input:checked + span { background: var(--olive); color: var(--cream); }

.sm-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.sm-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--plum); cursor: pointer; }

.sm-err { display: none; margin: 4px 0 0; font-style: normal; font-size: 13px; font-weight: 500; color: var(--rust); }
.bad > .sm-err, .sm-err.on { display: block; }

.sm-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.sm-submit { min-height: 60px; padding: 0 42px; font-size: clamp(15px, 1.25vw, 20px); }
.sm-submit[disabled] { opacity: .7; cursor: progress; }
.sm-submit.is-sending span { animation: sm-wiggle .5s steps(2) infinite; display: inline-block; }
@keyframes sm-wiggle { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } }
.sm-status { margin: 0; font-size: 14px; font-weight: 500; }
.sm-status.err { color: var(--rust); }
.sm-status a { color: inherit; }

/* gracias */
.sm-thanks { position: relative; min-height: 420px; display: grid; align-content: center; justify-items: center; text-align: center; gap: 16px; padding: 40px 10px; outline: none; }
.sm-thanks h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; color: var(--plum); font-size: clamp(26px, 3.4vw, 56px); letter-spacing: .06em; line-height: 1.1; }
.sm-thanks p { margin: 0 0 10px; max-width: 28em; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.5; }
.sm-thanks-kid { position: absolute; bottom: -10px; width: clamp(90px, 9vw, 150px); pointer-events: none; transform-origin: 50% 100%; }
.sm-thanks-kid--a { left: -6px; }
.sm-thanks-kid--b { right: -6px; }

/* ========== ¡Anímate! en esta página: transición desde la inscripción ==========
   el verde del ¡Anímate! empieza con un borde cortado a tijera sobre el ciruela, y la mancha naranja
   y el brazo con el pincel quedan pegados encima de ese borde, montados sobre las dos secciones
   (como capas de papel), en vez de cortarse en una línea recta */
.sm-page .animate { background: var(--forest); z-index: 3; overflow: visible; clip-path: inset(-100vh 0 0 0); }
.sm-page .animate .stage-box { overflow: visible; }
.sm-page .animate::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); height: clamp(26px, 3.6vw, 64px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V44L0 40L20 16L40 44L63 5L90 35L114 5L134 42L165 6L187 45L220 14L244 52L263 19L286 37L306 10L337 37L364 16L388 44L407 5L428 46L453 10L480 42L503 18L532 38L560 13L592 47L614 22L634 42L664 7L690 35L719 18L746 50L769 17L796 44L822 19L855 43L883 5L913 46L946 19L969 41L998 4L1023 37L1043 5L1073 36L1095 11L1127 35L1152 14L1185 49L1216 9L1200 40V70Z' fill='%23233419'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.sm-page .footer { z-index: 4; }

/* ========== celular ========== */
@media (max-width: 760px) {
  .sm-hero { padding-top: calc(300 * var(--u)); }
  .sm-hero-copy { padding: 0 7vw; max-width: none; }
  .sm-title { font-size: 15.5vw; letter-spacing: .04em; }
  .sm-lead { font-size: 4vw; margin-top: 3.5vw; }
  .sm-actions { margin-top: 6vw; }
  .sm-pill { min-height: 46px; padding: 0 22px; font-size: 13px; }
  .sm-plant--r { right: -38vw; bottom: 34vw; width: 90vw; }
  .sm-plant--l { display: none; }
  .sm-butterfly { right: 30vw; top: auto; bottom: 112vw; }
  .sm-ground { min-height: 92vw; margin-top: 4vw; }
  .sm-grass { height: 60vw; }
  .sm-ronda { right: -4vw; left: -4vw; width: auto; bottom: -2vw; }
  .sm-bubble { left: 6vw; right: auto; top: -17vw; width: 66vw; font-size: 3.2vw; }
  .sm-formas { padding: 14vw 6vw 26vw; }
  .sm-cuts { margin-top: 9vw; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .sm-cuts > li:nth-child(odd) { margin-top: 0; }
  .sm-cuts > li:nth-child(even) { margin-top: 18px; }
  .sm-cut { padding: 16px 14px 20px; }
  .sm-cut-art, .sm-cut-art img { height: 84px; }
  .sm-cut-art { margin-bottom: 8px; }
  .sm-cut-art--kid img { height: 140px; margin-top: -56px; }
  .sm-cut-t { font-size: 14px; letter-spacing: .04em; }
  .sm-cut-p { font-size: 13px; line-height: 1.4; }
  .sm-cut-go { font-size: 11px; padding-top: 12px; }
  .sm-insc { grid-template-columns: 1fr; gap: 30px; padding: 14vw 5vw 16vw; }
  .sm-insc-side { position: relative; top: 0; }
  .sm-insc-kid { position: absolute; right: -2vw; top: auto; bottom: 10vw; width: 25vw; margin: 0; }
  .sm-steps { padding-right: 25vw; }
  .sm-h2 { font-size: 9.4vw; }
  .sm-sheet { rotate: 0deg; padding: 26px 18px 32px; }
  .sm-form, .sm-thanks { rotate: 0deg; }
  .sm-grid { grid-template-columns: 1fr; gap: 18px; }
  .sm-chips span { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .sm-submit { width: 100%; }
}
@media (max-width: 360px) {
  .sm-cuts { grid-template-columns: 1fr; }
  .sm-cuts > li:nth-child(even) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-cut, .sm-cut-go::after, .sm-pill { transition: none; }
  .sm-cut:hover .sm-cut-art img, .sm-submit.is-sending span { animation: none; }
}

/* los campos de otras opciones quedan ocultos de verdad (display: grid no los pisa) */
.sm-sheet [hidden] { display: none !important; }
/* el botón Inicio no se pierde sobre el verde de la inscripción */
.sm-page .nav-home { background: var(--olive); }