/* ============================================================
   Secciones nuevas: probala con tu nombre, complementos, sobre nosotros, aliados y regalo.
   Usan las variables de color de la página, así que funcionan en modo claro y oscuro.
   ============================================================ */

/* ---- Probala con tu nombre ---- */
.pers { margin-top: 1.2rem; padding: 1rem 1.05rem 1.1rem; border-radius: 20px; background: var(--paper); border: 1.5px dashed var(--line); text-align: left; }
.pers__t { font-size: .98rem; }
.pers__t small { display: block; margin-top: .1rem; color: var(--muted); font-size: .84rem; }
.pers__f { display: grid; gap: .55rem; margin: .8rem 0; grid-template-columns: 1fr 1fr; }
.pers__f input { width: 100%; min-width: 0; padding: .75rem .85rem; border-radius: 13px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.pers__f input:focus { outline: none; border-color: var(--coral); }
.pers__f input[type="date"] { grid-column: 1 / -1; }
.pers .pers__n { margin-top: .6rem; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.pers .pers__e { margin-top: .5rem; font-size: .86rem; color: #ff8b7b; font-weight: 600; min-height: 1.1em; }
@media (max-width: 420px) { .pers__f { grid-template-columns: 1fr; } }

/* ---- Complementos ---- */
.comps { display: grid; gap: 1rem; margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); text-align: left; }
.comp { display: flex; flex-direction: column; gap: .4rem; padding: 1.3rem 1.2rem 1.2rem; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.comp:hover { transform: translateY(-4px); border-color: var(--coral); }
.comp__i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--rose); font-size: 1.4rem; }
.comp h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; margin-top: .3rem; }
.comp p { color: var(--muted); font-size: .94rem; flex: 1; }
.comp .btn { align-self: flex-start; margin-top: .5rem; }
.comp .comp__p { display: block; margin-top: .1rem; font-size: .76rem; color: var(--muted); opacity: .85; letter-spacing: .01em; }

/* ---- Sobre nosotros ---- */
.nos__g { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .nos__g { grid-template-columns: 340px 1fr; gap: 3.4rem; } }
.nos__marco { position: relative; width: min(300px, 78%); aspect-ratio: 4 / 5; margin-inline: auto; border-radius: 46% 46% 24px 24px / 34% 34% 24px 24px; overflow: hidden; background: linear-gradient(150deg, var(--rose), var(--lav)); border: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(36,26,46,.6); display: grid; place-items: center; }
.nos__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nos__ini { font-family: var(--serif); font-weight: 600; font-size: 4.2rem; letter-spacing: .02em; color: var(--coral); }
.nos__ini i { font-style: italic; font-weight: 500; font-size: 2.4rem; margin: 0 .15em; color: var(--muted); }
.nos__txt h2 { font-size: clamp(1.9rem, 5.4vw, 2.7rem); }
.nos__txt p { margin-top: 1rem; color: var(--muted); font-size: 1.06rem; white-space: pre-line; }
.nos__txt .firma { font-family: var(--serif); font-style: italic; color: var(--ink); }
@media (max-width: 819px) { .nos__txt { text-align: center; } }

/* ---- Aliados ---- */
.ali-sec { background: var(--paper); border-block: 1px solid var(--line); }
.ali__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.6rem; }
.ali__chips button { padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: .88rem; min-height: 40px; }
.ali__chips button[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.ali__g { display: grid; gap: 1rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); text-align: left; }
.ali { position: relative; overflow: hidden; padding: 1.1rem 1.1rem 1.15rem; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.ali__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .3rem; height: 100%; }
/* dibujo grande y tenue de la categoría, del lado derecho: rellena la tarjeta sin inventar datos ni estorbar el texto */
.ali__wm { position: absolute; z-index: 0; right: -10%; top: 50%; width: 58%; height: 78%; transform: translateY(-50%) rotate(-6deg); opacity: .06; color: var(--ink); pointer-events: none; }
html[data-tema="oscuro"] .ali__wm { opacity: .1; }
.ali--dest { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.ali--dest .ali__wm { color: var(--gold); opacity: .1; }
.ali__top { display: flex; align-items: center; gap: .8rem; }
.ali__logo { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 14px; object-fit: cover; background: var(--rose); display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--coral); overflow: hidden; }
.ali__n { font-weight: 700; font-size: 1.05rem; line-height: 1.2; word-break: break-word; }
.ali__c { font-size: .82rem; color: var(--muted); }
.ali__d { color: var(--muted); font-size: .93rem; margin-top: .3rem; flex: 1; }
.ali__b { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.ali__b .btn { min-height: 42px; padding: .5rem 1rem; font-size: .88rem; }
.ali__tag { align-self: flex-start; position: relative; display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .2rem; padding: .05rem .55rem; border-radius: 99px; background: rgba(242,181,68,.2); color: #b07a10; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; }
html[data-tema="oscuro"] .ali__tag { color: var(--gold); }
.ali__star { font-size: .9em; color: var(--gold); display: inline-block; animation: ali-destello 2.4s ease-in-out infinite; }
@keyframes ali-destello { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }
/* brillo que recorre la etiqueta "Aliado destacado" de vez en cuando */
.ali__tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: ali-brillo 4.5s ease-in-out infinite; }
@keyframes ali-brillo { 0%, 40% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .ali__star, .ali__tag::after { animation: none; } }
.ali__nota { margin-top: 1rem; font-size: .8rem; color: var(--muted); text-align: center; }

/* Instagram y Facebook: botón redondo con su ícono, para no repetir la palabra "Redes" dos veces */
.ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; transition: transform .25s var(--ease), filter .25s; flex: 0 0 auto; }
.ico:hover { transform: translateY(-2px) scale(1.06); filter: brightness(1.08); }
.ico--ig { background: radial-gradient(circle at 30% 105%, #ffd776 0%, #ffd776 10%, #f9ac54 26%, #e8464e 46%, #d22a8f 66%, #7c40c9 100%); }
.ico--fb { background: #1877f2; }

/* ---- Carrusel de aliados: una tarjeta a la vez, se desvanece sola (el anuncio "Publicá tu negocio" entra en la vuelta como una tarjeta más) ---- */
.ali-car { position: relative; max-width: 30rem; margin: 1.6rem auto 0; }
.ali-car__track { position: relative; }
.ali-car .ali { position: absolute; inset: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease); padding: 1.3rem 1.3rem 1.4rem; }
.ali-car .ali.is-on { position: relative; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .ali-car .ali { transition: none; } }
/* dentro del carrusel el logo es la tarjeta protagonista, así que va más grande y con un marco propio */
.ali-car .ali__logo { width: 76px; height: 76px; flex-basis: 76px; border-radius: 18px; font-size: 2rem; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45), 0 0 0 1px var(--line) inset; }
.ali-car .ali__n { font-size: 1.2rem; }
/* un resplandor suave detrás del logo del destacado, para que la tarjeta no se sienta plana */
.ali-car .ali--dest::before { content: ""; position: absolute; z-index: 0; top: -30%; left: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242,181,68,.28), transparent 70%); pointer-events: none; animation: ali-glow 6s ease-in-out infinite; }
@keyframes ali-glow { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .ali-car .ali--dest::before { animation: none; } }
.ali--cta { border-style: dashed; border-color: var(--coral); background: var(--paper); }
.ali--cta .ali__inner { align-items: center; text-align: center; justify-content: center; gap: .5rem; }
.ali--cta b { font-family: var(--serif); font-size: 1.2rem; }
.ali--cta p { color: var(--muted); margin: 0 0 .3rem; }
.ali-car__dots { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 1.2rem; }
.ali-car__dots button { width: 8px; height: 8px; padding: 0; border-radius: 99px; background: var(--line); transition: width .3s var(--ease), background .3s; }
.ali-car__dots button[aria-current="true"] { width: 22px; background: var(--coral); }
.ali-car__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line); color: var(--ink); }
.ali-car__arrow:hover { border-color: var(--coral); color: var(--coral); }
.ali-car__arrow svg { width: 18px; height: 18px; }
.ali-car__arrow--prev { left: -1.1rem; } .ali-car__arrow--next { right: -1.1rem; }
.ali-car[data-n="1"] .ali-car__arrow, .ali-car[data-n="1"] .ali-car__dots { display: none; }
@media (max-width: 720px) { .ali-car__arrow { display: none; } }

/* ---- Regalo ---- */
.reg__g { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .reg__g { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
.reg__txt h2 { font-size: clamp(1.9rem, 5.4vw, 2.7rem); }
.reg__txt .lead { margin-top: .9rem; }
.reg__lista { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.reg__lista li { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; }
.reg__lista li::before { content: "✓"; flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-size: .8rem; font-weight: 700; margin-top: .1rem; }
.reg__form { padding: 1.3rem 1.2rem 1.4rem; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 50px -36px rgba(36,26,46,.6); }
.reg__form h3 { font-size: 1.35rem; margin-bottom: .2rem; }
.reg__form > p { color: var(--muted); font-size: .92rem; margin-bottom: .8rem; }
.reg__form .cmp { display: block; margin-top: .8rem; }
.reg__form .cmp label.t { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .3rem; }
.reg__form input[type="text"], .reg__form input[type="email"], .reg__form input[type="tel"] { width: 100%; padding: .8rem .9rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.reg__form input:focus { outline: none; border-color: var(--coral); }
.reg__ck { display: flex; gap: .65rem; align-items: flex-start; margin-top: .9rem; font-size: .84rem; line-height: 1.4; cursor: pointer; }
.reg__ck input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: .05rem; accent-color: var(--coral); }
.reg__ck a { color: var(--coral-d); }
.reg__form .btn { width: 100%; margin-top: 1.1rem; }
.reg__err { margin-top: .6rem; min-height: 1.2em; color: #ff8b7b; font-weight: 600; font-size: .9rem; }
.reg__ok { text-align: center; padding: .6rem 0 .2rem; }
.reg__ok i { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; font-size: 1.6rem; margin-bottom: .6rem; }
.reg__ok p { color: var(--muted); margin: .4rem 0 1rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* enlace «Ver demostración» dentro de las listas de los paquetes */
.pk li .pk__ver { display: inline-block; margin-left: .35rem; font-size: .78rem; font-weight: 600; color: var(--coral); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pk li .pk__ver:hover { color: var(--coral-d, var(--coral)); }