/* =========================================================
   Nos vemos, Paloma · página de servicio
   Primero celular; al final, ajustes para pantallas grandes.
   ========================================================= */

:root {
    /* Paleta Noche y vino (2026-10-13). Los nombres de las variables
       se conservan para no tocar todo el CSS:
       ink = azul noche, rosa = vino, violeta = ciruela, verde = arena */
    --ink: #1E2F45;         /* azul noche: textos, botones, sobre */
    --rosa: #A33A3A;        /* vino: acento */
    --rosa-dark: #1E2F45;   /* botón principal: azul noche con texto claro */
    --rosa-soft: #F3E4E0;   /* vino muy suave */
    --violeta: #6B3A5E;     /* ciruela: detalles */
    --violeta-soft: #EFE5EB;
    --verde: #E2D5C1;       /* arena (insignias) */
    --verde-dark: #6B3A5E;  /* ciruela para texto de detalle */
    --verde-soft: #EBE1D2;  /* arena suave: fondos de tarjetas */
    --crema: #F4EDE2;       /* fondo general (arena claro) */
    --white: #FFFDF9;

    --title: "Courgette", cursive;
    --body: "Josefin Sans", system-ui, sans-serif;
    --radius: 20px;
    --shadow: 0 10px 30px rgba(30, 47, 69, 0.10);
    --max: 1120px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* que la barra fija no tape los títulos */
}

body {
    margin: 0;
    background: var(--crema);
    color: var(--ink);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.5;
}

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

h1, h2, h3, p {
    margin: 0;
}

h1, h2, h3 {
    font-weight: 400;
    line-height: 1.1;
}

a {
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--white);
}

.skip:focus {
    left: 1rem;
}

:focus-visible {
    outline: 3px solid var(--violeta);
    outline-offset: 3px;
}

/* ===== Botones ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: var(--rosa-dark);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(30, 47, 69, 0.22);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
    background: var(--rosa);
    box-shadow: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
}

.btn--ghost:hover {
    background: var(--ink);
    color: var(--white);
}

.btn--light {
    background: var(--crema);
    color: var(--ink);
    box-shadow: none;
}

.btn--light:hover {
    background: var(--verde-soft);
    color: var(--ink);
}

.btn--small {
    min-height: 42px;
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
}

/* Etiquetas */
.eyebrow {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--verde-soft);
    color: var(--verde-dark);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transform: rotate(-2deg);
}

.eyebrow--center {
    display: table;
    margin: 0 auto 0.9rem;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--rosa);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
}

.badge--verde {
    background: var(--verde);
    color: var(--ink);
}

.badge--violeta {
    background: var(--violeta-soft);
    color: var(--violeta);
}

.badge--light {
    background: var(--verde);
    color: var(--ink);
}

.hl {
    color: var(--rosa);
    position: relative;
    white-space: nowrap;
}

/* Subrayado verde a mano bajo el "sí" */
.hl::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -0.05em;
    height: 0.22em;
    border-radius: 99px;
    background: var(--verde);
    opacity: 0.55;
    z-index: -1;
}

/* ===== Navegación ===== */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 237, 226, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #E5DACA;
    box-shadow: 0 6px 20px rgba(30, 47, 69, 0.08);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0.6rem 1.1rem;
}

.nav__logo img {
    width: 170px;
}

.nav__toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--rosa-soft);
    cursor: pointer;
}

/* Ícono de hamburguesa que se vuelve X */
.nav__bars,
.nav__bars::before,
.nav__bars::after {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__bars {
    position: relative;
}

.nav__bars::before,
.nav__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav__bars::before { top: -7px; }
.nav__bars::after { top: 7px; }

.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* Menú en celular: panel que baja */
.nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1.1rem 1.25rem;
    background: var(--crema);
    border-bottom: 1px solid #E8DECF;
    box-shadow: 0 16px 24px rgba(30, 47, 69, 0.08);
}

.nav__menu.is-open {
    display: flex;
}

.nav__menu a:not(.btn) {
    padding: 0.85rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #ECE3D6;
}

.nav__menu .btn {
    margin-top: 0.75rem;
}

/* ===== Portada ===== */
.hero {
    display: grid;
    gap: 3rem;
    max-width: var(--max);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}

.hero__title {
    font-family: var(--title);
    font-size: clamp(2.4rem, 9.5vw, 4rem);
    position: relative;
    z-index: 0;
}

.hero__lead {
    max-width: 34rem;
    font-size: 1.2rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.trust li::before {
    content: "✓ ";
    color: var(--verde-dark);
    font-weight: 700;
}

/* Mockup del celular */
.mockup {
    position: relative;
    justify-self: center;
    width: 300px;
    height: 470px;
}

.mockup::before {
    content: "";
    position: absolute;
    inset: 40px 10px 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--verde-soft) 0%, var(--rosa-soft) 60%, transparent 70%);
    z-index: -1;
}

.phone {
    width: 220px;
    height: 450px;
    margin: 0 auto;
    padding: 11px;
    border-radius: 36px;
    background: var(--ink);
    box-shadow: 0 24px 50px rgba(30, 47, 69, 0.28);
    transform: rotate(-3deg);
}

.phone__screen {
    height: 100%;
    border-radius: 27px;
    background: #A98583;
    color: #F3E7E2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.phone__title { font-size: 1.1rem; letter-spacing: 0.22em; }

.phone__seal {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border: 2px solid #F3E7E2;
    border-radius: 50%;
    font-family: var(--title);
    font-size: 2rem;
}

.phone__text { font-size: 0.9rem; }

.phone__hint {
    margin-top: 3rem;
    font-size: 0.7rem;
    font-weight: 600;
    animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow);
    font-size: 0.85rem;
    line-height: 1.25;
}

.float--top {
    top: 6px;
    left: -14px;
    transform: rotate(-3deg);
}

.float--bottom {
    right: -8px;
    bottom: 40px;
    transform: rotate(3deg);
}

.float__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--verde);
    color: var(--ink);
    font-weight: 700;
}

.float__big {
    font-size: 2rem;
    font-weight: 700;
    color: var(--rosa);
}

/* ===== Beneficios ===== */
.benefits {
    display: grid;
    gap: 1rem;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1.25rem 3.5rem;
}

.benefit {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.benefit__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.4rem;
    font-weight: 700;
}

.benefit__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.benefit__icon--rosa svg { fill: currentColor; stroke: none; }
.benefit__icon--rosa { background: var(--rosa-soft); color: var(--rosa-dark); }
.benefit__icon--verde { background: var(--verde-soft); color: var(--verde-dark); }
.benefit__icon--violeta { background: var(--violeta-soft); color: var(--violeta); }

.benefit h2 {
    font-size: 1.1rem;
    font-weight: 700;
}

/* ===== Secciones ===== */
.section {
    padding: 4rem 1.25rem;
}

.section--tint {
    background: linear-gradient(180deg, var(--verde-soft) 0%, #F3ECE0 100%);
}

.section--tint .eyebrow,
.template--custom .badge--violeta {
    background: var(--white);
}

.section__title {
    max-width: 22ch;
    margin: 0 auto;
    font-family: var(--title);
    font-size: clamp(2rem, 7vw, 2.8rem);
    text-align: center;
}

.section__lead {
    margin: 0.9rem auto 0;
    max-width: 32rem;
    text-align: center;
    font-size: 1.1rem;
}

/* Plantillas */
.templates {
    display: grid;
    gap: 1.25rem;
    max-width: var(--max);
    margin: 2.5rem auto 0;
}

.template {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.template__cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 210px;
}

.template__cover .badge {
    position: absolute;
    top: 14px;
    left: 14px;
}

.template__cover--pasaporte {
    padding-top: 1.6rem;
    background: #A98583;
    color: #F3E7E2;
}

.template__cover-title {
    letter-spacing: 0.22em;
}

.template__cover-seal {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 2px solid #F3E7E2;
    border-radius: 50%;
    font-family: var(--title);
    font-size: 1.8rem;
}

.template__cover--soon {
    background: repeating-linear-gradient(-45deg, var(--verde-soft) 0 14px, #F2EBDF 14px 28px);
}

.template__cover--soon img {
    opacity: 0.45;
    filter: grayscale(0.3);
}

.template__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.3rem 1.4rem 1.5rem;
}

.template__body h3 {
    font-family: var(--title);
    font-size: 1.7rem;
}

.template--custom {
    background: var(--violeta-soft);
    box-shadow: none;
}

.template--custom .template__body {
    justify-content: center;
    height: 100%;
    padding: 1.8rem 1.5rem;
}

.swatches {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.swatches span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px #E2D6C4;
}

.swatches small {
    margin-left: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Pasos */
.steps {
    display: grid;
    gap: 1rem;
    max-width: var(--max);
    margin: 2.5rem auto 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.steps li {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 1.2rem;
    border-radius: var(--radius);
    background: var(--white);
}

.steps__num {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rosa);
    color: var(--white);
    font-family: var(--title);
    font-size: 1.6rem;
}

.steps h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Qué incluye */
.includes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 0;
    list-style: none;
}

.includes li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 600;
    font-size: 1rem;
}

.includes li::before {
    content: "✓";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--verde);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
}

/* Precios */
.prices {
    display: grid;
    gap: 1.25rem;
    max-width: 820px;
    margin: 2.5rem auto 0;
}

.price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.8rem 1.6rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.price h3 {
    font-family: var(--title);
    font-size: 1.9rem;
}

.price--main {
    background: var(--ink);
    color: var(--crema);
}

.price__amount {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.price__amount small {
    font-size: 1rem;
}

.price__old {
    margin-right: 0.3rem;
    font-size: 1.2rem;
    text-decoration: line-through;
    opacity: 0.55;
}

.price__list {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.price__list li::before {
    content: "✓  ";
    color: var(--verde);
    font-weight: 700;
}

.price:not(.price--main) .price__list li::before {
    color: var(--verde-dark);
}

.prices__note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Preguntas */
.faq {
    display: grid;
    gap: 0.7rem;
    max-width: 720px;
    margin: 2.5rem auto 0;
}

.faq details {
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(30, 47, 69, 0.05);
}

.faq summary {
    position: relative;
    padding: 1.1rem 3.2rem 1.1rem 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--verde-soft);
    color: var(--verde-dark);
    font-size: 1.2rem;
    transform: translateY(-50%);
}

.faq details[open] summary::after {
    content: "–";
    background: var(--rosa-soft);
    color: var(--rosa-dark);
}

.faq details p {
    padding: 0 1.2rem 1.2rem;
}

/* Cierre */
.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1.25rem;
    background: var(--rosa);
    color: var(--white);
    text-align: center;
}

.cta h2 {
    font-family: var(--title);
    font-size: clamp(2.2rem, 8vw, 3rem);
}

.cta p {
    font-size: 1.15rem;
}

/* Pie */
.footer {
    padding: 3rem 1.25rem 6.5rem;
    background: var(--white);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: var(--max);
    margin: 0 auto;
}

.footer__inner img {
    width: 190px;
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    font-weight: 600;
}

.footer__nav a,
.footer__wa {
    text-decoration: none;
}

.footer__nav a:hover,
.footer__wa:hover {
    color: var(--rosa-dark);
}

.footer__wa {
    font-weight: 700;
    color: var(--verde-dark);
}

.footer__small {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* WhatsApp flotante */
.wa-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.wa-float svg {
    width: 30px;
    height: 30px;
    fill: var(--white);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .phone__hint { animation: none; }
}

/* ===== Tablet en adelante ===== */
@media (min-width: 700px) {
    .benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .benefit {
        grid-template-columns: 1fr;
        row-gap: 0.6rem;
        text-align: center;
        justify-items: center;
        padding: 1.6rem 1.2rem;
    }

    .benefit__icon {
        grid-row: auto;
    }

    .templates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steps li {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 0.6rem;
        text-align: center;
        padding: 1.8rem 1.2rem;
    }

    .steps__num {
        grid-row: auto;
    }

    .includes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .prices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== Computador ===== */
@media (min-width: 960px) {
    .nav__inner {
        padding: 0.8rem 2rem;
    }

    .nav__logo img {
        width: 210px;
    }

    .nav__toggle {
        display: none;
    }

    .nav__menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.8rem;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .nav__menu a:not(.btn) {
        padding: 0.3rem 0;
        border: 0;
        border-bottom: 2px solid transparent;
    }

    .nav__menu a:not(.btn):hover {
        border-bottom-color: var(--verde);
    }

    .nav__menu .btn {
        margin-top: 0;
    }

    .hero {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        padding: 4.5rem 2rem 4rem;
    }

    .section {
        padding: 5.5rem 2rem;
    }

    .wa-float {
        display: none;
    }

    .footer {
        padding-bottom: 2.5rem;
    }

    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* =========================================================
   Componentes nuevos: vista previa en vivo, problemas que
   resuelve, plantillas, catálogo y página de detalle
   ========================================================= */

.nav__menu a[aria-current="page"] {
    color: var(--rosa-dark);
}

/* Celular con la invitación funcionando adentro.
   El iframe se dibuja a tamaño de celular real (390 x 844)
   y se encoge con transform para caber en el marco. */
.live {
    --scale: 0.62;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.live__phone {
    position: relative;
    width: calc(390px * var(--scale) + 22px);
    height: calc(844px * var(--scale) + 22px);
    padding: 11px;
    border-radius: 40px;
    background: var(--ink);
    box-shadow: 0 30px 60px rgba(30, 47, 69, 0.28), 0 0 0 10px var(--verde-soft);
    overflow: hidden;
}

.live__screen {
    width: 390px;
    height: 844px;
    border: 0;
    border-radius: calc(30px / var(--scale));
    background: #A98583;
    transform: scale(var(--scale));
    transform-origin: top left;
}

.live__caption {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--verde-dark);
}

/* Lo que otras invitaciones no resuelven */
.pains {
    display: grid;
    gap: 1rem;
    max-width: var(--max);
    margin: 2.5rem auto 0;
}

.pain {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.pain__before {
    align-self: flex-start;
    padding: 0.45rem 0.8rem;
    border-radius: 14px 14px 14px 4px;
    background: var(--violeta-soft);
    color: var(--violeta);
    font-size: 0.95rem;
    font-style: italic;
}

.pain h3 {
    margin-top: 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.pain h3::before {
    content: "✓ ";
    color: var(--verde-dark);
}

/* Etiquetas de temática / evento */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tags span {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--verde-soft);
    color: var(--verde-dark);
    font-size: 0.8rem;
    font-weight: 700;
}

.tags .tags__launch {
    background: var(--rosa-soft);
    color: var(--rosa-dark);
}

.tags--events span {
    background: var(--violeta-soft);
    color: var(--violeta);
}

/* Plantilla destacada (inicio) */
.featured {
    display: grid;
    max-width: 860px;
    margin: 2.5rem auto 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.featured__cover,
.card__cover--pasaporte {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 230px;
    background: #A98583;
    color: #F3E7E2;
    text-decoration: none;
}

.featured__cover .badge,
.card__cover .badge {
    position: absolute;
    top: 14px;
    left: 14px;
}

.featured__title,
.card__cover-title {
    letter-spacing: 0.22em;
}

.featured__seal,
.card__cover-seal {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    border: 2px solid #F3E7E2;
    border-radius: 50%;
    font-family: var(--title);
    font-size: 1.9rem;
}

.featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.6rem;
}

.featured__body h3 {
    font-family: var(--title);
    font-size: 2rem;
}

.featured__actions,
.card__actions,
.detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.prices__note--small {
    margin-top: 0.4rem;
    font-weight: 400;
    font-size: 0.9rem;
}

/* ===== Página de plantillas ===== */
.page-head {
    padding: 3rem 1.25rem 0.5rem;
}

.page-head .section__title {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
}

.section--catalog {
    padding-top: 2rem;
}

.filters {
    display: flex;
    gap: 0.5rem;
    max-width: var(--max);
    margin: 0 auto 2rem;
    padding-bottom: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.filters::-webkit-scrollbar {
    display: none;
}

.chip {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font: 600 0.95rem var(--body);
    box-shadow: inset 0 0 0 2px #E2D6C4;
    cursor: pointer;
}

.chip.is-active {
    background: var(--ink);
    color: var(--white);
    box-shadow: none;
}

.chip--soon {
    color: #8A8F99;
    cursor: default;
    box-shadow: inset 0 0 0 2px #ECE3D6;
    background: transparent;
}

.catalog {
    display: grid;
    gap: 1.25rem;
    max-width: var(--max);
    margin: 0 auto;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.card[hidden] {
    display: none;
}

.card__cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
}

.card__cover--soon {
    background: repeating-linear-gradient(-45deg, var(--verde-soft) 0 14px, #F2EBDF 14px 28px);
}

.card__cover--soon img {
    opacity: 0.4;
}

.card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1.3rem 1.4rem 1.5rem;
}

.card__body h2 {
    font-family: var(--title);
    font-size: 1.8rem;
}

.card--soon .card__body h2 {
    color: #7D8592;
}

.catalog__empty {
    text-align: center;
    padding: 2rem 0;
}

.custom-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    max-width: var(--max);
    margin: 2.5rem auto 0;
    padding: 1.8rem 1.6rem;
    border-radius: var(--radius);
    background: var(--violeta-soft);
}

.custom-cta h2 {
    font-family: var(--title);
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

/* ===== Detalle de plantilla ===== */
.breadcrumb {
    max-width: var(--max);
    margin: 0 auto;
    padding: 1.2rem 1.25rem 0;
    font-weight: 600;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--rosa-dark);
}

.detail {
    display: grid;
    gap: 2.5rem;
    max-width: var(--max);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.detail__info {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.detail__title {
    font-family: var(--title);
    font-size: clamp(2.6rem, 10vw, 3.6rem);
}

.detail__lead {
    font-size: 1.15rem;
}

.detail__price {
    font-size: 2rem;
    font-weight: 700;
}

.detail__price small {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--verde-dark);
}

.detail__h2 {
    margin-top: 1.2rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.palettes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.palettes li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.palettes span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px #E2D6C4;
}

.includes--detail {
    grid-template-columns: 1fr;
    margin: 0;
}

@media (min-width: 700px) {
    .pains {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured {
        grid-template-columns: 1fr 1fr;
    }

    .featured__body {
        justify-content: center;
        padding: 2rem;
    }

    .catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-cta {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .includes--detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .pains {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detail {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 4rem;
        padding-top: 2.5rem;
    }

    .detail .live {
        position: sticky;
        top: 110px;
    }

    .live {
        --scale: 0.66;
    }
}

/* =========================================================
   Pulido de diseño (frontend-design)
   - Un solo elemento audaz: el celular saliendo del sobre rosa
     del logo, en la portada.
   - Las quejas se leen como un chat de WhatsApp, que es por
     donde viajan las invitaciones.
   - Sin etiquetas sobre los títulos, sin palabras resaltadas.
   ========================================================= */

:root {
    --chat-in: #FFFDF9;
    --chat-out: #F3E4E0; /* vino muy suave */
    --shadow-soft: 0 1px 0 rgba(30, 47, 69, 0.06);
}

/* Títulos: escala 1.25 con Courgette solo en H1 y H2 grandes */
.hero__title {
    font-size: clamp(2.5rem, 9vw, 4.2rem);
    line-height: 1.05;
    max-width: 14ch;
}

.section__title {
    font-size: clamp(2rem, 6.5vw, 2.75rem);
}

/* ----- Portada: celular que sale del sobre ----- */
.hero__stage {
    position: relative;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
}

.live--hero {
    --scale: 0.58;
    position: relative;
    z-index: 3; /* delante del sobre: la pantalla queda libre */
    margin-bottom: -96px; /* solo el borde inferior del celular baja al sobre */
}

.live--hero .live__phone {
    box-shadow: 0 24px 50px rgba(30, 47, 69, 0.25);
    transform: rotate(-4deg);
}

.envelope {
    position: relative;
    z-index: 1; /* detrás del celular */
    width: 330px;
    height: 170px;
    border-radius: 26px;
    background: var(--rosa);
    box-shadow: 0 18px 40px rgba(30, 47, 69, 0.30);
    overflow: hidden;
}

/* La "V" del sobre, en el crema del fondo */
.envelope__flap {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top right, transparent calc(50% - 3px), rgba(248, 243, 235, 0.55) calc(50% - 3px), rgba(248, 243, 235, 0.55) calc(50% + 3px), transparent calc(50% + 3px)) left bottom / 50% 100% no-repeat,
        linear-gradient(to top left, transparent calc(50% - 3px), rgba(248, 243, 235, 0.55) calc(50% - 3px), rgba(248, 243, 235, 0.55) calc(50% + 3px), transparent calc(50% + 3px)) right bottom / 50% 100% no-repeat;
    opacity: 0.9;
}

.hero__stage .live__caption {
    margin-top: 1rem;
}

/* ----- Chat: quejas y respuestas ----- */
.chat {
    display: grid;
    gap: 1.6rem;
    max-width: 960px;
    margin: 2.5rem auto 0;
}

.chat__pair {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bubble {
    position: relative;
    max-width: 86%;
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
}

.bubble--in {
    align-self: flex-start;
    border-radius: 4px 18px 18px 18px;
    background: var(--white);
    color: #3E4A5C;
    box-shadow: var(--shadow-soft);
}

.bubble--out {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-radius: 18px 4px 18px 18px;
    background: var(--chat-out);
    color: var(--ink);
}

.bubble--out strong {
    font-weight: 700;
}

/* Doble palomita de "leído", en verde */
.bubble--out::after {
    content: "✓✓";
    align-self: flex-end;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.15em;
    color: var(--verde-dark);
}

/* ----- Pasos: un camino, porque sí es una secuencia ----- */
.steps {
    position: relative;
}

.steps li {
    background: transparent;
    box-shadow: none;
    padding: 0.6rem 0;
}

@media (min-width: 700px) {
    .steps::before {
        content: "";
        position: absolute;
        top: 2.35rem;
        left: 16%;
        right: 16%;
        border-top: 2px dashed var(--rosa);
        opacity: 0.6;
    }

    .steps li {
        position: relative;
        padding: 0.6rem 1rem;
    }

    .steps__num {
        box-shadow: 0 0 0 8px var(--crema);
    }
}

/* ----- Preguntas: lista con divisores, no tarjetas ----- */
.faq {
    gap: 0;
}

.faq details {
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #E2D6C4;
}

.faq details:first-child {
    border-top: 1px solid #E2D6C4;
}

.faq summary {
    padding-left: 0;
}

.faq details p {
    padding-left: 0;
}

/* ----- Menos sombras repetidas ----- */
.featured,
.card,
.price:not(.price--main) {
    box-shadow: 0 0 0 1px #E8DECF;
}

@media (min-width: 700px) {
    .chat {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }
}

@media (min-width: 960px) {
    .live--hero {
        --scale: 0.62;
    }

    .envelope {
        width: 380px;
        height: 190px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Un solo momento: el celular sube desde el sobre al cargar */
    .live--hero .live__phone {
        animation: rise 900ms cubic-bezier(.2, .8, .2, 1) 200ms both;
    }

    @keyframes rise {
        from { transform: translateY(80px) rotate(0deg); opacity: 0; }
        to { transform: translateY(0) rotate(-4deg); opacity: 1; }
    }
}


/* =========================================================
   Ajustes del 13-oct: fondo con textura, portada sin sobre,
   dos caminos en "Así funciona" y cierre de preguntas.
   ========================================================= */

/* Grano de papel muy suave sobre todo el fondo */
body {
    background-color: var(--crema);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .18 0 0 0 0 .27 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.section--tint {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(226, 213, 193, 0.65) 0%, rgba(235, 225, 210, 0.35) 100%);
}

/* Portada: manchas de color suaves detrás del celular */
.hero {
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    background:
        radial-gradient(38rem 30rem at 85% 35%, rgba(163, 58, 58, 0.10), transparent 70%),
        radial-gradient(30rem 26rem at 70% 85%, rgba(107, 58, 94, 0.10), transparent 70%),
        radial-gradient(26rem 22rem at 10% 10%, rgba(30, 47, 69, 0.06), transparent 70%);
    pointer-events: none;
}

.live--hero {
    margin-bottom: 0;
}

/* Círculo arena detrás del celular */
.hero__stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #E9D9CF;
    transform: translate(-50%, -58%);
    z-index: 0;
}

/* El sello de la marca, como estampilla */
.hero__stamp {
    position: absolute;
    z-index: 4;
    left: max(6px, calc(50% - 186px)); /* fuera de la pantalla del celular */
    bottom: 110px;
    width: 60px;
    height: auto;
    transform: rotate(-10deg);
    filter: drop-shadow(0 8px 14px rgba(30, 47, 69, 0.25));
}

/* Así funciona: dos caminos */
.paths {
    display: grid;
    gap: 1.25rem;
    max-width: 960px;
    margin: 2rem auto 0;
}

.path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 0 0 1px #E5DACA;
}

.path--custom {
    background: var(--ink);
    color: var(--crema);
    box-shadow: none;
}

.path__title {
    margin: 0;
    font-family: var(--title);
    font-weight: 400;
    font-size: 1.9rem;
}

.path__time {
    margin: 0;
    font-weight: 700;
    color: var(--rosa);
}

.path--custom .path__time {
    color: #E3A7A0;
}

.path__steps {
    counter-reset: paso;
    list-style: none;
    margin: 0.5rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.path__steps li {
    counter-increment: paso;
    position: relative;
    padding-left: 2.6rem;
    line-height: 1.45;
}

.path__steps li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -0.1rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--rosa);
    color: var(--white);
    font-family: var(--title);
    font-size: 1rem;
}

.path--custom .path__steps li::before {
    background: var(--crema);
    color: var(--ink);
}

.path--custom .btn--ghost {
    color: var(--crema);
    box-shadow: inset 0 0 0 2px var(--crema);
}

.path--custom .btn--ghost:hover {
    background: var(--crema);
    color: var(--ink);
}

.path .btn {
    margin-top: auto;
}

/* Cierre de preguntas */
.faq__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: 2rem;
    text-align: center;
}

.faq__more p {
    margin: 0;
    font-weight: 600;
}

@media (min-width: 700px) {
    .paths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .hero__stage::before {
        width: 400px;
        height: 400px;
    }

    .hero__stamp {
        width: 96px;
        left: calc(50% - 250px);
        bottom: 150px;
    }
}

/* =========================================================
   Ajustes del 13-oct (2): portada con foto, menú que se
   esconde en el pie, pie oscuro y paletas que se pueden tocar.
   ========================================================= */

/* Menú: se oculta al llegar al pie de página */
.nav {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav.nav--hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Portada con foto de celebración y capa azul noche encima */
.hero--photo::before {
    background:
        linear-gradient(100deg, rgba(30, 47, 69, 0.92) 0%, rgba(30, 47, 69, 0.78) 45%, rgba(30, 47, 69, 0.55) 100%),
        url("../assets/fondo-corazon.webp") center 35% / cover no-repeat;
}

.hero--photo {
    color: var(--crema);
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}

.hero--photo .hero__title {
    color: var(--crema);
}

.hero--photo .hero__lead {
    color: rgba(244, 237, 226, 0.92);
}

.hero--photo .btn {
    background: var(--crema);
    color: var(--ink);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.hero--photo .btn:hover {
    background: var(--white);
}

.hero--photo .btn--ghost {
    background: transparent;
    color: var(--crema);
    box-shadow: inset 0 0 0 2px var(--crema);
}

.hero--photo .btn--ghost:hover {
    background: var(--crema);
    color: var(--ink);
}

.hero--photo .trust li {
    color: rgba(244, 237, 226, 0.9);
}

.hero--photo .trust li::before {
    color: #E3A7A0;
}

.hero--photo .live__caption {
    color: rgba(244, 237, 226, 0.85);
}

.hero--photo .hero__stage::before {
    background: rgba(244, 237, 226, 0.12);
}

.hero--photo .hero__stamp {
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}


/* Pie de página oscuro */
.footer {
    background: var(--ink);
    color: var(--crema);
}

.footer__nav a,
.footer__wa {
    color: var(--crema);
}

.footer__nav a:hover,
.footer__wa:hover {
    color: #E3A7A0;
}

.footer__wa {
    color: #E3A7A0;
}

.footer__small {
    color: rgba(244, 237, 226, 0.7);
}

/* Paletas del detalle: botones */
.detail__hint {
    margin: -0.4rem 0 0.8rem;
    font-size: 0.95rem;
    opacity: 0.8;
}

.palette {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem 0.5rem 0.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.palette:hover {
    background: var(--white);
}

.palette.is-active {
    background: var(--white);
    box-shadow: inset 0 0 0 2px var(--ink);
    font-weight: 700;
}

.palette:focus-visible {
    outline: 3px solid var(--violeta);
    outline-offset: 2px;
}

.hero--photo .hero__title {
    text-wrap: balance;
}

.hero--photo::before {
    background:
        linear-gradient(100deg, rgba(30, 47, 69, 0.93) 0%, rgba(30, 47, 69, 0.84) 50%, rgba(30, 47, 69, 0.74) 100%),
        url("../assets/fondo-corazon.webp") center 35% / cover no-repeat;
}

/* Borde claro para que el celular y el sello no se pierdan en lo oscuro */
.hero--photo .live__phone {
    box-shadow: 0 0 0 3px rgba(244, 237, 226, 0.55), 0 24px 50px rgba(0, 0, 0, 0.35);
}

.hero--photo .hero__stamp {
    filter: drop-shadow(0 0 1.5px rgba(244, 237, 226, 0.9)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}


/* =========================================================
   Secciones intercaladas: foto / crema / foto / crema...
   ========================================================= */
.section--photo {
    position: relative;
    isolation: isolate;
    color: var(--crema);
}

.section--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(30, 47, 69, 0.86), rgba(30, 47, 69, 0.86)),
        var(--foto) center / cover no-repeat;
}

.section--brindis { --foto: url("../assets/fondo-corazon.webp"); }
.section--bengalas { --foto: url("../assets/fondo-copas.webp"); }

.section--photo .section__title,
.section--photo .section__lead {
    color: var(--crema);
}

/* Tarjetas claras sobre la foto */
.section--photo .path,
.section--photo .path--custom {
    background: var(--crema);
    color: var(--ink);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.section--photo .path--custom .path__time { color: var(--rosa); }
.section--photo .path--custom .path__steps li::before { background: var(--ink); color: var(--crema); }
.section--photo .path--custom .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.section--photo .path--custom .btn--ghost:hover { background: var(--ink); color: var(--crema); }

.section--photo .price--main {
    box-shadow: 0 0 0 2px rgba(244, 237, 226, 0.5), 0 18px 40px rgba(0, 0, 0, 0.3);
}

.section--photo .prices__note {
    color: rgba(244, 237, 226, 0.9);
}

.section--photo .price:not(.price--main) {
    color: var(--ink);
}


/* =========================================================
   Ondas entre secciones: los bordes de las secciones con foto
   y del cierre se recortan con una curva suave.
   ========================================================= */
:root {
    --wave-h: 36px;
}

.section--photo::before {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 0 480 0 720 24 C960 48 1200 48 1440 24 V48 H0Z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
        linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 48 960 48 720 24 C480 0 240 0 0 24Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 0 480 0 720 24 C960 48 1200 48 1440 24 V48 H0Z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
        linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 48 960 48 720 24 C480 0 240 0 0 24Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
}

.section--photo {
    padding-top: calc(4rem + var(--wave-h));
    padding-bottom: calc(4rem + var(--wave-h));
}

/* Portada: solo onda abajo (arriba está el menú) */
.hero--photo::before {
    -webkit-mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 48 960 48 720 24 C480 0 240 0 0 24Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
    mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--wave-h) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V24 C1200 48 960 48 720 24 C480 0 240 0 0 24Z'/%3E%3C/svg%3E") bottom / 100% var(--wave-h) no-repeat;
}

.hero--photo {
    padding-bottom: calc(4rem + var(--wave-h));
}

/* Cierre vino: onda arriba */
.cta {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 0 480 0 720 24 C960 48 1200 48 1440 24 V48 H0Z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C240 0 480 0 720 24 C960 48 1200 48 1440 24 V48 H0Z'/%3E%3C/svg%3E") top / 100% var(--wave-h) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
    padding-top: calc(4rem + var(--wave-h));
}

@media (min-width: 960px) {
    :root {
        --wave-h: 56px;
    }
}

/* Repaso final 14-oct: etiquetas legibles, paletas en una
   columna en celulares angostos y caja "a tu medida" en arena */
.badge,
.tags span {
    font-size: 0.875rem;
}

@media (max-width: 479px) {
    .palettes {
        grid-template-columns: 1fr;
    }
}

.custom-cta {
    background: var(--verde-soft);
}

/* Botón flotante de WhatsApp: se esconde al llegar al pie de página */
.wa-float {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.wa-float.wa-float--hidden {
    transform: translateY(20px) scale(0.8);
    opacity: 0;
    pointer-events: none;
}

/* Portada en celular: botones en la misma línea y textos más
   compactos, para que se vea el celular con la invitación */
@media (max-width: 699px) {
    .hero--photo {
        padding-top: 2rem;
        gap: 2rem;
    }

    .hero--photo .hero__text {
        gap: 0.9rem;
    }

    .hero--photo .hero__title {
        font-size: clamp(2.1rem, 10vw, 2.6rem);
    }

    .hero--photo .hero__lead {
        font-size: 1rem;
    }

    .hero--photo .hero__actions {
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.6rem;
    }

    .hero--photo .hero__actions .btn {
        flex: 1 1 0;
        min-height: 46px;
        padding: 0.7rem 0.6rem;
        font-size: 0.95rem;
        text-align: center;
    }

    .hero--photo .trust {
        gap: 0.3rem 0.9rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 379px) {
    .hero--photo .hero__actions .btn {
        font-size: 0.88rem;
        padding: 0.6rem 0.4rem;
    }
}