/* ============================================================
   Sitioideal — Diseño «Confeti» (salones de eventos, banquetes, inflables, mobiliario y fiestas) · paso 7.z.20
   Va encima de sitio.css. De fiesta: papel color crema, una tira de papel picado con los
   colores del negocio y los de fiesta, confeti que cae despacio (quieto si el teléfono pide
   menos movimiento), la foto de portada en una invitación con orilla de festón y globos,
   títulos en Shrikhand y texto en Plus Jakarta Sans, los paquetes como boletos con su talón
   punteado, las fotos de los eventos como instantáneas con cinta y banderines sobre los
   títulos. Los textos usan un tono tinta (el color principal oscurecido) para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/confeti/
   ============================================================ */

.diseno-confeti {
    --cf-titulos: "Shrikhand", "Fredoka", Georgia, serif;
    --cf-letra: "Plus Jakarta Sans", "Archivo", system-ui, sans-serif;
    --cf-papel: color-mix(in srgb, var(--c-fondo) 25%, #FFF8EE);
    --cf-papel-alterna: color-mix(in srgb, var(--cf-rosa) 6%, #FFF2E2);   /* crema rosada de fiesta, sin depender del negocio */
    --cf-tinta: color-mix(in srgb, var(--c-primario) 16%, #2A1A33);
    --cf-principal: var(--c-primario);
    /* Colores de fiesta (papel picado, confeti, cintas) junto a los del negocio */
    --cf-amarillo: #F6B52E;
    --cf-turquesa: #19A99B;
    --cf-rosa: #E4497F;
    --cf-morado: #7D5BD3;
    --cf-sombra: 0 18px 34px -24px rgba(42, 26, 51, .55);
    --cf-borde: color-mix(in srgb, var(--cf-tinta) 12%, transparent);

    /* Superficies (sitio.css) */
    --s-fondo: var(--cf-papel);
    --s-alterna: var(--cf-papel-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-encabezado: var(--cf-papel);
    --s-texto: var(--cf-tinta);
    --s-titulo: var(--cf-principal);
    --s-linea: var(--cf-borde);
    --s-linea-fuerte: color-mix(in srgb, var(--cf-tinta) 20%, transparent);

    background: var(--cf-papel);
    font-family: var(--cf-letra);
    font-size: 1.05rem;
}

/* El color principal para textos: nunca tan claro que no se lea sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-confeti {
        --cf-principal: oklch(from var(--c-primario) min(l, .5) c h);
        --cf-tinta: oklch(from color-mix(in srgb, var(--c-primario) 16%, #2A1A33) min(l, .3) c h);
    }
}

/* Títulos grandes con letra de fiesta (Shrikhand solo tiene un grueso: nada de negritas falsas) */
.diseno-confeti h1,
.diseno-confeti h2,
.diseno-confeti .logo__nombre,
.diseno-confeti .cf-grupo__nombre,
.diseno-confeti .cf-boleto__precio strong {
    font-family: var(--cf-titulos);
    font-stretch: normal;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
}

/* Los nombres chicos (tarjetas, personas, promociones) en la letra del texto, bien gruesa */
.diseno-confeti h3,
.diseno-confeti h4,
.diseno-confeti .especial__titulo,
.diseno-confeti .equipo__titulo,
.diseno-confeti .persona__nombre,
.diseno-confeti .promocion__titulo,
.diseno-confeti .servicio__nombre,
.diseno-confeti .sucursal__nombre,
.diseno-confeti .redes__titulo,
.diseno-confeti .menu a {
    font-family: var(--cf-letra);
    font-stretch: normal;
    letter-spacing: 0;
}
.diseno-confeti h3,
.diseno-confeti h4 { font-weight: 800; }

/* ---------- Encabezado ---------- */
.diseno-confeti .encabezado {
    border-bottom: 1px solid var(--s-linea);
    background: color-mix(in srgb, var(--cf-papel) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
}
.diseno-confeti .logo__nombre { color: var(--cf-tinta); font-size: 1.3rem; }
.diseno-confeti .menu a { color: var(--cf-tinta); font-weight: 700; }
.diseno-confeti .menu a:hover { color: var(--cf-principal); }

/* ---------- Botones de fiesta ---------- */
.diseno-confeti .boton {
    border-radius: 999px;
    font-family: var(--cf-letra);
    font-stretch: normal;
    font-weight: 800;
    letter-spacing: .01em;
    transition: transform .12s ease, box-shadow .12s ease;
}
.diseno-confeti .boton--principal {
    border-color: transparent;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--c-primario) 60%, #000), 0 16px 26px -18px rgba(42, 26, 51, .8);
}
.diseno-confeti .boton--secundario {
    border: 2px solid var(--cf-tinta);
    background: #fff;
    color: var(--cf-tinta);
    box-shadow: 0 5px 0 var(--cf-tinta);
}
.diseno-confeti .boton:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--c-primario) 60%, #000); transform: translateY(3px); }
.diseno-confeti .boton-chico { border-radius: 999px; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .diseno-confeti .boton { transition: none; }
    .diseno-confeti .boton:active { transform: none; }
}

/* ---------- Portada ---------- */
.cf-portada {
    position: relative;
    z-index: 1;
    padding-block: clamp(104px, 10vw, 132px) clamp(48px, 6vw, 84px);
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--c-acento) 20%, transparent), transparent 38%),
        radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--cf-amarillo) 16%, transparent), transparent 42%),
        var(--cf-papel);
    color: var(--cf-tinta);
}

/* El papel picado: banderas recortadas colgadas de su hilo; las que no caben se esconden abajo */
.cf-papel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    grid-auto-rows: 64px;
    gap: 0 7px;
    height: 74px;
    padding: 10px 6px 0;
    overflow: hidden;
    pointer-events: none;
}
.cf-papel::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--cf-tinta) 40%, transparent);
}
.cf-papel span {
    --cf-bandera: var(--c-primario);
    display: block;
    background: var(--cf-bandera);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 64'%3E%3Cpath fill-rule='evenodd' d='M0 0H60V58L55 64 50 58 45 64 40 58 35 64 30 58 25 64 20 58 15 64 10 58 5 64 0 58ZM2 5h6l-3 4.5ZM12 5h6l-3 4.5ZM22 5h6l-3 4.5ZM32 5h6l-3 4.5ZM42 5h6l-3 4.5ZM52 5h6l-3 4.5ZM30 17L42 31 30 45 18 31ZM30 24L36 31 30 38 24 31ZM28 31a2 2 0 1 0 4 0a2 2 0 1 0 -4 0ZM8 19a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM46 19a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM8 43a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM46 43a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM7 31a3.5 3.5 0 0 0 7 0ZM46 31a3.5 3.5 0 0 0 7 0ZM8.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM18.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM28.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM38.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM48.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 64'%3E%3Cpath fill-rule='evenodd' d='M0 0H60V58L55 64 50 58 45 64 40 58 35 64 30 58 25 64 20 58 15 64 10 58 5 64 0 58ZM2 5h6l-3 4.5ZM12 5h6l-3 4.5ZM22 5h6l-3 4.5ZM32 5h6l-3 4.5ZM42 5h6l-3 4.5ZM52 5h6l-3 4.5ZM30 17L42 31 30 45 18 31ZM30 24L36 31 30 38 24 31ZM28 31a2 2 0 1 0 4 0a2 2 0 1 0 -4 0ZM8 19a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM46 19a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM8 43a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM46 43a3 3 0 1 0 6 0a3 3 0 1 0 -6 0ZM7 31a3.5 3.5 0 0 0 7 0ZM46 31a3.5 3.5 0 0 0 7 0ZM8.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM18.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM28.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM38.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0ZM48.4 52a1.6 1.6 0 1 0 3.2 0a1.6 1.6 0 1 0 -3.2 0Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    transform-origin: 50% 0;
    animation: cf-ondea 4.2s ease-in-out infinite alternate;
}
.cf-papel span:nth-child(6n + 2) { --cf-bandera: var(--cf-amarillo); animation-delay: -1.1s; }
.cf-papel span:nth-child(6n + 3) { --cf-bandera: var(--c-acento); animation-delay: -2.3s; }
.cf-papel span:nth-child(6n + 4) { --cf-bandera: var(--cf-turquesa); animation-delay: -.6s; }
.cf-papel span:nth-child(6n + 5) { --cf-bandera: var(--cf-rosa); animation-delay: -3s; }
.cf-papel span:nth-child(6n + 6) { --cf-bandera: var(--cf-morado); animation-delay: -1.7s; }

@keyframes cf-ondea {
    from { transform: rotate(-2.2deg); }
    to   { transform: rotate(2.2deg); }
}

/* El confeti que cae (solo del lado de la invitación; en el celular, abajo) */
.cf-confeti {
    position: absolute;
    inset: 74px 0 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 64%);
    mask-image: linear-gradient(100deg, transparent 40%, #000 64%);
}
.cf-confeti i {
    --x: 50%; --y: 30%; --t: 11s; --d: 0s; --deriva: 30px; --c: var(--c-primario);
    position: absolute;
    top: -4%;
    left: var(--x);
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: var(--c);
    opacity: .9;
    animation: cf-cae var(--t) linear var(--d) infinite;
}
.cf-confeti i:nth-child(3n) { width: 11px; height: 11px; border-radius: 50%; }
.cf-confeti i:nth-child(3n + 1) { width: 16px; height: 6px; border-radius: 3px; }
.cf-confeti i:nth-child(1)  { --x: 48%; --y: 12%; --t: 12s;   --d: -2s;   --c: var(--c-primario); }
.cf-confeti i:nth-child(2)  { --x: 55%; --y: 70%; --t: 9.5s;  --d: -6s;   --c: var(--cf-amarillo); --deriva: -24px; }
.cf-confeti i:nth-child(3)  { --x: 61%; --y: 38%; --t: 13s;   --d: -9s;   --c: var(--cf-rosa); }
.cf-confeti i:nth-child(4)  { --x: 66%; --y: 84%; --t: 10.5s; --d: -1s;   --c: var(--cf-turquesa); --deriva: -30px; }
.cf-confeti i:nth-child(5)  { --x: 71%; --y: 22%; --t: 11.5s; --d: -7.5s; --c: var(--c-acento); }
.cf-confeti i:nth-child(6)  { --x: 76%; --y: 56%; --t: 14s;   --d: -4s;   --c: var(--cf-morado); --deriva: -18px; }
.cf-confeti i:nth-child(7)  { --x: 80%; --y: 8%;  --t: 9s;    --d: -3s;   --c: var(--cf-amarillo); }
.cf-confeti i:nth-child(8)  { --x: 84%; --y: 92%; --t: 12.5s; --d: -10s;  --c: var(--c-primario); --deriva: -26px; }
.cf-confeti i:nth-child(9)  { --x: 88%; --y: 44%; --t: 10s;   --d: -5s;   --c: var(--cf-turquesa); }
.cf-confeti i:nth-child(10) { --x: 92%; --y: 66%; --t: 13.5s; --d: -8s;   --c: var(--cf-rosa); --deriva: -22px; }
.cf-confeti i:nth-child(11) { --x: 96%; --y: 18%; --t: 11s;   --d: -1.5s; --c: var(--c-acento); --deriva: -34px; }
.cf-confeti i:nth-child(12) { --x: 58%; --y: 50%; --t: 15s;   --d: -12s;  --c: var(--cf-morado); }
.cf-confeti i:nth-child(13) { --x: 69%; --y: 4%;  --t: 9.8s;  --d: -4.6s; --c: var(--cf-amarillo); --deriva: -20px; }
.cf-confeti i:nth-child(14) { --x: 74%; --y: 74%; --t: 12.2s; --d: -11s;  --c: var(--cf-turquesa); }
.cf-confeti i:nth-child(15) { --x: 86%; --y: 30%; --t: 14.5s; --d: -6.5s; --c: var(--cf-rosa); --deriva: -28px; }
.cf-confeti i:nth-child(16) { --x: 94%; --y: 82%; --t: 10.8s; --d: -2.8s; --c: var(--c-primario); }
.cf-confeti i:nth-child(17) { --x: 52%; --y: 94%; --t: 13s;   --d: -9.5s; --c: var(--c-acento); --deriva: -16px; }
.cf-confeti i:nth-child(18) { --x: 98%; --y: 48%; --t: 11.8s; --d: -7s;   --c: var(--cf-amarillo); --deriva: -30px; }

@keyframes cf-cae {
    0%   { top: -4%;  translate: 0 0;               rotate: 0deg; }
    50%  {            translate: var(--deriva) 0;   }
    100% { top: 104%; translate: 0 0;               rotate: 600deg; }
}

@media (max-width: 899.98px) {
    .cf-confeti {
        -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 68%);
        mask-image: linear-gradient(180deg, transparent 46%, #000 68%);
    }
    .cf-confeti i { --x2: calc(var(--x) * 2 - 100%); left: max(2%, var(--x2)); }
}

.cf-portada__rejilla {
    position: relative;
    display: grid;
    gap: 44px;
    align-items: center;
}

@media (min-width: 900px) {
    .cf-portada__rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 60px; }
}

.cf-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 7px 18px 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--cf-tinta);
    font-size: .95rem;
    font-weight: 800;
    box-shadow: 0 10px 22px -16px rgba(42, 26, 51, .7);
}
.cf-etiqueta .icono { width: 24px; height: 24px; color: var(--cf-principal); }
.cf-etiqueta .icono ellipse { fill: color-mix(in srgb, var(--c-acento) 55%, transparent); }
.cf-etiqueta span { overflow-wrap: anywhere; }

.cf-portada__nombre {
    margin: 0 0 16px;
    color: var(--cf-tinta);
    font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.8rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
    text-shadow: 3px 3px 0 color-mix(in srgb, var(--c-acento) 45%, transparent);
}
/* Con una palabra larga («Construcciones», «Quinceañeras») la letra baja para no partirla */
.cf-portada__nombre--medio { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
.cf-portada__nombre--largo { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.3rem); }

.cf-portada__eslogan {
    max-width: 34ch;
    margin: 0 0 30px;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.5;
}

.cf-portada__botones { gap: 16px; }
.cf-portada__estado { margin-top: 28px; }
.diseno-confeti .estado-ahora--claro { border: 0; background: #fff; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .5); }

/* La invitación: tarjeta chueca con orilla de festón arriba y abajo y una línea punteada */
.cf-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 420px);
    padding: 34px 14px 26px;
}

.cf-invitacion {
    position: relative;
    z-index: 1;
    padding: 16px 16px 0;
    border-radius: 6px;
    background: #fff;
    outline: 2px dashed color-mix(in srgb, var(--c-acento) 75%, var(--cf-tinta));
    outline-offset: -8px;
    box-shadow: 0 34px 50px -30px rgba(42, 26, 51, .65);
    transform: rotate(2.4deg);
}
.cf-invitacion::before,
.cf-invitacion::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    background: radial-gradient(circle at 9px 9px, #fff 8.5px, transparent 9px) 0 0 / 18px 9px repeat-x;
}
.cf-invitacion::before { top: -8px; }
.cf-invitacion::after { bottom: -8px; transform: scaleY(-1); }

.cf-invitacion__foto {
    position: relative;
    aspect-ratio: 1 / 1.02;
    overflow: hidden;
    border-radius: 4px;
    background: var(--cf-papel-alterna);
}
.cf-invitacion__foto picture,
.cf-invitacion__foto picture img { width: 100%; height: 100%; }
.cf-invitacion__foto picture img { object-fit: cover; }

.cf-invitacion__foto--logo { display: grid; place-items: center; }
.cf-invitacion__logo { width: 64%; height: auto; }
.cf-invitacion__inicial { color: var(--cf-principal); font-family: var(--cf-titulos); font-size: 8rem; line-height: 1; }

.cf-invitacion__pie {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;   /* 7.z.24: también puede ser <p> (sin enlace, si el negocio no tiene contacto) */
    padding: 14px 6px 20px;
    color: var(--cf-tinta);
    text-decoration: none;
}
.cf-invitacion__pie > .icono {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
}
.cf-invitacion__pie strong { display: block; font-family: var(--cf-titulos); font-size: 1.3rem; font-weight: 400; line-height: 1.15; }
.cf-invitacion__pie small { display: block; font-size: .85rem; font-weight: 600; opacity: .75; }
a.cf-invitacion__pie:hover strong { text-decoration: underline; text-underline-offset: 4px; }
/* 7.z.34: el enlace solo ocupa lo que mide su texto (antes, todo el ancho de la invitación): en la computadora, el botón
   flotante de «Promociones» (7.z.9) ya no lo tapa */
a.cf-invitacion__pie { width: fit-content; max-width: 100%; box-sizing: border-box; }

/* Los globos: el color principal, el de acento y uno rosa mexicano (el secundario suele ser oscuro), flotando */
.cf-globo {
    --cf-g: var(--c-primario);
    position: absolute;
    z-index: 2;
    width: 70px;
    height: 84px;
    border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
    background:
        radial-gradient(ellipse 18% 13% at 33% 27%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(circle at 38% 36%, color-mix(in srgb, var(--cf-g) 72%, #fff), var(--cf-g) 58%, color-mix(in srgb, var(--cf-g) 72%, #000));
    box-shadow: 0 18px 24px -18px rgba(42, 26, 51, .6);
    animation: cf-flota 5.5s ease-in-out infinite alternate;
}
.cf-globo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    width: 12px;
    height: 8px;
    margin-left: -6px;
    background: color-mix(in srgb, var(--cf-g) 82%, #000);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cf-globo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    width: 2px;
    height: 74px;
    background: linear-gradient(color-mix(in srgb, var(--cf-tinta) 50%, transparent), transparent);
    transform: rotate(5deg);
    transform-origin: top;
}
.cf-globo--1 { top: 0; right: -6px; }
.cf-globo--2 { --cf-g: var(--c-acento); z-index: 0; top: -10px; right: 58px; width: 58px; height: 70px; animation-delay: -2s; }
.cf-globo--3 { --cf-g: var(--cf-rosa); top: 40%; left: -14px; width: 54px; height: 66px; animation-delay: -3.5s; }

@keyframes cf-flota {
    from { translate: 0 0; rotate: -3deg; }
    to   { translate: 0 -10px; rotate: 3deg; }
}

@media (max-width: 599.98px) {
    .cf-portada { padding-top: 96px; }
    .cf-portada__visual { width: min(100%, 330px); }
    .cf-globo--1 { width: 56px; height: 68px; right: -2px; }
    .cf-globo--2 { width: 46px; height: 56px; right: 46px; }
    .cf-globo--3 { width: 44px; height: 54px; left: -6px; }
    .cf-globo::after { height: 52px; }
    .cf-invitacion__pie strong { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-papel span,
    .cf-globo { animation: none; }
    .cf-confeti i { top: var(--y); animation: none; rotate: 35deg; }
}

/* ---------- Secciones ---------- */
.diseno-confeti .seccion { padding-block: clamp(56px, 7vw, 86px); }

.diseno-confeti .seccion h2 {
    color: var(--cf-tinta);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    line-height: 1.1;
}

/* Las secciones comunes (Promociones, Nosotros, Horario…) llevan sus banderines arriba del título */
.diseno-confeti .seccion h2::before {
    content: "";
    display: block;
    width: 92px;
    height: 18px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, var(--c-primario) 0 20%, var(--cf-amarillo) 20% 40%, var(--c-acento) 40% 60%, var(--cf-turquesa) 60% 80%, var(--cf-rosa) 80%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 22'%3E%3Cpath d='M0 0H112V2H0ZM2.2 2H20.2L11.2 22ZM24.6 2H42.6L33.6 22ZM47.0 2H65.0L56.0 22ZM69.4 2H87.4L78.4 22ZM91.8 2H109.8L100.8 22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 22'%3E%3Cpath d='M0 0H112V2H0ZM2.2 2H20.2L11.2 22ZM24.6 2H42.6L33.6 22ZM47.0 2H65.0L56.0 22ZM69.4 2H87.4L78.4 22ZM91.8 2H109.8L100.8 22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.diseno-confeti .cf-cabeza h2::before { content: none; }

/* Cabeza de las secciones propias: banderines, antetítulo con ícono y título */
.cf-cabeza { margin-bottom: 30px; text-align: center; }
.cf-cabeza h2 { margin: 0 !important; }

.cf-banderines {
    display: inline-flex;
    gap: 7px;
    margin-bottom: 12px;
    padding: 0 10px;
    border-top: 2px solid color-mix(in srgb, var(--cf-tinta) 35%, transparent);
}
.cf-banderines i {
    width: 18px;
    height: 20px;
    background: var(--c-primario);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cf-banderines i:nth-child(2) { background: var(--cf-amarillo); }
.cf-banderines i:nth-child(3) { background: var(--c-acento); }
.cf-banderines i:nth-child(4) { background: var(--cf-turquesa); }
.cf-banderines i:nth-child(5) { background: var(--cf-rosa); }

.cf-antetitulo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--cf-principal);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cf-antetitulo .icono { width: 20px; height: 20px; }

/* ---------- Paquetes y servicios: los boletos ---------- */
.diseno-confeti .cf-paquetes .catalogo__indice > :first-child { margin-left: auto; }
.diseno-confeti .cf-paquetes .catalogo__indice > :last-child { margin-right: auto; }
.diseno-confeti .catalogo__indice a {
    border: 2px solid var(--cf-tinta);
    border-radius: 999px;
    background: #fff;
    color: var(--cf-tinta);
    font-weight: 800;
}
.diseno-confeti .catalogo__indice a:hover { background: var(--cf-tinta); color: #fff; }

.cf-grupo + .cf-grupo { margin-top: 46px; }

.cf-grupo__nombre { margin: 0 0 8px; text-align: center; }
.cf-grupo__nombre span {
    display: inline-block;
    padding: 6px 34px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
    line-height: 1.3;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}

.cf-grupo__descripcion { max-width: 60ch; margin: 0 auto 18px; text-align: center; opacity: .82; }

.cf-boletos {
    display: grid;
    gap: 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .cf-boletos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
}

/* El boleto: el papel lleva las muescas recortadas (máscara) y la sombra sigue su forma (filtro en el <li>) */
.cf-boleto {
    --cf-muesca: 12px;
    --cf-talon: 150px;
    --cf-talon-alto: 74px;
    --cf-sombra-boleto: drop-shadow(0 14px 16px rgba(42, 26, 51, .13)) drop-shadow(0 2px 3px rgba(42, 26, 51, .08));
    position: relative;
    filter: var(--cf-sombra-boleto);
}
/* Recomendado: orilla del color de acento que también rodea las muescas */
.cf-boleto--destacado {
    filter: drop-shadow(2.5px 0 0 var(--c-acento)) drop-shadow(-2.5px 0 0 var(--c-acento))
            drop-shadow(0 2.5px 0 var(--c-acento)) drop-shadow(0 -2.5px 0 var(--c-acento)) var(--cf-sombra-boleto);
}

.cf-boleto__papel {
    --cf-x: calc(100% - var(--cf-talon) + 1px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cf-talon);
    height: 100%;
    border-radius: 16px;
    background: #fff;
    -webkit-mask:
        radial-gradient(circle at var(--cf-x) 0, transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) top / 100% 51% no-repeat,
        radial-gradient(circle at var(--cf-x) 100%, transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle at var(--cf-x) 0, transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) top / 100% 51% no-repeat,
        radial-gradient(circle at var(--cf-x) 100%, transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) bottom / 100% 51% no-repeat;
}

.cf-boleto__cuerpo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 20px 20px 22px;
}

.cf-boleto__foto {
    position: relative;
    flex: none;
    width: 96px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--cf-papel-alterna);
}
.cf-boleto__foto img { width: 100%; height: 100%; object-fit: cover; }

.cf-boleto__texto { min-width: 0; }

.cf-boleto__sello {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    transform: rotate(-2deg);
}
.cf-boleto__sello .icono { width: 14px; height: 14px; fill: currentColor; }

.cf-boleto__nombre { margin: 0; color: var(--cf-tinta); font-size: 1.18rem; line-height: 1.25; }
.cf-boleto__descripcion { margin: 6px 0 0; font-size: .96rem; line-height: 1.5; opacity: .82; }
.cf-boleto__nota {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 3px 12px 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-primario) 9%, #fff);
    color: var(--cf-principal);
    font-size: .88rem;
    font-weight: 700;
}
.cf-boleto__nota .icono { width: 17px; height: 17px; }
.cf-boleto .ficha-ver { margin-top: 10px; }
.cf-boleto .marca-ia--texto { display: block; margin-top: 6px; }

/* El talón: precio y «Cotizar», separado por la línea punteada (las muescas quedan en sus puntas) */
.cf-boleto__talon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 18px 14px;
    border-left: 2px dashed color-mix(in srgb, var(--cf-tinta) 26%, transparent);
    background: color-mix(in srgb, var(--c-acento) 11%, #fff);
    text-align: center;
}

.cf-boleto__precio { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1.1; }
.cf-boleto__precio small { color: var(--cf-tinta); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.cf-boleto__precio strong { color: var(--cf-principal); font-size: 1.55rem; white-space: nowrap; }
.diseno-confeti .cf-boleto__precio .cf-boleto__sin-precio { font-family: var(--cf-letra); font-size: 1rem; font-weight: 800; white-space: normal; }

.cf-cotizar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--c-primario) 60%, #000);
}
.cf-cotizar .icono { width: 17px; height: 17px; }
.cf-cotizar:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--c-primario) 60%, #000); transform: translateY(3px); }

/* En el celular, el talón abajo (alto fijo) y la línea punteada atravesada, con las muescas a los lados */
@media (max-width: 599.98px) {
    .cf-boleto__papel {
        --cf-y: calc(100% - var(--cf-talon-alto) + 1px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto var(--cf-talon-alto);
        -webkit-mask:
            radial-gradient(circle at 0 var(--cf-y), transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) left / 51% 100% no-repeat,
            radial-gradient(circle at 100% var(--cf-y), transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) right / 51% 100% no-repeat;
        mask:
            radial-gradient(circle at 0 var(--cf-y), transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) left / 51% 100% no-repeat,
            radial-gradient(circle at 100% var(--cf-y), transparent var(--cf-muesca), #000 calc(var(--cf-muesca) + .5px)) right / 51% 100% no-repeat;
    }
    .cf-boleto__cuerpo { gap: 12px; padding: 18px 16px 16px; }
    .cf-boleto__foto { width: 76px; }
    .cf-boleto__talon {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 16px 0 20px;
        border-top: 2px dashed color-mix(in srgb, var(--cf-tinta) 26%, transparent);
        border-left: 0;
        text-align: left;
    }
    .cf-boleto__precio { align-items: flex-start; }
    .cf-boleto__precio strong { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-cotizar:active { transform: none; }
}

/* ---------- Nuestros eventos: instantáneas con cinta ---------- */
.cf-instantaneas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 34px 28px;
    margin: 0;
    padding: 16px 6px 6px;
    list-style: none;
}
.galeria__mas > .cf-instantaneas { margin-top: 34px; }

.cf-foto { --cf-giro: -2.2deg; --cf-cinta: var(--cf-amarillo); }
.cf-foto:nth-child(2n) { --cf-giro: 1.8deg; --cf-cinta: var(--cf-turquesa); }
.cf-foto:nth-child(3n) { --cf-giro: -1deg; --cf-cinta: var(--cf-rosa); }
.cf-foto:nth-child(5n) { --cf-giro: 2.6deg; --cf-cinta: var(--c-acento); }

.diseno-confeti .cf-foto__enlace {
    position: relative;
    display: block;
    overflow: visible;
    padding: 11px 11px 0;
    border-radius: 3px;
    background: #fff;
    color: var(--cf-tinta);
    text-decoration: none;
    box-shadow: 0 18px 30px -20px rgba(42, 26, 51, .6);
    transform: rotate(var(--cf-giro));
    transition: transform .25s ease;
}
.cf-foto__enlace::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -11px;
    left: 50%;
    width: 84px;
    height: 24px;
    margin-left: -42px;
    background: color-mix(in srgb, var(--cf-cinta) 72%, transparent);
    transform: rotate(-4deg);
}
.diseno-confeti .cf-foto__enlace:hover,
.diseno-confeti .cf-foto__enlace:focus-visible { transform: rotate(0deg) translateY(-4px); }
.diseno-confeti .cf-foto__enlace:hover img { transform: none; }

.cf-foto__imagen { position: relative; display: block; overflow: hidden; background: var(--cf-papel-alterna); }
.cf-foto__imagen img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.cf-foto__pie {
    display: block;
    min-height: 2.9em;
    padding: 9px 4px 12px;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 599.98px) {
    .cf-instantaneas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
    .diseno-confeti .cf-foto__enlace { padding: 7px 7px 0; }
    .cf-foto__enlace::before { width: 58px; height: 18px; margin-left: -29px; top: -8px; }
    .cf-foto__pie { min-height: 2.6em; padding: 6px 2px 8px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
    .diseno-confeti .cf-foto__enlace { transition: none; }
}

/* ---------- Lo demás: tarjetas blancas de fiesta ---------- */
.diseno-confeti .promocion,
.diseno-confeti .testimonio,
.diseno-confeti .pregunta,
.diseno-confeti .contacto__item,
.diseno-confeti .sucursal,
.diseno-confeti .especial__punto,
.diseno-confeti .persona,
.diseno-confeti .servicio { border-color: transparent; border-radius: 18px; box-shadow: var(--cf-sombra); }
.diseno-confeti .promocion__foto { border-radius: 18px 18px 0 0; }
.diseno-confeti .testimonio { border-top: 6px solid var(--c-acento); }
.diseno-confeti .testimonio > .icono { color: var(--cf-principal); opacity: .5; }
.diseno-confeti .testimonio__iniciales,
.diseno-confeti .contacto__icono,
.diseno-confeti .especial__marca,
.diseno-confeti .persona__foto--iniciales,
.diseno-confeti .pregunta__signo { background: color-mix(in srgb, var(--c-primario) 12%, #fff); color: var(--cf-principal); }
.diseno-confeti .contacto__icono { border-radius: 50%; }
.diseno-confeti .nosotros__foto img { border: 10px solid #fff; border-bottom-width: 34px; border-radius: 3px; box-shadow: var(--cf-sombra); transform: rotate(-2deg); }
.diseno-confeti .nosotros__desde { border-radius: 999px; background: color-mix(in srgb, var(--c-acento) 18%, #fff); color: var(--cf-tinta); }
.diseno-confeti .nosotros__desde strong,
.diseno-confeti .nosotros__desde .icono { color: var(--cf-tinta); }
.diseno-confeti .galeria__ver-mas { border-radius: 999px; }
.diseno-confeti .mapa { border: 0; border-radius: 18px; }
.diseno-confeti .horario__tabla { overflow: hidden; border-radius: 18px; background: #fff; }
.diseno-confeti .horario__tabla th,
.diseno-confeti .horario__tabla td { padding-inline: 20px; }
.diseno-confeti .horario__tabla tr:last-child th,
.diseno-confeti .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-confeti .horario__hoy th,
.diseno-confeti .horario__hoy td { background: color-mix(in srgb, var(--c-acento) 14%, #fff); }
.diseno-confeti .horario__etiqueta { background: var(--c-primario); color: var(--c-sobre-primario); }

.diseno-confeti .pie { background: var(--cf-tinta); color: color-mix(in srgb, var(--cf-papel) 88%, transparent); }
.diseno-confeti .barra-acciones { background: color-mix(in srgb, var(--cf-papel) 94%, transparent); backdrop-filter: blur(10px); }
.diseno-confeti .barra-acciones__boton--principal { border-radius: 999px; font-weight: 800; }

/* ---------- Imagen generada con IA (7.j) ---------- */
.cf-invitacion__foto > .marca-ia--foto { bottom: 10px; }
.cf-foto__imagen > .marca-ia--foto { bottom: 8px; }