/* ==========================================================================
   Casa Siam · Pasada de alta gama de la portada (16 oct 2026)
   «Haz que esta landing se sienta de alta gama». Lujo editorial dentro del
   Manual v3: espresso, crema, oro y la serif de los títulos; sin tocar
   imágenes ni textos. Todo cuelga de html.cs-alta, que pone el script del
   <head> de index.html (con ?antes o ?sinalta no se aplica).
   1. Papel, grano y ritmo   2. Cabecera isla   3. Botón con isla
   4. Próximas entregas      5. Tarjetas de doble bisel
   6. Bienvenida editorial   7. Movimiento (entradas y menú)
   ========================================================================== */
:root { --a-ease: cubic-bezier(.32, .72, 0, 1); --a-ease-out: cubic-bezier(.22, 1, .36, 1); --a-papel: #FBF8F3; }

/* 1 · Papel cálido en vez de blanco, grano fijo de papel y más aire */
/* (20 oct 2026, noche) La zona de las tarjetas y su línea de enlaces dejaron el papel
   #FBF8F3: la casa pidió su color original, el blanco de la web (prototipo, 14.33). */
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) [data-id="cs-portada-mas"] { padding-bottom: 72px !important; margin-top: 0 !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-etica { padding-top: 120px !important; padding-bottom: 120px !important; }
@media (max-width: 767px) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-etica { padding-top: 72px !important; padding-bottom: 80px !important; }
}
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(a, button) { transition-timing-function: var(--a-ease) !important; }

/* 2 · Cabecera isla: al desplazar ya no es una barra pegada de borde a
       borde, sino una cápsula que flota separada del borde, con vidrio
       espresso (desenfoque solo aquí, que es fija). */
@keyframes csIsla { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes csIslaMovil { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (min-width: 1025px) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d).cs-desplazado [data-elementor-type="header"] > .elementor-element-8fe4d5c {
    top: 12px !important; left: 50% !important; right: auto !important; width: calc(100% - 40px) !important; max-width: 1400px !important;
    border-radius: 999px !important; transform: translateX(-50%);
    background: rgba(47, 28, 14, .9) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(243, 238, 230, .10), 0 0 0 1px rgba(243, 238, 230, .08), 0 28px 56px -30px rgba(20, 12, 6, .7) !important;
    animation: csIsla .7s var(--a-ease) both;
  }
}
@media (max-width: 1024px) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d).cs-desplazado .elementor-element-78628391 { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .elementor-element-78628391 .elementor-icon { border-radius: 999px !important; transition: box-shadow .5s var(--a-ease), transform .5s var(--a-ease) !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d).cs-desplazado .elementor-element-78628391 .elementor-icon { box-shadow: 0 0 0 1px rgba(243, 238, 230, .22), 0 14px 30px -12px rgba(20, 12, 6, .6) !important; animation: csIslaMovil .6s var(--a-ease) both; }
}

/* 3 · Botón principal con isla: «Consultar por WhatsApp» lleva su flecha
       de salida (abre WhatsApp en otra pestaña) dentro de un círculo propio,
       pegado al borde interior. Al pasar, el círculo se desplaza en diagonal;
       al presionar, el botón cede un poco. */
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton) {
  position: relative; gap: 14px !important; padding: 0 6px 0 26px !important; min-height: 52px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 28px -16px rgba(47, 28, 14, .55) !important;
  transition: background-color .5s var(--a-ease), box-shadow .5s var(--a-ease), transform .5s var(--a-ease) !important;
}
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton)::after {
  content: "" !important; display: block !important; position: static !important; flex: none; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E") center / 18px no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .6s var(--a-ease), background-color .6s var(--a-ease) !important;
  opacity: 1 !important; transform: none; inset: auto !important;
}
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton):hover::after { transform: translate(2px, -2px) scale(1.06); background-color: rgba(255, 255, 255, .24) !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton):active { transform: scale(.98) !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-etica__boton::before { display: none !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-bienvenida__boton + .cs-bienvenida__boton { min-height: 52px !important; transition: background-color .5s var(--a-ease), color .5s var(--a-ease) !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-bienvenida__boton + .cs-bienvenida__boton:hover { background: rgba(243, 238, 230, .12) !important; }
@media (max-width: 767px) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton) { justify-content: space-between !important; }
}

/* 4 · «Próximas entregas»: más aire y una jerarquía editorial */
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado { padding: 112px 32px 104px !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__inner { max-width: 1080px !important; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) !important; gap: 24px 96px !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #cs-estado-titulo { font-size: clamp(40px, 4vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -.01em !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__fecha { margin-top: 18px !important; font-size: 12px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #6F5828 !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__lapso { font-size: clamp(30px, 3vw, 40px) !important; line-height: 1.12 !important; letter-spacing: -.005em !important; margin-bottom: 18px !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__cuerpo .cs-estado__nota { border-top-color: rgba(47, 28, 14, .12) !important; padding-top: 18px !important; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__acciones { margin-top: 32px !important; }
@media (max-width: 767px) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado { padding: 72px 20px 64px !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-estado__inner { grid-template-columns: 1fr !important; gap: 14px !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #cs-estado-titulo { font-size: 40px !important; }
}

/* 5 y 6 · (20 oct 2026) Las placas de doble bisel de las tarjetas y el panel de la
       bienvenida salieron: la casa pidió dejar las dos secciones tal cual su diseño
       original (regla 14.34 de la hoja del prototipo). */

/* 7 · Movimiento: entradas lentas y pesadas al aparecer en pantalla (el
       script marca .cs-alta-r y añade .is-in con IntersectionObserver), y
       los enlaces del menú del teléfono suben escalonados al abrirlo. */
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-alta-r { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity .95s var(--a-ease-out), transform .95s var(--a-ease-out), filter .95s var(--a-ease-out); }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-alta-r.is-in { opacity: 1; transform: none; filter: none; }
@media (max-width: 767px) { html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-alta-r { filter: none; transform: translateY(20px); } }
@keyframes csSube { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li { animation: csSube .8s var(--a-ease-out) both; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(2) { animation-delay: .05s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(3) { animation-delay: .1s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(4) { animation-delay: .15s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(5) { animation-delay: .2s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(6) { animation-delay: .25s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(7) { animation-delay: .3s; }
html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li:nth-child(8) { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) .cs-alta-r { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) #elementor-popup-modal-45 li, html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d).cs-desplazado [data-elementor-type="header"] > .elementor-element-8fe4d5c, html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d).cs-desplazado .elementor-element-78628391 { animation: none !important; }
  html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(a, button), html.cs-alta:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(a, button)::after { transition: none !important; }
}
@media print { html.cs-alta .cs-alta-r { opacity: 1 !important; transform: none !important; filter: none !important; } html.cs-alta body::after { display: none; } }