/* ==========================================

   SORPRESAS.CSS

   FORMULARIO + EXPERIENCIA 2D PREMIUM

   ========================================== */

 

:root {

    --s-fondo: #08101b;

    --s-panel: rgba(12, 21, 34, 0.82);

    --s-panel-fuerte: rgba(10, 18, 30, 0.96);

    --s-crema: #f3e8d4;

    --s-marfil: #eadbc5;

    --s-azul: #afc5d6;

    --s-azul-claro: #c9d8e3;

    --s-salvia: #bcc9ac;

    --s-rojo: #b52d36;

    --s-cuero: #9d5d43;

    --s-texto: #f3e8d4;

    --s-secundario: #9eabba;

    --s-suave: #77869a;

    --s-borde: rgba(234, 219, 197, 0.11);

    --s-sombra: 0 30px 90px rgba(0, 0, 0, 0.34);

}

 

 

/* ==========================================

   PÁGINA

   ========================================== */

 

.sorpresas-page {

    width: min(1240px, calc(100% - 32px));

    margin: 0 auto;

    padding: 42px 0 80px;

}

 

 

/* ==========================================

   CABECERA

   ========================================== */

 

.sorpresas-header {

    max-width: 800px;

    margin-bottom: 34px;

}

 

.sorpresas-volver {

    display: inline-flex;

    margin-bottom: 26px;

    color: var(--s-azul);

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

}

 

.sorpresas-etiqueta {

    display: block;

    margin-bottom: 10px;

    color: var(--s-salvia);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}

 

.sorpresas-header h1 {

    margin: 0 0 14px;

    color: var(--s-crema);

    font-size: clamp(44px, 7vw, 82px);

    line-height: 0.95;

    letter-spacing: -3px;

}

 

.sorpresas-header p {

    max-width: 700px;

    margin: 0;

    color: var(--s-secundario);

    font-size: 17px;

    line-height: 1.7;

}

 

 

/* ==========================================

   CREAR SORPRESA

   ========================================== */

 

.crear-sorpresa {

    margin-bottom: 28px;

    padding: 34px;

    border-radius: 30px;

    background:

        radial-gradient(

            circle at 90% 10%,

            rgba(175, 197, 214, 0.09),

            transparent 28%

        ),

        linear-gradient(

            145deg,

            rgba(18, 29, 45, 0.96),

            rgba(9, 17, 29, 0.98)

        );

    border: 1px solid var(--s-borde);

    box-shadow: var(--s-sombra);

}

 

.crear-sorpresa-cabecera {

    max-width: 700px;

    margin-bottom: 26px;

}

 

.crear-sorpresa-cabecera > span {

    display: block;

    margin-bottom: 8px;

    color: var(--s-salvia);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.crear-sorpresa-cabecera h2 {

    margin: 0 0 10px;

    color: var(--s-crema);

    font-size: clamp(32px, 5vw, 52px);

    line-height: 1;

    letter-spacing: -1.8px;

}

 

.crear-sorpresa-cabecera p {

    margin: 0;

    color: var(--s-secundario);

    line-height: 1.65;

}

 

.crear-sorpresa-form {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}

 

.campo {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 8px;

}

 

.campo-completo {

    grid-column: 1 / -1;

}

 

.campo label {

    color: var(--s-crema);

    font-size: 13px;

    font-weight: 850;

}

 

.campo label span {

    margin-left: 6px;

    color: var(--s-suave);

    font-size: 11px;

    font-weight: 700;

}

 

.campo input,

.campo select,

.campo textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(234, 219, 197, 0.12);

    border-radius: 15px;

    outline: none;

    background: rgba(255, 255, 255, 0.045);

    color: var(--s-texto);

    font: inherit;

    transition:

        border-color 0.2s ease,

        background 0.2s ease,

        box-shadow 0.2s ease;

}

 

.campo input,

.campo select {

    min-height: 52px;

    padding: 0 15px;

}

 

.campo textarea {

    min-height: 118px;

    padding: 14px 15px;

    resize: vertical;

    line-height: 1.55;

}

 

.campo input::placeholder,

.campo textarea::placeholder {

    color: #6e7b8d;

}

 

.campo input:focus,

.campo select:focus,

.campo textarea:focus {

    border-color: rgba(175, 197, 214, 0.5);

    background: rgba(175, 197, 214, 0.06);

    box-shadow: 0 0 0 4px rgba(175, 197, 214, 0.06);

}

 

.campo select option {

    background: #101827;

    color: var(--s-texto);

}

 

.campo small {

    color: var(--s-suave);

    line-height: 1.5;

}

 

.contador-mensaje {

    align-self: flex-end;

    color: var(--s-suave);

    font-size: 11px;

}

 

 

/* ==========================================

   AUTOCOMPLETE

   ========================================== */

 

.campo-autocomplete {

    z-index: 10;

}

 

.sugerencias-lugar {

    position: absolute;

    z-index: 30;

    left: 0;

    right: 0;

    top: calc(100% + 7px);

    display: none;

    overflow: hidden;

    border: 1px solid rgba(234, 219, 197, 0.12);

    border-radius: 16px;

    background: #101927;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38);

}

 

.sugerencias-lugar.visible {

    display: block;

}

 

.sugerencia-lugar {

    display: block;

    width: 100%;

    padding: 12px 14px;

    border: 0;

    border-bottom: 1px solid rgba(234, 219, 197, 0.07);

    background: transparent;

    color: var(--s-texto);

    text-align: left;

    font: inherit;

    font-size: 13px;

    cursor: pointer;

}

 

.sugerencia-lugar:last-child {

    border-bottom: 0;

}

 

.sugerencia-lugar:hover {

    background: rgba(175, 197, 214, 0.08);

}

 

.sugerencia-lugar strong {

    display: block;

    margin-bottom: 2px;

    font-size: 13px;

}

 

.sugerencia-lugar small {

    color: var(--s-suave);

}

 

 

/* ==========================================

   ACCIONES DEL FORMULARIO

   ========================================== */

 

.crear-sorpresa-acciones {

    grid-column: 1 / -1;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    padding-top: 4px;

}

 

.btn-vista-previa {

    min-height: 52px;

    padding: 13px 22px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(

        110deg,

        var(--s-marfil),

        var(--s-azul-claro)

    );

    color: #111927;

    font: inherit;

    font-weight: 900;

    cursor: pointer;

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease;

}

 

.btn-vista-previa:hover {

    transform: translateY(-2px);

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);

}

 

.crear-sorpresa-acciones p {

    margin: 0;

    color: var(--s-suave);

    font-size: 12px;

}

 

 

/* ==========================================

   RESUMEN VISTA PREVIA

   ========================================== */

 

.resumen-sorpresa {

    margin-bottom: 28px;

    padding: 28px 30px;

    border-radius: 26px;

    background:

        linear-gradient(

            140deg,

            rgba(188, 201, 172, 0.08),

            rgba(15, 25, 40, 0.96)

        );

    border: 1px solid rgba(188, 201, 172, 0.16);

    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);

    animation: resumenEntrar 0.55s ease both;

}

 

.resumen-sorpresa > div:first-child > span {

    display: block;

    margin-bottom: 7px;

    color: var(--s-salvia);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.resumen-sorpresa h2 {

    margin: 0;

    color: var(--s-crema);

    font-size: clamp(27px, 4vw, 40px);

    line-height: 1.05;

}

 

.resumen-sorpresa h2 strong {

    color: var(--s-azul-claro);

}

 

.resumen-sorpresa-datos {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 22px;

}

 

.resumen-sorpresa-datos > div {

    padding: 15px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(234, 219, 197, 0.07);

}

 

.resumen-sorpresa-datos small {

    display: block;

    margin-bottom: 4px;

    color: var(--s-suave);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.2px;

}

 

.resumen-sorpresa-datos strong {

    color: var(--s-texto);

    font-size: 13px;

    line-height: 1.4;

}

 

.resumen-sorpresa-acciones {

    display: flex;

    gap: 10px;

    margin-top: 18px;

}

 

.btn-editar-sorpresa,

.btn-ver-experiencia {

    min-height: 46px;

    padding: 11px 17px;

    border-radius: 14px;

    font: inherit;

    font-weight: 850;

    cursor: pointer;

}

 

.btn-editar-sorpresa {

    border: 1px solid rgba(234, 219, 197, 0.12);

    background: rgba(255, 255, 255, 0.035);

    color: var(--s-secundario);

}

 

.btn-ver-experiencia {

    border: 0;

    background: var(--s-marfil);

    color: #111927;

}

 

@keyframes resumenEntrar {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

 

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

 

 

/* ==========================================

   CABECERA DEMO

   ========================================== */

 

.demo-sorpresa-wrapper {

    margin-top: 28px;

}

 

.demo-sorpresa-header {

    margin-bottom: 16px;

}

 

.demo-sorpresa-header span {

    color: var(--s-azul);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.demo-sorpresa-header h2 {

    margin: 5px 0 0;

    color: var(--s-crema);

    font-size: clamp(26px, 4vw, 38px);

    line-height: 1.1;

}

 

 

/* ==========================================

   SELECTOR

   ========================================== */

 

.sorpresas-selector {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 0 0 24px;

}

 

.sorpresa-opcion {

    appearance: none;

    min-height: 48px;

    padding: 12px 18px;

    border-radius: 999px;

    border: 1px solid rgba(234, 219, 197, 0.12);

    background: linear-gradient(

        145deg,

        rgba(27, 39, 59, 0.9),

        rgba(15, 23, 36, 0.96)

    );

    color: #afbdcd;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:

        transform 0.2s ease,

        color 0.2s ease,

        background 0.2s ease,

        border-color 0.2s ease;

}

 

.sorpresa-opcion:hover {

    transform: translateY(-2px);

    color: var(--s-crema);

    border-color: rgba(175, 197, 214, 0.32);

    background: rgba(175, 197, 214, 0.08);

}

 

.sorpresa-opcion.activa {

    color: #0d131d;

    background: linear-gradient(

        110deg,

        #eadbc5,

        #c9d8e3

    );

    border-color: rgba(234, 219, 197, 0.45);

}

 

 

/* ==========================================

   ESCENA

   ========================================== */

 

.experiencia {

    position: relative;

    width: 100%;

    height: 720px;

    overflow: hidden;

    isolation: isolate;

    border-radius: 34px;

    background:

        radial-gradient(

            circle at 68% 22%,

            rgba(175, 197, 214, 0.09),

            transparent 28%

        ),

        linear-gradient(

            180deg,

            #111827 0%,

            #0a111d 50%,

            #060b12 100%

        );

    border: 1px solid var(--s-borde);

    box-shadow: var(--s-sombra);

}

 

 

/* =========================================================

   CIELO REALISTA

   ========================================================= */

 

.experiencia {

    position: relative;

    overflow: hidden;

}

 

.experiencia-estrellas {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

 

    /* fondo del cielo con profundidad */

    background:

        radial-gradient(circle at 20% 15%, rgba(120, 160, 255, 0.10), transparent 18%),

        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.05), transparent 14%),

        radial-gradient(circle at 55% 70%, rgba(90, 130, 255, 0.06), transparent 20%),

        linear-gradient(180deg, #040814 0%, #07111f 45%, #020611 100%);

}

 

/* estrellas individuales */

.experiencia-estrella {

    position: absolute;

    border-radius: 50%;

    background: #ffffff;

    pointer-events: none;

    opacity: 0.85;

    filter: blur(0.2px);

    animation: parpadeoEstrella linear infinite;

}

 

/* algunas con brillo exterior */

.experiencia-estrella.grande {

    box-shadow:

        0 0 6px rgba(255,255,255,0.55),

        0 0 12px rgba(180,210,255,0.18);

}

 

/* algunas pequeñas y suaves */

.experiencia-estrella.suave {

    opacity: 0.45;

    filter: blur(0.4px);

}

 

@keyframes parpadeoEstrella {

    0% {

        opacity: 0.25;

        transform: scale(0.95);

    }

 

    50% {

        opacity: 1;

        transform: scale(1.08);

    }

 

    100% {

        opacity: 0.35;

        transform: scale(0.98);

    }

}

 

 

/* ==========================================

   PLANETA

   ========================================== */

 

.experiencia-planeta-wrap {

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 52%;

    width: min(680px, 62vw);

    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    pointer-events: none;

}

 

.experiencia-planeta {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    overflow: hidden;

    background-image:

        url("https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg");

    background-size: cover;

    background-position: 48% center;

    box-shadow:

        inset -70px -32px 100px rgba(0, 0, 0, 0.5),

        inset 36px 20px 58px rgba(255, 255, 255, 0.08),

        0 0 70px rgba(84, 149, 219, 0.18);

    animation: planetaRespirar 8s ease-in-out infinite;

}

 

.experiencia-planeta::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: linear-gradient(

        105deg,

        rgba(255, 255, 255, 0.09),

        transparent 30%,

        transparent 64%,

        rgba(0, 0, 0, 0.34)

    );

}

 

.experiencia-atmosfera {

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border: 1px solid rgba(145, 204, 255, 0.20);

    box-shadow:

        0 0 42px rgba(75, 158, 231, 0.20),

        inset 0 0 30px rgba(75, 158, 231, 0.10);

    animation: atmosferaPulso 4.6s ease-in-out infinite;

}

 

@keyframes planetaRespirar {

    0%, 100% {

        transform: scale(1);

    }

 

    50% {

        transform: scale(1.012);

    }

}

 

@keyframes atmosferaPulso {

    0%, 100% {

        opacity: 0.65;

    }

 

    50% {

        opacity: 1;

    }

}

 

 

/* ==========================================

   PUNTOS

   ========================================== */

 

.experiencia-punto {

    position: absolute;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: rgba(234, 219, 197, 0.95);

    box-shadow:

        0 0 0 0 rgba(234, 219, 197, 0.36),

        0 0 20px rgba(234, 219, 197, 0.7);

    animation: puntoPulso 2.1s ease-out infinite;

}

 

.experiencia-punto span {

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    background: #ffffff;

}

 

.experiencia-punto-origen {

    left: 18%;

    top: 63%;

}

 

.experiencia-punto-destino {

    right: 17%;

    top: 36%;

    animation-delay: 0.55s;

}

 

@keyframes puntoPulso {

    0% {

        box-shadow:

            0 0 0 0 rgba(234, 219, 197, 0.40),

            0 0 18px rgba(234, 219, 197, 0.72);

    }

 

    70% {

        box-shadow:

            0 0 0 18px rgba(234, 219, 197, 0),

            0 0 24px rgba(234, 219, 197, 0.35);

    }

 

    100% {

        box-shadow:

            0 0 0 0 rgba(234, 219, 197, 0),

            0 0 18px rgba(234, 219, 197, 0.55);

    }

}

 

 

/* ==========================================

   RUTA

   ========================================== */

 

.experiencia-ruta {

    position: absolute;

    inset: 0;

    z-index: 3;

    width: 100%;

    height: 100%;

    overflow: visible;

    pointer-events: none;

}

 

#rutaAnimada {

    stroke-dasharray: 1200;

    stroke-dashoffset: 1200;

}

 

 

/* ==========================================

   VIAJERO

   ========================================== */

 

.experiencia-viajero {

    position: absolute;

    z-index: 6;

    left: 0;

    top: 0;

    width: 150px;

    height: 150px;

    transform: translate(-50%, -50%);

    pointer-events: none;

    opacity: 0;

    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));

    will-change: left, top, transform, opacity;

}

 

.experiencia-viajero.visible {

    opacity: 1;

}

 

.objeto-2d {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

 

 

/* ==========================================

   ROSA

   ========================================== */

 

.rosa-2d {

    position: relative;

    width: 78px;

    height: 138px;

    transform: rotate(-22deg);

}

 

.rosa-2d-tallo {

    position: absolute;

    left: 37px;

    top: 48px;

    width: 6px;

    height: 88px;

    border-radius: 999px;

    background: linear-gradient(180deg, #63825c, #314e35);

    transform: rotate(6deg);

}

 

.rosa-2d-hoja {

    position: absolute;

    width: 31px;

    height: 16px;

    border-radius: 100% 0 100% 0;

    background: linear-gradient(135deg, #77966b, #3e6141);

}

 

.rosa-2d-hoja.uno {

    left: 17px;

    top: 86px;

    transform: rotate(-25deg);

}

 

.rosa-2d-hoja.dos {

    left: 42px;

    top: 105px;

    transform: rotate(156deg);

}

 

.rosa-2d-flor {

    position: absolute;

    left: 10px;

    top: 2px;

    width: 66px;

    height: 58px;

}

 

.rosa-2d-petalo {

    position: absolute;

    width: 36px;

    height: 38px;

    border-radius: 55% 55% 50% 50%;

    background: linear-gradient(

        145deg,

        #d84c58,

        #a8192c 62%,

        #7c1021

    );

    box-shadow:

        inset 5px 4px 8px rgba(255, 255, 255, 0.16);

}

 

.rosa-2d-petalo.p1 {

    left: 15px;

    top: 4px;

    transform: rotate(-6deg);

}

 

.rosa-2d-petalo.p2 {

    left: 4px;

    top: 14px;

    transform: rotate(-38deg) scale(.95);

}

 

.rosa-2d-petalo.p3 {

    right: 2px;

    top: 13px;

    transform: rotate(38deg) scale(.96);

}

 

.rosa-2d-petalo.p4 {

    left: 14px;

    top: 18px;

    transform: scale(.82);

}

 

 

/* ==========================================

   BEBÉ

   Compatible con ilustracionBebe() actual

   ========================================== */

 

.bebe-contenedor {

    position: relative;

    width: 150px;

    height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

}

 

.bebe-simple {

    position: relative;

    width: 140px;

    height: 150px;

    overflow: visible;

    transform-origin: center center;

    animation: bebeSimpleFlotar 3s ease-in-out infinite;

}

 

.bebe-cabeza-simple {

    position: absolute;

    width: 82px;

    height: 82px;

    top: 4px;

    right: 8px;

    border-radius: 50%;

    background: linear-gradient(145deg, #ffd7c0, #efb394);

    border: 4px solid #6a2b23;

    box-shadow: inset 5px 5px 9px rgba(255,255,255,.18);

    z-index: 5;

}

 

.bebe-ojo-simple {

    position: absolute;

    width: 14px;

    height: 8px;

    top: 35px;

    border-bottom: 3px solid #4c2d29;

    border-radius: 50%;

}

 

.bebe-ojo-simple.ojo1 {

    left: 18px;

    transform: rotate(5deg);

}

 

.bebe-ojo-simple.ojo2 {

    right: 18px;

    transform: rotate(-5deg);

}

 

.bebe-boca-simple {

    position: absolute;

    left: 50%;

    top: 55px;

    width: 16px;

    height: 8px;

    transform: translateX(-50%);

    border-bottom: 2px solid #b86c75;

    border-radius: 50%;

}

 

.bebe-cuerpo-simple {

    position: absolute;

    width: 78px;

    height: 86px;

    left: 36px;

    top: 65px;

    border-radius: 48% 52% 54% 46%;

    background: linear-gradient(145deg, #f7c7aa, #eca889);

    border: 4px solid #6a2b23;

    transform: rotate(-18deg);

    z-index: 3;

}

 

.bebe-brazo-simple {

    position: absolute;

    width: 60px;

    height: 21px;

    border-radius: 999px;

    background: #f3bea1;

    border: 4px solid #6a2b23;

    z-index: 6;

}

 

.bebe-brazo-simple.brazo1 {

    left: 6px;

    top: 82px;

    transform: rotate(-30deg);

}

 

.bebe-brazo-simple.brazo2 {

    right: 0;

    top: 94px;

    transform: rotate(26deg);

}

 

.bebe-pierna-simple {

    position: absolute;

    width: 62px;

    height: 24px;

    border-radius: 999px;

    background: #f3bea1;

    border: 4px solid #6a2b23;

    z-index: 4;

}

 

.bebe-pierna-simple.pierna1 {

    left: 12px;

    bottom: 8px;

    transform: rotate(25deg);

}

 

.bebe-pierna-simple.pierna2 {

    right: 3px;

    bottom: 0;

    transform: rotate(-31deg);

}

 

.bebe-cordon-simple {

    position: absolute;

    width: 58px;

    height: 68px;

    left: -1px;

    top: 17px;

    border-left: 8px solid #91405a;

    border-top: 8px solid #91405a;

    border-radius: 60% 0 0 25%;

    transform: rotate(-18deg);

    z-index: 2;

}

 

.bebe-cordon-simple::after {

    content: "";

    position: absolute;

    width: 39px;

    height: 49px;

    left: 7px;

    top: 6px;

    border-left: 3px solid #d37b93;

    border-top: 3px solid #d37b93;

    border-radius: 60% 0 0 25%;

}

 

@keyframes bebeSimpleFlotar {

    0%, 100% {

        translate: 0 0;

    }

    50% {

        translate: 0 -6px;

    }

}

 

/* Durante el viaje */

#experienciaViajero .bebe-contenedor {

    width: 145px;

    height: 145px;

}

 

#experienciaViajero .bebe-simple {

    scale: .78;

}

 

/* Reveal final */

#experienciaRevealVisual .bebe-contenedor,

.experiencia-reveal-ilustracion .bebe-contenedor {

    width: 220px;

    height: 220px;

}

 

#experienciaRevealVisual .bebe-simple,

.experiencia-reveal-ilustracion .bebe-simple {

    scale: 1.25;

}

 

/* ==========================================

   CORAZÓN PARTIDO

   ========================================== */

 

.corazon-roto-2d {

    position: relative;

    width: 120px;

    height: 104px;

}

 

.corazon-roto-parte {

    position: absolute;

    top: 5px;

    width: 62px;

    height: 90px;

    background: linear-gradient(145deg, #d94b58, #a9162a);

    box-shadow:

        inset 6px 5px 10px rgba(255, 255, 255, 0.12),

        0 10px 24px rgba(0, 0, 0, 0.18);

}

 

.corazon-roto-parte.izquierda {

    left: 0;

    clip-path: polygon(

        50% 15%,

        32% 0,

        8% 4%,

        0 23%,

        4% 44%,

        50% 100%,

        58% 68%,

        47% 52%,

        60% 37%,

        50% 15%

    );

    border-radius: 42px 0 0 36px;

}

 

.corazon-roto-parte.derecha {

    right: 0;

    clip-path: polygon(

        50% 15%,

        68% 0,

        92% 4%,

        100% 23%,

        96% 44%,

        50% 100%,

        42% 68%,

        53% 52%,

        40% 37%,

        50% 15%

    );

    border-radius: 0 42px 36px 0;

}

 

.corazon-roto-2d.romper

.corazon-roto-parte.izquierda {

    animation: corazonSepararIzq 1.2s cubic-bezier(.2,.8,.2,1) forwards;

}

 

.corazon-roto-2d.romper

.corazon-roto-parte.derecha {

    animation: corazonSepararDer 1.2s cubic-bezier(.2,.8,.2,1) forwards;

}

 

@keyframes corazonSepararIzq {

    to {

        transform: translate(-22px, 10px) rotate(-12deg);

    }

}

 

@keyframes corazonSepararDer {

    to {

        transform: translate(22px, 10px) rotate(12deg);

    }

}

 

 

/* ==========================================

   HELICÓPTERO

   ========================================== */

 

.helicoptero-2d {

    position: relative;

    width: 220px;

    height: 100px;

}

 

.helicoptero-cuerpo {

    position: absolute;

    right: 16px;

    top: 30px;

    width: 94px;

    height: 42px;

    border-radius: 50% 58% 45% 48%;

    background: linear-gradient(180deg, #f2f4f7, #c8d0d9);

    border: 3px solid #244a78;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);

}

 

.helicoptero-cuerpo::before {

    content: "";

    position: absolute;

    left: 12px;

    top: 8px;

    width: 32px;

    height: 17px;

    border-radius: 50%;

    background: #314e6f;

}

 

.helicoptero-cola {

    position: absolute;

    right: 95px;

    top: 44px;

    width: 66px;

    height: 11px;

    background: #d9e0e7;

    transform: rotate(-5deg);

    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);

}

 

.helicoptero-rotor {

    position: absolute;

    right: 19px;

    top: 10px;

    width: 104px;

    height: 5px;

    border-radius: 999px;

    background: #929ba7;

    transform-origin: center;

    animation: rotorGirar 0.22s linear infinite;

}

 

.helicoptero-pancarta {

    position: absolute;

    left: -116px;

    top: 35px;

    width: 160px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 12px;

    background: #fffdf9;

    color: #111827;

    font-size: 18px;

    font-weight: 950;

    letter-spacing: -0.6px;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);

    transform-origin: right center;

    animation: pancartaOndear 1.05s ease-in-out infinite alternate;

}

 

.helicoptero-cuerda {

    position: absolute;

    left: 39px;

    top: 51px;

    width: 52px;

    height: 2px;

    background: rgba(234, 219, 197, 0.7);

}

 

@keyframes rotorGirar {

    to {

        transform: rotateY(180deg);

    }

}

 

@keyframes pancartaOndear {

    from {

        transform: rotate(-2deg) skewY(-1deg);

    }

 

    to {

        transform: rotate(2deg) skewY(1deg);

    }

}

 

 

/* ==========================================

   CAJA + ANILLO

   ========================================== */

 

.anillo-caja-2d {

    position: relative;

    width: 132px;

    height: 116px;

    perspective: 500px;

}

 

.anillo-caja-base {

    position: absolute;

    left: 15px;

    bottom: 12px;

    width: 102px;

    height: 58px;

    border-radius: 9px 9px 18px 18px;

    background: linear-gradient(145deg, #9edfd8, #66bdb7);

    box-shadow:

        inset 0 0 0 2px rgba(255, 255, 255, 0.25),

        0 15px 28px rgba(0, 0, 0, 0.24);

}

 

.anillo-caja-interior {

    position: absolute;

    left: 24px;

    bottom: 22px;

    width: 84px;

    height: 36px;

    border-radius: 8px;

    background: linear-gradient(180deg, #161e28, #06090d);

}

 

.anillo-caja-tapa {

    position: absolute;

    left: 15px;

    top: 24px;

    width: 102px;

    height: 58px;

    border-radius: 18px 18px 9px 9px;

    background: linear-gradient(145deg, #a5e5de, #6fc5be);

    transform-origin: bottom center;

    transform: rotateX(0deg);

    transition: transform 1s cubic-bezier(.2,.75,.2,1);

}

 

.anillo-caja-2d.abierta

.anillo-caja-tapa {

    transform: rotateX(-112deg);

}

 

.anillo-diamante {

    position: absolute;

    left: 51px;

    bottom: 31px;

    width: 30px;

    height: 30px;

    opacity: 0;

    transform: translateY(12px) scale(.55);

    transition:

        opacity 0.5s ease 0.5s,

        transform 0.8s cubic-bezier(.15,.75,.2,1) 0.45s;

}

 

.anillo-caja-2d.abierta

.anillo-diamante {

    opacity: 1;

    transform: translateY(-13px) scale(1);

}

 

.anillo-diamante::before {

    content: "";

    position: absolute;

    left: 7px;

    bottom: -17px;

    width: 17px;

    height: 20px;

    border: 4px solid #e1e8f0;

    border-top: none;

    border-radius: 0 0 50% 50%;

}

 

.anillo-diamante::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(

        135deg,

        #ffffff 0%,

        #d7f5ff 30%,

        #ffffff 46%,

        #9fc9e5 62%,

        #ffffff 80%

    );

    clip-path: polygon(

        50% 0,

        92% 34%,

        70% 100%,

        30% 100%,

        8% 34%

    );

    filter: drop-shadow(0 0 8px rgba(220, 247, 255, 0.85));

    animation: diamanteBrillar 1.5s ease-in-out infinite;

}

 

@keyframes diamanteBrillar {

    0%, 100% {

        filter:

            brightness(1)

            drop-shadow(0 0 7px rgba(220, 247, 255, .6));

    }

 

    50% {

        filter:

            brightness(1.65)

            drop-shadow(0 0 16px rgba(255, 255, 255, .95));

    }

}

 

 

/* ==========================================

   MUDANZA

   ========================================== */

 

.mudanza-2d {

    position: relative;

    width: 148px;

    height: 118px;

}

 

.mudanza-caja {

    position: absolute;

    width: 68px;

    height: 58px;

    border-radius: 5px;

    background: linear-gradient(145deg, #c99761, #a97545);

    border: 1px solid rgba(89, 54, 28, 0.4);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);

}

 

.mudanza-caja::after {

    content: "MUDANZA";

    position: absolute;

    left: 50%;

    bottom: 12px;

    transform: translateX(-50%);

    padding: 3px 5px;

    background: rgba(255, 244, 221, 0.75);

    color: #5a3b22;

    font-size: 7px;

    font-weight: 900;

}

 

.mudanza-caja.uno {

    left: 5px;

    bottom: 10px;

    transform: rotate(-5deg);

}

 

.mudanza-caja.dos {

    left: 43px;

    top: 4px;

    transform: rotate(2deg);

}

 

.mudanza-caja.tres {

    right: 3px;

    bottom: 6px;

    transform: rotate(7deg);

}

 

.ropa-2d {

    position: absolute;

    width: 28px;

    height: 17px;

    border-radius: 50% 50% 30% 30%;

    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.18);

}

 

.ropa-2d.r1 {

    left: 19px;

    top: -8px;

    background: #e8a8c0;

}

 

.ropa-2d.r2 {

    left: 40px;

    top: -6px;

    background: #87aacb;

}

 

.ropa-2d.r3 {

    left: 48px;

    top: -6px;

    background: #e7cf8e;

}

 

 

/* ==========================================

   PASTEL

   ========================================== */

 

.pastel-2d {

    position: relative;

    width: 118px;

    height: 130px;

}

 

.pastel-base {

    position: absolute;

    left: 11px;

    bottom: 12px;

    width: 96px;

    height: 58px;

    border-radius: 16px 16px 22px 22px;

    background: linear-gradient(180deg, #ffc2d7, #e994b4);

    box-shadow:

        inset 0 6px 0 rgba(255,255,255,.18),

        0 16px 26px rgba(0,0,0,.18);

}

 

.pastel-nivel {

    position: absolute;

    left: 27px;

    bottom: 61px;

    width: 64px;

    height: 38px;

    border-radius: 13px 13px 16px 16px;

    background: linear-gradient(180deg, #ffe1ec, #f4abc4);

}

 

.pastel-crema {

    position: absolute;

    height: 8px;

    border-radius: 999px;

    background: #fff6f0;

}

 

.pastel-crema.uno {

    left: 14px;

    bottom: 58px;

    width: 90px;

}

 

.pastel-crema.dos {

    left: 30px;

    bottom: 94px;

    width: 58px;

}

 

.pastel-vela {

    position: absolute;

    bottom: 99px;

    width: 5px;

    height: 24px;

    border-radius: 999px;

    background: #fff9ee;

}

 

.pastel-vela.v1 {

    left: 42px;

}

 

.pastel-vela.v2 {

    left: 57px;

}

 

.pastel-vela.v3 {

    left: 72px;

}

 

.pastel-llama {

    position: absolute;

    left: 50%;

    top: -11px;

    width: 9px;

    height: 13px;

    transform: translateX(-50%);

    border-radius: 50% 50% 45% 45%;

    background: radial-gradient(

        circle at 50% 70%,

        #fff4b2,

        #ffbd3c 55%,

        #ff7f1f

    );

    box-shadow: 0 0 10px rgba(255, 173, 55, 0.8);

    animation: velaFuego 0.8s ease-in-out infinite alternate;

}

 

@keyframes velaFuego {

    from {

        transform: translateX(-50%) rotate(-4deg) scale(.92);

    }

 

    to {

        transform: translateX(-50%) rotate(5deg) scale(1.08);

    }

}

 

 

/* ==========================================

   INTRO

   ========================================== */

 

.experiencia-intro {

    position: absolute;

    z-index: 8;

    top: 38px;

    left: 40px;

    max-width: 520px;

    padding: 23px 26px;

    border-radius: 23px;

    background: rgba(10, 18, 29, 0.66);

    border: 1px solid rgba(234, 219, 197, 0.09);

    backdrop-filter: blur(18px);

    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);

    transition:

        opacity 0.55s ease,

        transform 0.55s ease,

        filter 0.55s ease;

}

 

.experiencia-intro.saliendo {

    opacity: 0;

    transform: translateY(-12px);

    filter: blur(7px);

}

 

.experiencia-intro > span {

    display: block;

    margin-bottom: 10px;

    color: var(--s-azul);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}

 

.experiencia-intro h2 {

    margin: 0 0 8px;

    color: var(--s-crema);

    font-size: clamp(29px, 4vw, 47px);

    line-height: 1.04;

    letter-spacing: -1.4px;

}

 

.experiencia-intro p {

    margin: 0;

    color: var(--s-secundario);

    line-height: 1.65;

}

 

 

/* ==========================================

   LUGARES

   ========================================== */

 

.experiencia-lugares {

    position: absolute;

    z-index: 7;

    left: 34px;

    right: 34px;

    bottom: 24px;

    display: flex;

    justify-content: space-between;

    pointer-events: none;

}

 

.experiencia-lugar {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

 

.experiencia-lugar-destino {

    text-align: right;

}

 

.experiencia-lugar small {

    color: var(--s-suave);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.experiencia-lugar strong {

    color: var(--s-crema);

    font-size: 14px;

}

 

 

/* ==========================================

   REVEAL

   ========================================== */

 

.experiencia-reveal-visual {

    position: absolute;

    z-index: 9;

    left: 50%;

    top: 43%;

    width: 260px;

    height: 230px;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}

 

.experiencia-reveal-ilustracion {

    position: relative;

    z-index: 2;

    width: 200px;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.30));

    animation: revealObjeto 0.95s cubic-bezier(.16,.82,.22,1) both;

}

 

.experiencia-reveal-brillo {

    position: absolute;

    z-index: 1;

    width: 210px;

    height: 210px;

    border-radius: 50%;

    background: radial-gradient(

        circle,

        rgba(255,255,255,.25),

        rgba(175,197,214,.11) 30%,

        transparent 68%

    );

    filter: blur(4px);

    animation: revealAura 2.5s ease-in-out infinite;

}

 

@keyframes revealObjeto {

    from {

        opacity: 0;

        transform: translateY(22px) scale(.65);

        filter: blur(10px);

    }

 

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

        filter: blur(0);

    }

}

 

@keyframes revealAura {

    0%, 100% {

        transform: scale(.9);

        opacity: .5;

    }

 

    50% {

        transform: scale(1.12);

        opacity: 1;

    }

}

 

 

/* ==========================================

   REVELACIÓN DE TEXTO

   ========================================== */

 

.experiencia-revelacion {

    position: absolute;

    z-index: 12;

    left: 50%;

    bottom: 24px;

    width: min(760px, calc(100% - 40px));

    transform: translateX(-50%);

    padding: 27px 30px;

    border-radius: 27px;

    background: rgba(9, 16, 27, 0.89);

    border: 1px solid rgba(234, 219, 197, 0.12);

    backdrop-filter: blur(20px);

    text-align: center;

    box-shadow: 0 26px 75px rgba(0, 0, 0, 0.33);

    animation: mensajeEntrar .85s cubic-bezier(.2,.8,.2,1) both;

}

 

.experiencia-remitente {

    display: block;

    margin-bottom: 10px;

    color: var(--s-azul);

    font-size: 12px;

    font-weight: 850;

}

 

.experiencia-revelacion h2 {

    margin: 0 0 12px;

    color: var(--s-crema);

    font-size: clamp(32px, 5vw, 56px);

    line-height: 1.03;

    letter-spacing: -1.6px;

}

 

.experiencia-revelacion > p {

    max-width: 610px;

    margin: 0 auto;

    color: var(--s-secundario);

    line-height: 1.7;

}

 

@keyframes mensajeEntrar {

    from {

        opacity: 0;

        transform:

            translateX(-50%)

            translateY(24px)

            scale(.97);

        filter: blur(8px);

    }

 

    to {

        opacity: 1;

        transform:

            translateX(-50%)

            translateY(0)

            scale(1);

        filter: blur(0);

    }

}

 

 

/* ==========================================

   PUBLICAR

   ========================================== */

 

.experiencia-publicar {

    margin-top: 22px;

    padding-top: 19px;

    border-top: 1px solid rgba(234, 219, 197, 0.09);

}

 

.experiencia-publicar > strong {

    display: block;

    margin-bottom: 13px;

    color: var(--s-crema);

    font-size: 15px;

}

 

.experiencia-publicar-botones {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 10px;

}

 

.experiencia-publicar-si,

.experiencia-publicar-no {

    min-width: 118px;

    min-height: 47px;

    border-radius: 15px;

    font: inherit;

    font-weight: 850;

    cursor: pointer;

}

 

.experiencia-publicar-si {

    border: none;

    background: linear-gradient(110deg, #eadbc5, #afc5d6);

    color: #111927;

}

 

.experiencia-publicar-no {

    border: 1px solid rgba(234,219,197,.13);

    background: rgba(255,255,255,.04);

    color: var(--s-secundario);

}

 

.experiencia-publicar small {

    color: var(--s-suave);

}

 

 

/* ==========================================

   FINAL

   ========================================== */

 

.experiencia-final {

    position: absolute;

    z-index: 14;

    left: 50%;

    bottom: 28px;

    width: min(700px, calc(100% - 40px));

    transform: translateX(-50%);

    padding: 32px;

    border-radius: 27px;

    background: rgba(9, 16, 27, 0.92);

    border: 1px solid rgba(234, 219, 197, 0.13);

    backdrop-filter: blur(20px);

    text-align: center;

    box-shadow: 0 25px 75px rgba(0,0,0,.34);

}

 

.experiencia-final > span {

    color: var(--s-salvia);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.experiencia-final h2 {

    margin: 9px 0 10px;

    color: var(--s-crema);

    font-size: clamp(28px, 4vw, 44px);

    line-height: 1.05;

}

 

.experiencia-final p {

    max-width: 570px;

    margin: 0 auto 19px;

    color: var(--s-secundario);

    line-height: 1.7;

}

 

.experiencia-final a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 47px;

    padding: 12px 18px;

    border-radius: 14px;

    background: #eadbc5;

    color: #111927;

    text-decoration: none;

    font-weight: 850;

}

 

 

/* ==========================================

   PIE

   ========================================== */

 

.sorpresas-demo-info {

    max-width: 650px;

    margin: 20px auto 0;

    text-align: center;

}

 

.sorpresas-demo-info span {

    color: var(--s-salvia);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.4px;

}

 

.sorpresas-demo-info p {

    margin: 7px 0 0;

    color: var(--s-suave);

    line-height: 1.6;

}

 

 

/* ==========================================

   OCULTAR

   ========================================== */

 

.oculto {

    display: none !important;

}

 

 

/* ==========================================

   TABLET

   ========================================== */

 

@media (max-width: 900px) {

 

    .crear-sorpresa-form {

        grid-template-columns: 1fr;

    }

 

    .campo-completo,

    .crear-sorpresa-acciones {

        grid-column: auto;

    }

 

    .resumen-sorpresa-datos {

        grid-template-columns: 1fr;

    }

 

    .experiencia {

        height: 680px;

    }

 

    .experiencia-planeta-wrap {

        width: min(610px, 74vw);

    }

 

}

 

 

/* ==========================================

   MÓVIL

   ========================================== */

 

@media (max-width: 700px) {

 

    .sorpresas-page {

        width: calc(100% - 24px);

        padding-top: 25px;

    }

 

    .sorpresas-header h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }

 

    .crear-sorpresa {

        padding: 22px 17px;

        border-radius: 23px;

    }

 

    .crear-sorpresa-cabecera h2 {

        font-size: 34px;

    }

 

    .crear-sorpresa-acciones {

        flex-direction: column;

        align-items: stretch;

    }

 

    .btn-vista-previa {

        width: 100%;

    }

 

    .resumen-sorpresa {

        padding: 22px 17px;

        border-radius: 22px;

    }

 

    .resumen-sorpresa-acciones {

        flex-direction: column;

    }

 

    .btn-editar-sorpresa,

    .btn-ver-experiencia {

        width: 100%;

    }

 

    .sorpresas-selector {

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: none;

    }

 

    .sorpresas-selector::-webkit-scrollbar {

        display: none;

    }

 

    .sorpresa-opcion {

        flex: 0 0 auto;

    }

 

    .experiencia {

        height: 650px;

        border-radius: 24px;

    }

 

    .experiencia-planeta-wrap {

        top: 50%;

        width: 520px;

    }

 

    .experiencia-intro {

        top: 16px;

        left: 16px;

        right: 16px;

        max-width: none;

        padding: 18px;

        border-radius: 18px;

    }

 

    .experiencia-intro h2 {

        font-size: 31px;

    }

 

    .experiencia-viajero {

        width: 112px;

        height: 112px;

    }

 

    .helicoptero-2d {

        transform: scale(.72);

    }

 

    .experiencia-reveal-visual {

        top: 42%;

        width: 210px;

        height: 190px;

    }

 

    .experiencia-reveal-ilustracion {

        width: 165px;

        height: 155px;

    }

 

    .experiencia-revelacion {

        bottom: 14px;

        width: calc(100% - 28px);

        padding: 21px 18px;

        border-radius: 21px;

    }

 

    .experiencia-revelacion h2 {

        font-size: 34px;

    }

 

    .experiencia-publicar-botones {

        flex-direction: column;

    }

 

    .experiencia-publicar-si,

    .experiencia-publicar-no {

        width: 100%;

    }

 

    .experiencia-lugares {

        left: 18px;

        right: 18px;

        bottom: 17px;

    }

 

    .experiencia-final {

        bottom: 14px;

        width: calc(100% - 28px);

        padding: 23px 18px;

        border-radius: 21px;

    }

 

}

 

 

/* ==========================================

   REDUCIR MOVIMIENTO

   ========================================== */

 

@media (prefers-reduced-motion: reduce) {

 

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

    }

 

}

/* ==========================================

   BOTÓN ENVIAR SORPRESA

   ========================================== */

 

.btn-enviar-sorpresa {

    min-height: 46px;

    padding: 11px 17px;

 

    border: 0;

    border-radius: 14px;

 

    background: linear-gradient(

        110deg,

        #eadbc5,

        #afc5d6

    );

 

    color: #111927;

 

    font: inherit;

    font-weight: 850;

 

    cursor: pointer;

 

    box-shadow:

        0 12px 28px

        rgba(0, 0, 0, 0.22);

 

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease;

}

 

 

.btn-enviar-sorpresa:hover {

    transform:

        translateY(-2px);

 

    box-shadow:

        0 16px 32px

        rgba(0, 0, 0, 0.28);

}

 

 

/* MÓVIL */

 

@media (max-width: 700px) {

 

    .btn-enviar-sorpresa {

        width: 100%;

    }

 

}

/* ==========================================

   ARREGLO AUTOCOMPLETE DE CIUDADES

   ========================================== */

 

.campo-autocomplete {

    position: relative;

    z-index: 20;

}

 

/* El campo que se está usando queda por encima de todos */

.campo-autocomplete:focus-within {

    z-index: 9999;

}

 

 

/* Caja de resultados */

.sugerencias-lugar {

    position: absolute;

 

    left: 0;

    right: 0;

    top: calc(100% + 8px);

 

    z-index: 10000;

 

    display: none;

 

    max-height: 260px;

 

    overflow-y: auto;

    overflow-x: hidden;

 

    border: 1px solid

        rgba(175, 197, 214, 0.24);

 

    border-radius: 16px;

 

    background: #101b2b;

 

    opacity: 1;

 

    box-shadow:

        0 22px 55px

        rgba(0, 0, 0, 0.55);

 

    isolation: isolate;

}

 

 

.sugerencias-lugar.visible {

    display: block;

}

 

 

/* Cada ciudad */

.sugerencia-lugar {

    position: relative;

 

    z-index: 2;

 

    display: block;

 

    width: 100%;

 

    padding: 14px 16px;

 

    border: 0;

 

    border-bottom: 1px solid

        rgba(175, 197, 214, 0.10);

 

    background: #101b2b;

 

    color: #f3e8d4;

 

    text-align: left;

 

    font: inherit;

 

    cursor: pointer;

 

    pointer-events: auto;

 

    opacity: 1;

}

 

 

.sugerencia-lugar:last-child {

    border-bottom: 0;

}

 

 

.sugerencia-lugar:hover,

.sugerencia-lugar:focus {

    background: #19283b;

 

    outline: none;

}

 

 

.sugerencia-lugar strong {

    display: block;

 

    margin-bottom: 4px;

 

    color: #f3e8d4;

 

    font-size: 14px;

 

    font-weight: 850;

}

 

 

.sugerencia-lugar small {

    display: block;

 

    color: #9eabba;

 

    font-size: 11px;

 

    line-height: 1.45;

}

 

 

/* Evita que los campos siguientes se pongan encima */

.crear-sorpresa-form {

    overflow: visible;

}

 

 

.crear-sorpresa {

    overflow: visible;

}

/* ==========================================

   ARREGLO BOTONES DEL RESUMEN

   ========================================== */

 

.resumen-sorpresa-acciones {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 22px;

}

 

.resumen-sorpresa-acciones button {

    width: 100%;

    min-height: 56px;

    padding: 13px 18px;

    border-radius: 16px;

 

    font: inherit;

    font-size: 15px;

    font-weight: 900;

 

    cursor: pointer;

 

    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease,

        background 0.18s ease;

}

 

.btn-editar-sorpresa {

    border: 1px solid rgba(234, 219, 197, 0.12);

    background: rgba(255, 255, 255, 0.045);

    color: #9eabba;

}

 

.btn-ver-experiencia {

    border: 0;

    background: #eadbc5;

    color: #111927;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);

}

 

.btn-enviar-sorpresa {

    border: 0;

    background: linear-gradient(

        110deg,

        #c9d8e3,

        #afc5d6

    );

    color: #111927;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);

}

 

.resumen-sorpresa-acciones button:hover {

    transform: translateY(-2px);

}

 

 

/* MÓVIL */

 

@media (max-width: 700px) {

 

    .resumen-sorpresa-acciones {

        grid-template-columns: 1fr;

    }

 

}

.experiencia-mundo-zoom {

    position: absolute;

    inset: 0;

    transform-origin: center center;

    transition:

        transform 1.6s cubic-bezier(.22, .61, .36, 1);

    will-change: transform;

}

/* =========================================================
   REVEAL FINAL - PANTALLA COMPLETA Y CENTRADO
   ========================================================= */

#experienciaRevealVisual {
    transition:
        width 1.4s ease,
        height 1.4s ease,
        inset 1.4s ease,
        transform 1.4s ease;
}


/* CUANDO SE EXPANDE */
#experienciaRevealVisual.pantalla-completa {

    position: absolute !important;

    /* ocupa toda la experiencia */
    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    /* eliminar el translate antiguo */
    transform: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 10 !important;

    pointer-events: none;
}


/* CONTENEDOR DEL DIBUJO */
#experienciaRevealVisual.pantalla-completa
.experiencia-reveal-ilustracion {

    position: relative !important;

    width: 320px !important;
    height: 320px !important;

    max-width: 70vw !important;
    max-height: 70vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    margin: 0 auto !important;
}


/* =========================================================
   BEBÉ EN EL REVEAL
   ========================================================= */

#experienciaRevealVisual
.bebe-contenedor {

    width: 220px !important;
    height: 220px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}


/* tamaño controlado */
#experienciaRevealVisual
.bebe-simple {

    position: relative !important;

    width: 140px !important;
    height: 150px !important;

    scale: 1.25 !important;

    transform-origin: center center !important;

    margin: auto !important;
}


/* =========================================================
   BRILLO DETRÁS DEL OBJETO
   ========================================================= */

#experienciaRevealVisual.pantalla-completa
.experiencia-reveal-brillo {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    width: 300px !important;
    height: 300px !important;

    border-radius: 50%;

    z-index: 0;
}


/* dibujo encima del brillo */
#experienciaRevealVisual.pantalla-completa
.experiencia-reveal-ilustracion {

    z-index: 2 !important;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

    #experienciaRevealVisual.pantalla-completa
    .experiencia-reveal-ilustracion {

        width: 250px !important;
        height: 250px !important;

        max-width: 80vw !important;
        max-height: 60vh !important;
    }


    #experienciaRevealVisual
    .bebe-contenedor {

        width: 190px !important;
        height: 190px !important;
    }


    #experienciaRevealVisual
    .bebe-simple {

        scale: 1.05 !important;
    }

}

 

#experienciaRevealVisual.pantalla-completa

.experiencia-reveal-ilustracion {

    width: 100%;

    height: 100%;

    max-width: none;

    max-height: none;

 

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

}

 

 

/* MENSAJE DEBAJO DE LA IMAGEN */

#experienciaRevelacion {

    transition:

        opacity 0.8s ease,

        transform 0.8s ease;

}

 

#experienciaRevelacion.preparar-final {

    opacity: 0;

    transform: translateY(40px);

}

 

#experienciaRevelacion.mostrar-final {

    opacity: 1;

    transform: translateY(0);

}

 

/* =========================================================

   CORRECCIONES FINALES

   ========================================================= */

 

/* Capas correctas de la experiencia */

#experiencia {

    position: relative;

    overflow: hidden;

}

 

.experiencia-estrellas {

    z-index: 0;

}

 

#experienciaMundoZoom,

.experiencia-mundo-zoom {

    z-index: 2;

}

 

.experiencia-ruta {

    z-index: 3;

}

 

#experienciaViajero,

.experiencia-viajero {

    z-index: 6;

    overflow: visible;

}

 

.experiencia-intro {

    z-index: 8;

}

 

.experiencia-reveal-visual {

    z-index: 9;

}

 

.experiencia-revelacion {

    z-index: 12;

}

 

/* Centrar correctamente los finales sin pelear con transform */

#experienciaFinalSi,

#experienciaFinalNo {

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    right: auto !important;

    bottom: auto !important;

 

    translate: -50% -50% !important;

 

    width: min(700px, calc(100% - 40px)) !important;

    max-width: 700px !important;

    margin: 0 !important;

 

    text-align: center;

    z-index: 100 !important;

}

 

/* Reveal final grande, pero sin destruir el layout */

#experienciaRevealVisual.pantalla-completa {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

 

#experienciaRevealVisual.pantalla-completa

.experiencia-reveal-ilustracion {

    width: min(78vw, 760px);

    height: min(72vh, 620px);

    max-width: 100%;

    max-height: 100%;

}

 

@media (max-width: 700px) {

    #experienciaFinalSi,

    #experienciaFinalNo {

        width: calc(100% - 28px) !important;

        padding: 24px 18px !important;

    }

 

    #experienciaRevealVisual.pantalla-completa

    .experiencia-reveal-ilustracion {

        width: 88vw;

        height: 60vh;

    }

}