/* ==========================================================================
   Casa Siam · Prototipo de legibilidad y sistema de color y fuentes
   Crítica de diseño del 15 oct 2026, recomendaciones 2 y 4.
   Probado en la versión local. Para llevarlo al sitio: CSS adicional
   (Apariencia → Personalizar → CSS adicional) o los ajustes globales del kit
   de Elementor. Para comparar, agregar ?antes a la dirección de la página.

   Por qué el prefijo «html:not(#cs-a):not(#cs-b)»: el CSS del sitio declara
   muchos estilos con !important sobre selectores con ID. Este prefijo siempre
   se cumple y suma el peso de dos ID, así que estas reglas ganan sin tener que
   tocar el CSS original. Al pasarlo al kit de Elementor, el prefijo sobra.
   ========================================================================== */

/* 1 · Sistema: un color de texto, dos dorados y dos fuentes (Manual v3) */
:root {
  --cs-texto: #2B2B2B;        /* cuerpo de texto (Manual v3) — 14,2:1 sobre blanco */
  --cs-oro: #866B34;          /* oro de marca: títulos, etiquetas, botón principal — 5,0:1 */
  --cs-oro-oscuro: #6F5828;   /* enlaces y botones secundarios — 6,8:1 */
  --cs-espresso: #2F1C0E;
  --cs-crema: #F3EEE6;
  --cs-fuente-texto: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --cs-fuente-titulos: "the-seasons", Georgia, serif;
}

/* El kit ponía todo el cuerpo en Italiana y en marrón #7A5939 */
html:not(#cs-a):not(#cs-b) body {
  font-family: var(--cs-fuente-texto) !important;
  color: var(--cs-texto) !important;
}

/* Montserrat → Poppins en el texto corrido, sin tocar los títulos en serif */
html:not(#cs-a):not(#cs-b) .elementor :is(p, li, a, label, input, textarea, button):not(:is(h1, h2, h3, h4, h5, h6) *):not([class*="cs-portada"]):not(.elementor-item):not(.elementor-heading-title),
html:not(#cs-a):not(#cs-b) .elementor span:not(:is(h1, h2, h3, h4, h5, h6) *):not([class*="icon"]):not([class*="cs-portada"]),
html:not(#cs-a):not(#cs-b) :is(.cs-section-title, .cs-form-title, .cs-filosofia__caption) {
  font-family: var(--cs-fuente-texto) !important;
}

/* 2 · Legibilidad del texto corrido: oscuro, nunca dorado claro */
html:not(#cs-a):not(#cs-b) [data-elementor-type="wp-page"] .elementor-widget-text-editor :is(p, li):not(.cs-bienvenida *):not([class*="cs-portada"]):not(.cs-camadas__texto):not(.cs-galeria__texto):not(.cs-reserva__texto),
html:not(#cs-a):not(#cs-b) :is(.cs-historia-texto, .cs-description, .cs-nacimientos-subtitulo) {
  color: var(--cs-texto) !important;
}

/* Mínimo de 16 px donde había 14 o 15 */
html:not(#cs-a):not(#cs-b) .page-id-92 [data-elementor-type="wp-page"] .elementor-widget-text-editor p,
html:not(#cs-a):not(#cs-b) .cs-description {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Títulos y etiquetas en el oro de marca (había siete dorados distintos) */
html:not(#cs-a):not(#cs-b) .home [data-elementor-type="wp-page"] .elementor-heading-title,
html:not(#cs-a):not(#cs-b) :is(.cs-section-title, .cs-form-title, .cs-social-name, .cs-social-text, .cs-kicker) {
  color: var(--cs-oro) !important;
}

/* Camadas: la columna central, más ancha y alineada a la izquierda */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-738bed98 {
    flex: 0 0 46% !important;
    width: 46% !important;
    max-width: 640px !important;
  }
}
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-738bed98 .elementor-widget-text-editor,
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-738bed98 .elementor-widget-text-editor p {
  text-align: left !important;
}
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-738bed98 .elementor-widget-text-editor p { line-height: 1.75 !important; }

/* 3 · (20 oct 2026) El panel translúcido de la bienvenida se retiró: la casa pidió la sección tal cual la web, sin panel. */

/* 4 · Botones: uno principal lleno y uno secundario de contorno */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] {
  background: var(--cs-oro) !important;
  color: #fff !important;
  border: 1px solid var(--cs-oro) !important;
}
html:not(#cs-a):not(#cs-b) .cs-etica__boton,
html:not(#cs-a):not(#cs-b) .cs-etica__boton:is(:link, :visited) {
  color: var(--cs-oro-oscuro) !important;
  border: 1.5px solid var(--cs-oro) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
html:not(#cs-a):not(#cs-b) .cs-etica__boton-texto { color: var(--cs-oro-oscuro) !important; font-weight: 500 !important; }
html:not(#cs-a):not(#cs-b) .cs-etica__boton:hover,
html:not(#cs-a):not(#cs-b) .cs-etica__boton:hover .cs-etica__boton-texto { color: #fff !important; }

/* «Escríbenos» en la cabecera, como botón principal */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] {
  border-radius: 999px !important;
  padding: 8px 20px !important;
  margin-left: 6px !important;
  text-shadow: none !important;
}
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]::after,
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]::before { display: none !important; }

/* 5 · El menú blanco sobre degradados claros: una sombra suave lo despega */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) {
  text-shadow: 0 1px 8px rgba(30, 18, 8, 0.45);
}

/* 6 · «Bienvenido»: el widget 5014a086 tenía un efecto de transparencia al
      desplazar (Efectos de movimiento → Transparencia) que dejaba el texto al
      33 % de opacidad fuera del centro de la pantalla. En el sitio se apaga ese
      efecto en el widget; aquí se fuerza la opacidad completa. */
html:not(#cs-a):not(#cs-b) .elementor-element-5014a086,
html:not(#cs-a):not(#cs-b) .elementor-element-5014a086 > .elementor-widget-container,
html:not(#cs-a):not(#cs-b) .elementor-element-5014a086 .elementor-motion-effects-element {
  opacity: 1 !important;
  --opacity: 1 !important;
}

/* 7 · Negritas del texto corrido en la misma fuente (antes salían en otra) */
html:not(#cs-a):not(#cs-b) .elementor :is(p, li) :is(strong, b, em):not(:is(h1, h2, h3, h4, h5, h6) *) {
  font-family: var(--cs-fuente-texto) !important;
}

/* 8 · Contacto sin la columna del formulario (decisión del 15 oct 2026): una
      sola columna. Se quita esta regla cuando vuelva el formulario. */
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-columns { display: block !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-info { max-width: 620px; }

/* 9 · Camadas: la frase bajo «Calidad, elegancia y cariño» en un ancho de lectura */
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-d0be75d p { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }

/* 10 · Sello de Google: la nota real de la ficha, enlazada a ella (15 oct 2026).
   Hoy la ficha muestra 4,8 con 12 opiniones. La nota se revisa cada mes con el
   libro de seguimiento y nunca se redondea hacia arriba. Sin datos estructurados
   de reseñas: Google no los acepta cuando el negocio habla de sí mismo. */
html:not(#cs-a):not(#cs-b) .cs-sello {
  display: inline-flex !important; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px 20px; border-radius: 999px; text-decoration: none !important;
  font-family: var(--cs-fuente-texto) !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
html:not(#cs-a):not(#cs-b) .cs-sello__estrellas {
  position: relative; display: inline-block; white-space: nowrap; line-height: 1;
  font-size: 17px; letter-spacing: 2px; color: rgba(255, 255, 255, .35);
}
html:not(#cs-a):not(#cs-b) .cs-sello__relleno {
  position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #F4C01E;
}
html:not(#cs-a):not(#cs-b) .cs-sello__grupo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
html:not(#cs-a):not(#cs-b) :is(.cs-sello__nota, .cs-sello__dir, .cs-sello__sep) { color: inherit !important; font: inherit !important; }
html:not(#cs-a):not(#cs-b) .cs-sello__dir { white-space: nowrap; }
html:not(#cs-a):not(#cs-b) .cs-sello:hover :is(.cs-sello__nota, .cs-sello__dir) { text-decoration: underline; text-underline-offset: 3px; }

/* Sobre foto o degradado (portada) */
html:not(#cs-a):not(#cs-b) .cs-sello--oscuro {
  background: rgba(47, 28, 14, .42); color: #fff !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Sobre fondo claro (Familias, Contacto) */
html:not(#cs-a):not(#cs-b) .cs-sello--claro { padding: 6px 0; color: #5F5A54 !important; }
html:not(#cs-a):not(#cs-b) .cs-sello--claro .cs-sello__estrellas { color: #DDD6CB; }
/* En el pie espresso */
html:not(#cs-a):not(#cs-b) .cs-sello--pie {
  padding: 0; gap: 8px; justify-content: flex-start; color: #F3EEE6 !important; font-size: 13px !important;
}
html:not(#cs-a):not(#cs-b) .cs-sello--pie .cs-sello__estrellas { font-size: 13px; letter-spacing: 1px; }
html:not(#cs-a):not(#cs-b) .cs-sello--pie { row-gap: 6px; }
html:not(#cs-a):not(#cs-b) .cs-sello--pie .cs-sello__sep { display: none; }
html:not(#cs-a):not(#cs-b) .cs-sello--pie .cs-sello__dir { flex-basis: 100%; white-space: normal; }

/* Ubicación en cada página */
html:not(#cs-a):not(#cs-b) .cs-portada-sello { margin: 22px 0 0 !important; text-align: center !important; }
html:not(#cs-a):not(#cs-b) .cs-familias__sello { margin: 0 0 12px !important; text-align: center; }
html:not(#cs-a):not(#cs-b) .cs-contacto-sello { margin: 4px 0 14px 26px !important; text-align: left; }
html:not(#cs-a):not(#cs-b) .cs-contacto-sello .cs-sello { justify-content: flex-start; }
html:not(#cs-a):not(#cs-b) .cs-contacto-sello .cs-sello__dir { text-align: left !important; }
@media (max-width: 639px) {
  html:not(#cs-a):not(#cs-b) .cs-sello--oscuro { font-size: 13.5px !important; padding: 10px 18px; row-gap: 4px; max-width: 250px; }
  html:not(#cs-a):not(#cs-b) :is(.cs-sello--oscuro, .cs-sello--claro) .cs-sello__sep { display: none; }
  html:not(#cs-a):not(#cs-b) :is(.cs-sello--oscuro, .cs-sello--claro) .cs-sello__dir { flex-basis: 100%; text-align: center; }
}

/* 11 · Pie: letra mínima, botón legible y enlaces fáciles de tocar (auditoría UI/UX, 15 oct 2026) */
html:not(#cs-a):not(#cs-b) .cs-footer__label { font-size: 12px !important; letter-spacing: .14em !important; }
html:not(#cs-a):not(#cs-b) .cs-footer__verified { font-size: 12px !important; }
html:not(#cs-a):not(#cs-b) :is(.cs-footer__bottom, .cs-footer__bottom a) { font-size: 13px !important; }
html:not(#cs-a):not(#cs-b) .cs-footer__button { color: #fff !important; }          /* blanco sobre oro: 5,0:1 (antes crema, 4,36:1) */
html:not(#cs-a):not(#cs-b) .cs-footer__button:hover { color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-footer__nav a { display: inline-block; padding: 4px 0; }
html:not(#cs-a):not(#cs-b) .cs-footer__bottom a { display: inline-block; padding: 6px 0; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-footer__nav a { padding: 9px 0; }                 /* unos 40 px de alto por enlace */
  html:not(#cs-a):not(#cs-b) .cs-footer__nav li { margin: 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-footer__bottom a { padding: 10px 0; }
}

/* ==========================================================================
   12 · Auditoría de UI y UX unificada (15 oct 2026), frente A y apoyo de B.
   Cada regla cita su hallazgo. Lo que pide marcado nuevo está en el HTML de
   cada página; los videos usan además assets/casasiam-prototipo.js.
   ========================================================================== */

/* 12.1 · Menú del teléfono: panel espresso con texto crema (14:1), botón que
         lo abre en el oro de marca (5,0:1 con el ícono blanco) y botón de
         cerrar de 44 px. Antes: blanco sobre #BAAE7D, 2,2:1. */
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 .dialog-widget-content { background-color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 a.elementor-item { color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 a.elementor-item:is(:hover, :focus-visible) { color: #fff !important; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 .dialog-close-button { width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 .dialog-close-button svg { fill: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) a.elementor-icon[href*="popup%3Aopen"] { background-color: #866B34 !important; color: #fff !important; fill: #fff !important; }

/* 12.2 · Menú de escritorio sobre el degradado dorado: una sombra espresso en
         la franja de la cabecera. Antes: 3,1–3,3:1. */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] > .elementor-element-8fe4d5c::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(47, 28, 14, .70) 0%, rgba(47, 28, 14, .52) 40%, rgba(47, 28, 14, .20) 72%, rgba(47, 28, 14, 0) 100%);
}

/* 12.3 · Pie: filas de 44 px en el teléfono (la sección 11 las dejó en unos
         40 px) y el número de WhatsApp sin cortarse en dos líneas. */
html:not(#cs-a):not(#cs-b) .cs-footer__contact a { white-space: nowrap; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-footer__nav a { padding: 13px 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-footer__bottom a { padding: 15px 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-footer__button { min-height: 44px !important; display: inline-flex !important; align-items: center; }
}

/* 12.4 · Foco de marca en todo el sitio. Los correos de Contacto lo anulaban
         (outline: 0) y el anillo del navegador apenas se veía sobre los
         degradados oscuros. */
html:not(#cs-a):not(#cs-b) :is(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus-visible,
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-mail-button:focus-visible {
  outline: 2px solid #6F5828 !important;
  outline-offset: 3px !important;
}
html:not(#cs-a):not(#cs-b) :is(.cs-footer, [data-elementor-type="header"], #elementor-popup-modal-45, .cs-escribenos, .cs-bienvenida, .cs-portada-firma, .cs-video-pausa) :is(a, button, [role="button"]):focus-visible,
html:not(#cs-a):not(#cs-b) .cs-video-pausa:focus-visible {
  outline-color: #F3EEE6 !important;
}

/* 12.5 · Portada: la columna «Criamos de forma ética» pasa de 186 px a un ancho
         de lectura. Los rótulos Salud, Temperamento y Entorno seguro se quitan
         de la portada: quedan solo en Camadas, con una línea cada uno (12.17).
         La foto del gato del teléfono (3fc47aa) se conserva. */
html:not(#cs-a):not(#cs-b) .elementor-element-1dc528a0 > .elementor-widget:not(.elementor-element-3fc47aa) { display: none !important; }
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-1dc528a0 { --width: 0% !important; display: none !important; }
  html:not(#cs-a):not(#cs-b) .elementor-element-db9ee7c { --width: 53.469% !important; justify-content: center !important; }
}
html:not(#cs-a):not(#cs-b) .elementor-element-391ad3f8 { width: 100% !important; max-width: 560px !important; --container-widget-width: 100% !important; }
html:not(#cs-a):not(#cs-b) .cs-etica__texto p { font-size: 18px !important; line-height: 1.7 !important; text-align: left !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-391ad3f8 { padding: 8px 4px 24px !important; }
  html:not(#cs-a):not(#cs-b) .cs-etica__texto p { font-size: 16px !important; }
}
/* La flecha de «Escríbannos →» iba posicionada encima del texto */
html:not(#cs-a):not(#cs-b) .cs-etica__boton { padding: 0 56px 0 28px !important; width: auto !important; max-width: 100% !important; justify-content: center !important; }
html:not(#cs-a):not(#cs-b) .cs-etica__flecha { right: 24px !important; }

/* 12.6 · Cuerpo a 16 px como mínimo en el teléfono (portada y Camadas) y el
         lema de la portada a 14 px (estaba en 12,3 px). */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-widget-text-editor :is(p, li) { font-size: 16px !important; line-height: 1.65 !important; }
  html:not(#cs-a):not(#cs-b) .cs-portada-lema { font-size: 14px !important; }
}

/* 12.7 · Desbordes en el teléfono: la tabla de cookies tiene desplazamiento
         propio (contenedor .cs-tabla en el HTML) y la foto de Camadas no pasa
         del ancho de su columna. */
html:not(#cs-a):not(#cs-b) .cs-tabla { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4em; }
html:not(#cs-a):not(#cs-b) .cs-tabla table { margin: 0 !important; min-width: 560px; }
html:not(#cs-a):not(#cs-b) .page-id-99 img.wp-image-32 { width: 100% !important; max-width: 100% !important; height: auto !important; }

/* 12.8 · Contacto en el teléfono: el título baja para que el botón del menú
         no tape la «O» de «Contacto». */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-escribenos-header { padding-top: 64px !important; }
}

/* 12.9 · Historia: los títulos en la versión recta de la fuente. En cursiva,
         el punto de la i parecía tilde y se leía «El orígen de Casa Síam». */
html:not(#cs-a):not(#cs-b) .cs-historia-titulo { font-style: normal !important; }
/* (20 oct 2026, noche) «Nuestra filosofía de crianza» volvió a su cursiva: la casa
   pidió el formato de la web en esa sección; ver 14.36. */

/* 12.10 · Videos de fondo: imagen fija en el teléfono y cuando se pide reducir
          el movimiento; en escritorio, botón para pausarlos (WCAG 2.2.2). */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b) .elementor-background-video-container { display: none !important; }
}
html:not(#cs-a):not(#cs-b) .cs-video-pausa {
  position: absolute; right: 24px; bottom: 24px; z-index: 5;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: rgba(47, 28, 14, .78); color: #F3EEE6; border: 1px solid rgba(243, 238, 230, .55);
  font: 500 14px/1 var(--cs-fuente-texto); letter-spacing: 0; cursor: pointer;
}
html:not(#cs-a):not(#cs-b) .cs-video-pausa:hover { background: #2F1C0E; }

/* 12.11 · Familias: la séptima tarjeta deja de quedar sola en su fila; cierra
          la grilla a lo ancho, con la foto al lado del texto. */
@media (min-width: 768px) {
  html:not(#cs-a):not(#cs-b) .cs-familias__item:nth-child(7):last-child { flex-basis: 100% !important; max-width: 820px; }
  html:not(#cs-a):not(#cs-b) .cs-familias__item:nth-child(7):last-child .cs-testimonio { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: stretch; }
  html:not(#cs-a):not(#cs-b) .cs-familias__item:nth-child(7):last-child .cs-testimonio__foto { height: 100%; object-fit: cover; }
}

/* 12.12 · Títulos largos en mayúscula inicial (Manual v3). «Contacto» y
          «Nuestra historia», de una o dos palabras, siguen como etiquetas. */
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-element-6321d769 .elementor-heading-title { text-transform: none !important; letter-spacing: 0 !important; }

/* 12.13 · Contacto: Poppins en todo el texto (quedaban Montserrat y Arial) y
          una sola columna centrada de 640 px, con un solo borde izquierdo. */
html:not(#cs-a):not(#cs-b) #cs-contacto-final :is(p, a, span, li, h2, h3):not(.cs-main-title):not(.cs-main-title *) { font-family: var(--cs-fuente-texto) !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-wrap { max-width: 640px !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final :is(.cs-description, .cs-contacto-sello, .cs-social, .cs-mail-section, .cs-address) { margin-left: 0 !important; margin-right: 0 !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-description { margin-top: 18px !important; margin-bottom: 18px !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-contacto-sello { margin: 0 0 28px !important; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-mail-button { min-height: 44px; }
html:not(#cs-a):not(#cs-b) #cs-contacto-final { padding-bottom: 56px !important; }

/* 12.14 · Contacto: bloque de Instagram propio en lugar de la imitación de la
          aplicación (botones que no funcionaban, cifras fijas y letra de 7,5 px). */
html:not(#cs-a):not(#cs-b) .cs-ig { max-width: 760px; margin: 0 auto; text-align: center; color: #F3EEE6; }
html:not(#cs-a):not(#cs-b) .cs-ig__texto { margin: 0 auto 22px; max-width: 520px; font-family: var(--cs-fuente-texto) !important; font-size: 16px; line-height: 1.6; color: #F3EEE6; }
html:not(#cs-a):not(#cs-b) .cs-ig__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0 0 24px; padding: 0; }
html:not(#cs-a):not(#cs-b) .cs-ig__fotos a { display: block; border-radius: 6px; overflow: hidden; }
html:not(#cs-a):not(#cs-b) .cs-ig__fotos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity .2s ease; }
html:not(#cs-a):not(#cs-b) .cs-ig__fotos a:hover img { opacity: .88; }
html:not(#cs-a):not(#cs-b) .cs-ig__boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border-radius: 999px; background: #866B34; color: #fff !important; text-decoration: none !important;
  font: 500 15px/1 var(--cs-fuente-texto);
}
html:not(#cs-a):not(#cs-b) .cs-ig__boton:hover { background: #6F5828; }
html:not(#cs-a):not(#cs-b) .cs-ig__nota { margin: 14px 0 0; font: 400 14px/1.4 var(--cs-fuente-texto); color: #F3EEE6; }

/* 12.15 · Preguntas frecuentes: índice por temas al comienzo y preguntas que
          se distinguen de las respuestas (de 18 a 23 px). */
html:not(#cs-a):not(#cs-b) .cs-faq h2 { font-size: 23px !important; line-height: 1.3 !important; margin-top: 2.2em !important; scroll-margin-top: 100px; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice { margin: 28px 0 8px; padding: 24px 26px; border: 1px solid #E4DACB; border-radius: 12px; background: #FBF8F3; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__titulo { margin: 0 0 14px !important; font: 600 13px/1.2 var(--cs-fuente-texto) !important; letter-spacing: .12em !important; text-transform: uppercase; color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__grupo { margin: 0 0 6px !important; font: 400 19px/1.25 var(--cs-fuente-titulos) !important; color: #2B2B2B !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice li { margin: 0 !important; padding: 0 !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice li a { display: block; padding: 7px 0; font-size: 15px !important; line-height: 1.4 !important; color: #6F5828 !important; text-decoration: none !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice li a:hover { text-decoration: underline !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-faq-indice { padding: 20px 18px; }
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__grupos { grid-template-columns: 1fr; }
  html:not(#cs-a):not(#cs-b) .cs-faq-indice li a { padding: 12px 0; }
  html:not(#cs-a):not(#cs-b) .cs-faq h2 { font-size: 21px !important; }
}

/* 12.16 · Portada: un botón en la primera pantalla, bajo el sello. */
html:not(#cs-a):not(#cs-b) .cs-portada-accion { margin: 22px 0 0 !important; text-align: center !important; opacity: 1 !important; transform: none !important; }
html:not(#cs-a):not(#cs-b) .cs-portada-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px;
  border-radius: 999px; background: #866B34; color: #fff !important; text-decoration: none !important;
  font: 500 15px/1 var(--cs-fuente-texto) !important; letter-spacing: .02em !important; text-transform: none !important;
  box-shadow: 0 6px 18px rgba(30, 18, 8, .28);
}
html:not(#cs-a):not(#cs-b) .cs-portada-boton:hover { background: #6F5828; }

/* 12.17 · Camadas: Salud, Temperamento y Entorno seguro en código (antes era
          una imagen con los rótulos a 11 px), con el ícono arriba, el rótulo
          pegado debajo y una línea concreta. */
html:not(#cs-a):not(#cs-b) .cs-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
html:not(#cs-a):not(#cs-b) .cs-valores li { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
html:not(#cs-a):not(#cs-b) .cs-valores svg { width: 46px; height: 46px; fill: #866B34; }
html:not(#cs-a):not(#cs-b) .cs-valores__rotulo { margin: 8px 0 4px !important; font: 400 22px/1.2 var(--cs-fuente-titulos) !important; color: #866B34 !important; }
html:not(#cs-a):not(#cs-b) .cs-valores__linea { margin: 0 !important; font: 400 15px/1.45 var(--cs-fuente-texto) !important; color: #2B2B2B !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-valores { gap: 10px; }
  html:not(#cs-a):not(#cs-b) .cs-valores svg { width: 38px; height: 38px; }
  html:not(#cs-a):not(#cs-b) .cs-valores__rotulo { font-size: 18px !important; }
  html:not(#cs-a):not(#cs-b) .cs-valores__linea { font-size: 15px !important; }
}

/* 12.18 · Ajustes tras la revisión en pantalla del mismo día.
   - El descriptor de la portada tenía el mismo problema de la cursiva que
     Historia: se leía «Críadero de gatos síameses… en Santíago».
   - Al pasar de H2 a párrafo, el título de Contacto heredaba Poppins; vuelve
     a la serif de títulos, en recta (en cursiva se leía «herencía»).
   - Rótulos de los valores de Camadas en la serif, con aire debajo.
   - Índice de Preguntas frecuentes en Poppins (heredaba la serif fina).
   - Los enlaces de contacto del pie quedan en línea, sin relleno: son
     enlaces dentro de una frase, y el relleno separaba sus subrayados. */
/* (20 oct 2026) El descriptor de la portada recuperó su cursiva: la casa la
   tomó como modelo de los subtítulos del sitio; ver 14.35. */
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-main-title,
html:not(#cs-a):not(#cs-b) #cs-contacto-final .cs-main-title * { font-family: var(--cs-fuente-titulos) !important; font-style: normal !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-valores .cs-valores__rotulo { font-family: var(--cs-fuente-titulos) !important; font-weight: 400 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-valores .cs-valores__linea { font-family: var(--cs-fuente-texto) !important; }
html:not(#cs-a):not(#cs-b) .cs-valores { margin-bottom: 52px !important; }
@media (max-width: 767px) { html:not(#cs-a):not(#cs-b) .cs-valores { margin-bottom: 36px !important; } }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-indice :is(li a, .cs-faq-indice__titulo) { font-family: var(--cs-fuente-texto) !important; }

/* 12.19 · Ajustes tras la segunda medición.
   - Menú de escritorio: la sombra de la cabecera pasa de 55 a 72 % arriba
     (con la primera llegaba a 4,1–4,4:1).
   - Portada: una sombra suave detrás del bloque de texto, porque sobre la foto
     del teléfono el lema y el descriptor quedaban en 4,2:1.
   - Camadas: la foto final tiene en Elementor un efecto de escala de 110 % que
     la sacaba 20 px por lado; su contenedor la recorta.
   - Historia: un contenedor de ancho completo tenía 2 px de margen por lado. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-portada-firma {
    /* La sombra va en una capa que excede la caja 80 px arriba y abajo y
       llega justo a los bordes de la pantalla: se desvanece antes de cada
       borde, sin cortes (con el fondo en la caja quedaban líneas a 16 px de
       cada lado y bajo la nota). */
    background: none !important; position: relative; isolation: isolate;
  }
  html:not(#cs-a):not(#cs-b) .cs-portada-firma::before {
    /* Llega justo a los bordes de la pantalla, sea cual sea el margen de la firma (13 px a 320 de ancho, 22 a 414; va centrada).
       Con −16 px fijos la página medía 376 px a 375 y 362 a 360, y en Safari se movía de lado (28 oct 2026). */
    content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -80px; bottom: -80px; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 58% 50% at 50% 52%, rgba(30, 18, 8, .44) 0%, rgba(30, 18, 8, .26) 55%, rgba(30, 18, 8, 0) 86%);
  }
  /* 31 oct 2026: la casa no quiere sombra detrás de los textos en el teléfono. Se quita el halo. */
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-portada-firma::before { content: none !important; }
}
/* El resplandor de la bienvenida (::before, en la hoja de Elementor) sale
   30 px a cada lado; el panel no va centrado y bajo los 375 px de ancho
   pasa el borde derecho: la página medía 362 px a 360 y 326 a 320. Se
   recorta solo de lado, en la sección de ancho completo; arriba y abajo
   sigue libre, y en el borde el resplandor ya está difuminado (28 oct 2026). */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-11235c1e { overflow-x: clip !important; overflow-y: visible !important; }
}
html:not(#cs-a):not(#cs-b) .elementor-element-79524c42 { overflow: clip !important; }
html:not(#cs-a):not(#cs-b) .elementor-element-ed5123e { margin-left: 0 !important; margin-right: 0 !important; --margin-left: 0px; --margin-right: 0px; }
/* En Historia la portada se monta sobre la cabecera y tapaba su sombra: la
   cabecera sube de capa para que la sombra quede encima de la foto. */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] > .elementor-element-8fe4d5c { position: relative; z-index: 3; }

/* 12.20 · Últimos detalles de la tercera medición: la frase bajo
   «Nacimientos registrados» de Camadas a 16 px en el teléfono, el sello de
   Google con 44 px de alto para el dedo y el foco visible también en el mapa
   de Contacto. Los enlaces de contacto del pie (Instagram, WhatsApp, correo)
   siguen de 20 px: van dentro de una frase, que la pauta 2.5.8 exceptúa. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-nacimientos-subtitulo { font-size: 16px !important; line-height: 1.6 !important; }
}
html:not(#cs-a):not(#cs-b) a.cs-sello { min-height: 44px; }
html:not(#cs-a):not(#cs-b) iframe:focus-visible { outline: 2px solid #6F5828 !important; outline-offset: 3px !important; }

/* ==========================================================================
   13 · Crítica de diseño de la portada (16 oct 2026). Solo diseño: no cambia
   ningún texto ni ninguna imagen (pedido de la casa).
   ========================================================================== */

/* 13.1 · Estructura y cierre. La bienvenida baja de 900 px a una franja con
          el panel centrado; la sección ética deja de medir 900 px con la mitad
          vacía y pasa a cerrar la página. En el teléfono, su foto va arriba
          del texto y centrada (antes quedaba chica bajo el botón). */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a { --min-height: 640px !important; min-height: 640px !important; }
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a .elementor-element-db9ee7c { justify-content: center !important; padding-block: 72px !important; }
}
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a .elementor-element-1dc528a0 { order: -1; align-items: center !important; padding-top: 40px; }
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a .elementor-element-3fc47aa { width: 100%; text-align: center; }
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a .elementor-element-3fc47aa img { display: block; width: 78% !important; max-width: 300px !important; margin: 0 auto !important; }
  html:not(#cs-a):not(#cs-b) .elementor-element-e2d2b9a .elementor-element-db9ee7c { padding-bottom: 56px !important; }
}

/* 13.2 · Fuente de los títulos: The Seasons servida por Adobe Fonts
          (20 oct 2026). La casa tiene Creative Cloud y creó el proyecto web
          «Casa Siam» (bbq5ksi), con los seis estilos y el conjunto de
          caracteres predeterminado, que trae todas las tildes. Cada página
          lo carga con <link id="cs-adobe-fonts"> en la cabecera, y la
          familia se llama "the-seasons" (antes "the-seasons", la DEMO de
          Fontspring que sirve Elementor, sin tildes). Los pesos son los
          reales: 300 Light, 400 Regular y 700 Bold, cada uno con su
          cursiva. Las condiciones de Adobe no permiten alojar los archivos:
          solo el código del proyecto. La sección anterior (local() y DEMO)
          está en «_respaldo antes de The Seasons por Adobe (20 oct)». */
/* «Bienvenidos a Casa Siam» se salía 26 px de su panel en escritorio */

/* 13.3 · Una sola acción principal. Todos los «Escríbannos» con el mismo
          botón: píldora en el oro de marca, texto blanco (5,0:1), Poppins
          15 px, 48 px de alto. «Agendar una visita» y los botones de las
          tarjetas quedan como secundarios, de contorno. Sin la flecha del
          botón de la sección ética, que sugería navegar dentro del sitio. */
html:not(#cs-a):not(#cs-b) :is(.cs-portada-boton, .cs-etica__boton, .cs-footer__button),
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"],
html:not(#cs-a):not(#cs-b) :is(.cs-portada-boton, .cs-etica__boton, .cs-footer__button):is(:link, :visited) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 48px !important; padding: 0 28px !important; border-radius: 999px !important;
  background: #866B34 !important; border: 1px solid #866B34 !important; color: #fff !important;
  font-family: var(--cs-fuente-texto) !important; font-size: 15px !important; font-weight: 500 !important;
  letter-spacing: .01em !important; line-height: 1 !important; text-transform: none !important; text-decoration: none !important;
  text-shadow: none !important; transform: none !important;
  transition: background-color .2s ease, border-color .2s ease !important;
}
html:not(#cs-a):not(#cs-b) :is(.cs-portada-boton, .cs-etica__boton, .cs-footer__button):hover,
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]:hover {
  background: #6F5828 !important; border-color: #6F5828 !important; color: #fff !important;
}
html:not(#cs-a):not(#cs-b) .cs-etica__boton :is(.cs-etica__boton-texto) { color: #fff !important; font-weight: 500 !important; }
html:not(#cs-a):not(#cs-b) .cs-etica__flecha { display: none !important; }
html:not(#cs-a):not(#cs-b) .cs-etica__boton::before, html:not(#cs-a):not(#cs-b) .cs-etica__boton::after { display: none !important; }
/* La cabecera: la píldora no cambia la altura de la barra */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { min-height: 44px !important; padding: 0 24px !important; }
/* En el menú del teléfono, «Escríbannos» se distingue del resto como botón */
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 a.elementor-item[href*="wa.me"] {
  display: inline-flex !important; align-items: center; justify-content: center; margin-top: 22px !important;
  min-height: 56px; padding: 0 34px !important; border-radius: 999px; background: #866B34 !important; color: #fff !important;
  font-family: var(--cs-fuente-texto) !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: .01em;
}
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 a.elementor-item[href*="wa.me"]:is(:hover, :focus-visible) { background: #6F5828 !important; text-decoration: none !important; }

/* 13.4 · Pulido de las tarjetas: el mismo ancho para los tres botones, todos
          al pie de su tarjeta, y los íconos y títulos en la misma línea (el
          contenido se centraba en vertical y cada tarjeta lo corría distinto).
          Al pasar el ratón o tocar, el relleno pasa a oro oscuro: blanco sobre
          #6F5828 da 7,0:1 (antes, sobre #9b8748, 3,5:1). */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}

/* 13.5 · Superficies del navegador: selección, cursor de texto, enlaces
          dentro del texto corrido (dorado oscuro y subrayados, 6,8:1; antes
          algunos salían en el azul por defecto) y barra de desplazamiento. */
html:not(#cs-a):not(#cs-b) ::selection { background: #DAC9BA; color: #2F1C0E; }
html:not(#cs-a):not(#cs-b) :is(input, textarea) { caret-color: #866B34; }
html:not(#cs-a):not(#cs-b) :is(.elementor-widget-text-editor, .cs-description, .cs-texto-animado, .cs-legal) a:not([class]):not(:is(.cs-footer, .cs-escribenos, .cs-bienvenida, .cs-ig) *) {
  color: var(--cs-oro-oscuro) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
html:not(#cs-a):not(#cs-b) :is(.elementor-widget-text-editor, .cs-description, .cs-texto-animado, .cs-legal) a:not([class]):not(:is(.cs-footer, .cs-escribenos, .cs-bienvenida, .cs-ig) *):hover { color: #2F1C0E !important; text-decoration-thickness: 2px; }
html { scrollbar-color: #866B34 #F3EEE6; }

/* 13.6 · Ajustes de la primera revisión en pantalla: el botón de pausa
          respeta [hidden] (una regla del tema le forzaba display: block) y
          «Escríbannos» queda centrado en el menú del teléfono. */
html:not(#cs-a):not(#cs-b) .cs-video-pausa[hidden] { display: none !important; }
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 a.elementor-item[href*="wa.me"] { display: flex !important; width: fit-content; margin-left: auto !important; margin-right: auto !important; }
/* Las tres tarjetas, parejas: el texto de Galería traía 20 px de relleno
   arriba y abajo que las otras no tienen, y en el teléfono un ancho menor. */
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
/* Galería tiene un envoltorio interno más (.cs-galeria__contenido) */
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
/* Con el contenido alineado arriba, el ícono quedaba pegado al borde superior
   de la tarjeta (lo marcó el detector de Impeccable): relleno superior. */
@media (min-width: 768px) {
}
/* Cada tarjeta vive en su propio contenedor: la misma altura mínima para las
   tres, la de la más alta (Camadas y Cómo reservar, 486 px). */
@media (min-width: 768px) {
}

/* ==========================================================================
   14 · Segundo plan de la crítica de diseño (16 oct 2026): textos del estado
   (habilitados por la casa) y todo lo de diseño. Las imágenes no se tocan.
   ========================================================================== */
html { scroll-padding-top: 96px; }
@media (max-width: 1024px) { html { scroll-padding-top: 76px; } }

/* 14.1 · Estado de las camadas: una banda crema entre la portada y las
          tarjetas. Responde lo primero que alguien quiere saber. */
html:not(#cs-a):not(#cs-b) .cs-estado { position: relative; background: #F3EEE6; padding: 64px 24px; }
html:not(#cs-a):not(#cs-b) .cs-estado__inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 64px; align-items: start; }
html:not(#cs-a):not(#cs-b) .cs-estado__titulo { margin: 0 !important; font-family: var(--cs-fuente-titulos) !important; font-size: 40px !important; font-weight: 400 !important; line-height: 1.05 !important; color: #2F1C0E !important; letter-spacing: 0 !important; text-transform: none !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__fecha { margin: 12px 0 0 !important; font: 400 14px/1.4 var(--cs-fuente-texto) !important; color: #5F4A25 !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__lista { margin: 0; padding: 0; }
html:not(#cs-a):not(#cs-b) .cs-estado__fila { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 28px; padding: 18px 0; border-top: 1px solid #DAC9BA; }
html:not(#cs-a):not(#cs-b) .cs-estado__fila:first-child { border-top: 0; padding-top: 4px; }
html:not(#cs-a):not(#cs-b) .cs-estado__fila dt { margin: 0; font: 500 16px/1.45 var(--cs-fuente-texto) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__fila dd { margin: 0; font: 400 16px/1.6 var(--cs-fuente-texto) !important; color: #2B2B2B !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__nota { grid-column: 2; margin: 4px 0 0 !important; font: 400 15px/1.6 var(--cs-fuente-texto) !important; color: #4A3D2C !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__enlace { display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px; color: #6F5828 !important; font-weight: 500; text-decoration: underline !important; text-underline-offset: 4px; }
html:not(#cs-a):not(#cs-b) .cs-estado__enlace:hover { color: #2F1C0E !important; }
/* Marca de trabajo, solo para la versión local: se va al quitar el atributo */
html:not(#cs-a):not(#cs-b) .cs-estado[data-cs-pendiente]::before {
  content: attr(data-cs-pendiente); position: absolute; top: 16px; right: 16px;
  padding: 6px 12px; border: 1px dashed #6F5828; border-radius: 999px;
  font: 500 12px/1 var(--cs-fuente-texto); color: #5F4A25; background: rgba(255, 255, 255, .6);
}
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-estado { padding: 64px 20px 44px; }
  html:not(#cs-a):not(#cs-b) .cs-estado__inner { grid-template-columns: 1fr; gap: 16px; }
  html:not(#cs-a):not(#cs-b) .cs-estado__titulo { font-size: 34px !important; }
  html:not(#cs-a):not(#cs-b) .cs-estado__fila { grid-template-columns: 1fr; }
  html:not(#cs-a):not(#cs-b) .cs-estado__nota { grid-column: 1; }
  html:not(#cs-a):not(#cs-b) .cs-estado[data-cs-pendiente]::before { top: 18px; right: auto; left: 20px; }
}

/* Notas de tranquilidad junto a las acciones */
html:not(#cs-a):not(#cs-b) .cs-portada-nota {
  margin: 14px auto 0 !important; max-width: 440px; text-align: center !important;
  font: 400 14px/1.5 var(--cs-fuente-texto) !important; color: #F3EEE6 !important; letter-spacing: 0 !important; text-transform: none !important;
  text-shadow: 0 1px 8px rgba(20, 12, 6, .55); opacity: 1 !important; transform: none !important;
}
html:not(#cs-a):not(#cs-b) .cs-bienvenida__nota { margin: 18px 0 0 !important; max-width: 520px; font: 400 14px/1.55 var(--cs-fuente-texto) !important; color: rgba(255, 255, 255, .92) !important; }

/* 14.2 · Tarjetas: el título manda (de 24 a 32 px), el cuerpo sin negritas y
          todo alineado a la izquierda, para leer de corrido. */
@media (max-width: 767px) {
}

/* 14.3 · Teléfono. Un solo ancho para «Escríbannos» (100 %, hasta 320 px).
          El panel de la bienvenida, centrado y a lo ancho: sumaba rellenos de
          cuatro contenedores y quedaba corrido (70 px a la izquierda, 53 a la
          derecha). Al desplazar, el botón del menú gana una barra espresso y
          deja de flotar sobre el texto. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) :is(.cs-portada-boton, .cs-etica__boton) { width: 100% !important; max-width: 320px !important; }
  /* La portada es una columna flexible centrada: sin estirar el contenedor,
     el botón se quedaba en 152 px y los otros dos «Escríbannos», en 320. */
  html:not(#cs-a):not(#cs-b) .cs-portada-accion { align-self: stretch !important; display: flex !important; justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-portada-accion { padding: 0 20px; }
}
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-78628391 { transition: background-color .25s ease, box-shadow .25s ease; }
  html.cs-desplazado:not(#cs-a):not(#cs-b) .elementor-element-78628391 {
    top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
    padding: 10px 16px !important; z-index: 40 !important;
    background: rgba(47, 28, 14, .94); box-shadow: 0 6px 18px rgba(20, 12, 6, .22);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
}

/* 14.4 · Pie: el segundo «Escríbannos» pasa a enlace simple. El botón ya está
          en el cierre, a 300 px; en el pie bastan el texto y el enlace. */
html:not(#cs-a):not(#cs-b) .cs-footer .cs-footer__button,
html:not(#cs-a):not(#cs-b) .cs-footer .cs-footer__button:is(:link, :visited) {
  display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: #F3EEE6 !important; font: 500 15px/1.2 var(--cs-fuente-texto) !important;
  text-decoration: underline !important; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: #C9AE7A;
}
html:not(#cs-a):not(#cs-b) .cs-footer .cs-footer__button:hover { color: #fff !important; text-decoration-color: #fff; background: transparent !important; }

/* 14.5 · Cabecera fija en escritorio: al desplazar, la barra queda arriba
          con fondo espresso, para no perder la navegación después de la
          portada. El script reserva su alto, así la página no salta. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] > .elementor-element-8fe4d5c { transition: background-color .25s ease, box-shadow .25s ease; }
  html.cs-desplazado:not(#cs-a):not(#cs-b) [data-elementor-type="header"] > .elementor-element-8fe4d5c {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 50 !important;
    background: rgba(47, 28, 14, .95) !important; box-shadow: 0 8px 24px rgba(20, 12, 6, .18);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  html.cs-desplazado:not(#cs-a):not(#cs-b) [data-elementor-type="header"] > .elementor-element-8fe4d5c::before { display: none !important; }
}
/* 14.1 bis · «Próximas entregas»: un lapso aproximado, sin listar camadas
   (criterio de la casa, 16 oct 2026). */
html:not(#cs-a):not(#cs-b) .cs-estado__cuerpo { min-width: 0; }
html:not(#cs-a):not(#cs-b) .cs-estado__lapso { margin: 0 0 12px !important; font-family: var(--cs-fuente-titulos) !important; font-size: 30px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__detalle { margin: 0 0 16px !important; font: 400 16px/1.65 var(--cs-fuente-texto) !important; color: #2B2B2B !important; max-width: 60ch; }
html:not(#cs-a):not(#cs-b) .cs-estado__cuerpo .cs-estado__nota { grid-column: auto; padding-top: 14px; border-top: 1px solid #DAC9BA; max-width: 60ch; }
@media (max-width: 767px) { html:not(#cs-a):not(#cs-b) .cs-estado__lapso { font-size: 26px !important; } }

/* 14.6 · Contacto: «En Instagram». El perfil que antes iba en la cabecera,
          recuperado a pedido de la casa (16 oct 2026) y mejorado: sección
          propia en espresso, el perfil dentro de un marco de teléfono, sin
          los controles de la dueña, con letra legible (antes bajaba a
          7,5 px en el teléfono) y sin animaciones de entrada. */
html:not(#cs-a):not(#cs-b) .cs-ig-perfil { background: #2F1C0E; color: #F3EEE6; padding: 88px 24px; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil__inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; align-items: center; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil__titulo { margin: 0 0 16px !important; font-family: var(--cs-fuente-titulos) !important; font-size: 48px !important; font-weight: 400 !important; line-height: 1.05 !important; color: #F3EEE6 !important; text-transform: none !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil__bajada { margin: 0 0 28px !important; max-width: 44ch; font: 400 17px/1.65 var(--cs-fuente-texto) !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil__nota { margin: 14px 0 0 !important; font: 400 14px/1.4 var(--cs-fuente-texto) !important; color: #DAC9BA !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil__telefono {
  background: #120B06; border: 1px solid rgba(243, 238, 230, .14); border-radius: 36px; padding: 22px 16px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
}
/* El perfil, a tamaño fijo y legible dentro del marco */
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram,
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram *:not(.cs-feed-overlay):not(.cs-feed-cta) { animation: none !important; opacity: 1; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; color: #F3EEE6; font-family: var(--cs-fuente-texto) !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram-top { display: flex; align-items: center; justify-content: flex-start; margin: 0 4px 18px !important; padding: 0 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram-user { font-size: 17px !important; font-weight: 600 !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-profile-area { display: grid !important; grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "avatar datos" "bio bio"; gap: 14px 18px; align-items: center; margin: 0 4px 18px !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-profile-left { display: contents !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-avatar-link { grid-area: avatar; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-avatar { width: 84px !important; height: 84px !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-profile-right { grid-area: datos; min-width: 0; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-bio { grid-area: bio; margin: 0 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil :is(.cs-bio-line, .cs-bio-email, .cs-email-address, .cs-bio-link span) { font-size: 14px !important; line-height: 1.5 !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-profile-name-link strong { font-size: 16px !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stats { display: flex !important; gap: 18px !important; margin-top: 8px !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat strong { display: block; font-size: 17px !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat span { font-size: 13px !important; color: #DAC9BA !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlights { display: flex !important; gap: 12px !important; justify-content: space-between; margin: 0 4px 16px !important; overflow: visible !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlight { cursor: default !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlight-img { width: 60px !important; height: 60px !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlight span { font-size: 12px !important; color: #F3EEE6 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-instagram-tabs { margin: 0 !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-feed { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px !important; border-radius: 0 0 20px 20px; overflow: hidden; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-feed-link img { width: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-feed-cta { font-size: 12px !important; }
@media (max-width: 860px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil { padding: 64px 16px; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__inner { grid-template-columns: 1fr; gap: 36px; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__titulo { font-size: 38px !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__telefono { max-width: 420px; width: 100%; margin: 0 auto; border-radius: 28px; padding: 18px 12px 12px; }
}
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-ig__boton { width: 100%; max-width: 320px; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlight-img { width: 52px !important; height: 52px !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-highlights { gap: 6px !important; }
}
/* Contacto: la cabecera queda solo con el título; ya no cuelga el bloque de
   Instagram, así que baja su alto. */
html:not(#cs-a):not(#cs-b) .cs-escribenos { padding-bottom: 72px !important; }

/* 14.7 · Ajustes de la primera revisión en pantalla del segundo plan. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado .cs-estado__lapso { font-family: var(--cs-fuente-titulos) !important; font-weight: 400 !important; }
html:not(#cs-a):not(#cs-b) .cs-estado__enlace { display: inline !important; min-height: 0 !important; margin-left: 2px; }
html:not(#cs-a):not(#cs-b) .cs-footer .cs-footer__button { margin-left: 0 !important; }
html.cs-desplazado:not(#cs-a):not(#cs-b) .elementor-element-78628391 { box-sizing: border-box !important; justify-content: flex-end !important; }
html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-feed-link { position: relative; display: block; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-profile-area { grid-template-columns: 72px minmax(0, 1fr); gap: 12px 14px; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-avatar { width: 72px !important; height: 72px !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stats { gap: 10px !important; flex-wrap: nowrap; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat strong { font-size: 16px !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat span { font-size: 12px !important; }
}
/* Segunda revisión: el panel de la bienvenida sumaba su relleno al 100 % y
   empujaba 15 px de desborde en el teléfono; el descriptor de la portada,
   ya en recta, no cabía en una línea; Galería traía relleno lateral. */
html:not(#cs-a):not(#cs-b) .cs-portada-descriptor { white-space: normal !important; max-width: 100% !important; text-wrap: balance; }
/* El resplandor decorativo de la bienvenida (::before) se extendía 30 px a
   cada lado; con el panel a lo ancho en el teléfono, salía de la pantalla. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-estado .cs-estado__nota { font-size: 16px !important; }
}
/* La imitación de Instagram definía su color chocolate en la cabecera de
   Contacto; fuera de ella, el triángulo del ícono de reels quedaba sin color. */
html:not(#cs-a):not(#cs-b) .cs-ig-perfil { --cs-chocolate: #120B06; }

/* 14.8 · Tras la tercera crítica (16 oct 2026).
   - En el teléfono, la nota bajo el botón y el lema bajaban a 3,5:1 sobre las
     zonas claras de la foto: sombra de texto más cerrada.
   - La nota de la visita aparecía antes que sus botones, que entran con el
     desplazamiento: ahora entra con ellos (sin script no se oculta). */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) :is(.cs-portada-nota, .cs-portada-lema, .cs-portada-descriptor) { text-shadow: 0 1px 2px rgba(20, 12, 6, .7), 0 0 14px rgba(20, 12, 6, .6) !important; }
}
html:not(#cs-a):not(#cs-b) .cs-bienvenida.cs-anim-activa .cs-bienvenida__nota { opacity: 0; transition: opacity .6s ease .2s; }
html:not(#cs-a):not(#cs-b) .cs-bienvenida.cs-anim-activa .cs-bienvenida__acciones.cs-aparece + .cs-bienvenida__nota { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b) .cs-bienvenida.cs-anim-activa .cs-bienvenida__nota { opacity: 1; transition: none; }
}
/* - En escritorio, «Agendar una visita» medía 56 px de alto junto a los 48 de
     «Escríbannos»: el secundario toma la misma caja que el principal. */
@media (min-width: 768px) {
}

/* 14.9 · «Próximas entregas» con acción propia y nota en el cierre
          (tercera crítica, P1; 16 oct 2026).
   - El módulo, la pieza más propia de la portada, no tenía cómo decir «me
     interesa»: «Escríbannos» con el mismo botón principal y, al lado, un
     enlace para pedir el valor por correo, que es por donde se informa.
   - El cierre repite la nota de la portada bajo su botón, y la nota entra
     con él cuando la sección se anima. */
html:not(#cs-a):not(#cs-b) .cs-estado__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__boton,
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__boton:is(:link, :visited) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 0 28px; border-radius: 999px;
  background: #866B34; border: 1px solid #866B34; color: #fff !important;
  font: 500 15px/1 var(--cs-fuente-texto); letter-spacing: .01em; text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__boton:hover { background: #6F5828; border-color: #6F5828; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__correo,
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__correo:is(:link, :visited) {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 15px/1.3 var(--cs-fuente-texto); color: #6F5828 !important;
  text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__correo:hover { color: #2F1C0E !important; text-decoration-thickness: 2px; }
html:not(#cs-a):not(#cs-b) .cs-etica__nota {
  margin: 14px auto 0 !important; max-width: 400px; text-align: center !important;
  font: 400 14px/1.55 var(--cs-fuente-texto) !important; color: #4A3D2C !important;
}
html:not(#cs-a):not(#cs-b) .cs-etica--animar .cs-etica__nota { opacity: 0; transition: opacity .6s ease .2s; }
html:not(#cs-a):not(#cs-b) .cs-etica--animar .cs-etica__boton.cs-etica-visible + .cs-etica__nota { opacity: 1; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-estado__acciones { flex-direction: column; align-items: flex-start; gap: 8px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-estado__boton { width: 100%; max-width: 320px; }
  /* En el teléfono el cierre va alineado a la izquierda (texto y raya): la nota también. */
  html:not(#cs-a):not(#cs-b) .cs-etica__nota { font-size: 16px !important; text-align: left !important; margin: 14px 0 0 !important; max-width: 320px; }
}

/* 14.10 · Preguntas frecuentes con 48 preguntas (16 oct 2026, a pedido de la
           sesión de Navidad y verano).
   - Las listas de las respuestas iban pegadas al párrafo siguiente (margen
     inferior 0): llevan el mismo aire que un párrafo.
   - El índice «En esta página» ocupaba unas tres pantallas en el teléfono:
     cada grupo es ahora un <details> que se pliega. En escritorio parten
     abiertos; en el teléfono, el script los cierra al cargar y quedan los
     seis nombres de grupo. Sin script, todo queda abierto. */
html:not(#cs-a):not(#cs-b) .cs-legal :is(ul, ol):not(.cs-faq-indice *) { margin: 0 0 1.1em !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary::-webkit-details-marker { display: none; }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 1.5px solid #6F5828; border-bottom: 1.5px solid #6F5828;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
html:not(#cs-a):not(#cs-b) .cs-faq-indice__det[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary:hover { color: #6F5828 !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__grupos { gap: 0; }
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__det + .cs-faq-indice__det { border-top: 1px solid #E4DACB; }
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary { margin: 0 !important; padding: 6px 0; }
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__det[open] > ul { padding-bottom: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b) .cs-faq-indice__det > summary::after { transition: none; }
}
/* - En las tres páginas de texto (.cs-legal), los enlaces dentro de una frase
     salían en «the seasons»: la hoja de Elementor (.elementor-kit-37 a) da la
     fuente de títulos a todo enlace. Toman la fuente y el tamaño del texto. */
html:not(#cs-a):not(#cs-b) .cs-legal :is(p, li, td, dd) a { font-family: inherit !important; font-size: inherit !important; }

/* 14.11 · Mapa de Contacto (16 oct 2026). En Elementor el widget tiene
          Transformar → Escala 1,1: el mapa medía 110 % y su contenedor lo
          recortaba, así que quedaban fuera el borde izquierdo (la tarjeta
          «Los Militares 5620» salía cortada) y los botones de zoom y de
          pantalla completa, a la derecha y abajo. Parecía una imagen fija.
          Sin la escala se ve entero y se puede mover y acercar. En el sitio:
          widget del mapa → Avanzado → Transformar → Escala, quitar el 1,1. */
html:not(#cs-a):not(#cs-b) .elementor-element-5dbeff2f { --e-transform-scale: 1 !important; transform: none !important; margin: 0 !important; }
html:not(#cs-a):not(#cs-b) .elementor-element-5dbeff2f iframe { display: block; width: 100% !important; height: 420px !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-5dbeff2f iframe { height: 360px !important; }
}

/* 14.12 · Tarjetas de la portada al cambiar el ancho de la ventana
          (16 oct 2026). La casa notó que «se modifican al estirar la
          ventana». Que se reacomoden es lo esperable; lo que no estaba bien:
   - Entre 480 y 767 px, el texto y el botón de Camadas y de Cómo reservar
     iban en una columna de 280 px centrada, mientras el ícono y el título
     iban a la izquierda (Galería ya se había corregido en 14.7).
   - Entre 880 y 1000 px, las tres tarjetas en fila quedaban de 260 px y el
     botón (250 px) se salía de su tarjeta: ahí se apilan, como en tableta.
   - El botón nunca es más ancho que su columna. */
@media (min-width: 768px) and (max-width: 1100px) {
}
/* La línea de versión de Términos y Política quedaba en 4,49:1 en el teléfono. */
html:not(#cs-a):not(#cs-b) .cs-legal :is(.cs-meta, .cs-foot) { color: #4A3D2C !important; }

/* 14.13 · Correcciones de la simulación con teclado y zoom (16 oct 2026).
   - En la sección oscura «En Instagram», el anillo de foco oro oscuro daba
     2,4:1 sobre el espresso: pasa al anillo crema de los demás fondos oscuros.
   - A 320 px (zoom al 400 %), la columna de esa sección medía 346 px por el
     ancho mínimo de la maqueta y el texto se cortaba a la derecha. */
html:not(#cs-a):not(#cs-b) .cs-ig-perfil :is(a, button, [role="button"]):focus-visible { outline-color: #F3EEE6 !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__inner { grid-template-columns: minmax(0, 1fr) !important; }
  html:not(#cs-a):not(#cs-b) :is(.cs-ig-perfil__texto, .cs-ig-perfil__telefono) { min-width: 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__telefono { overflow: hidden; }
}
@media (max-width: 360px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stats { gap: 6px 12px !important; flex-wrap: wrap !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat span { font-size: 11px !important; }
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil .cs-stat strong { font-size: 15px !important; }
}

/* 14.14 · Propuestas «sitio» del documento de simulaciones (16 oct 2026).
   - Botón «Consultar por WhatsApp» donde se lee: Camadas y las respuestas
     de valor, reserva, regalo y regiones, con mensaje según el tema.
   - Preguntas frecuentes: «Lo esencial antes de reservar» y «Volver al
     índice» al final de cada grupo.
   - Teléfono: una cápsula «Consultar» junto al menú al desplazar (la creaba
     el script). Reemplazada por el botón flotante de WhatsApp (14.18). */
html:not(#cs-a):not(#cs-b) .cs-wa-accion { margin: 22px 0 8px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-wa-boton,
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-wa-boton:is(:link, :visited) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 48px; padding: 0 26px; border-radius: 999px; background: #866B34; border: 1px solid #866B34;
  color: #fff !important; font: 500 15px/1 var(--cs-fuente-texto) !important; letter-spacing: .01em;
  text-decoration: none !important; transition: background-color .25s ease;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-wa-boton:hover { background: #6F5828; border-color: #6F5828; }
@media (max-width: 767px) { html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-wa-boton { width: 100%; max-width: 320px; } }

html:not(#cs-a):not(#cs-b) .cs-faq-esencial { margin: 28px 0 0; padding: 22px 26px; border-left: 3px solid #866B34; background: #F3EEE6; border-radius: 0 12px 12px 0; }
html:not(#cs-a):not(#cs-b) .cs-faq-esencial__titulo { margin: 0 0 10px !important; font: 400 22px/1.2 var(--cs-fuente-titulos) !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-esencial ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html:not(#cs-a):not(#cs-b) .cs-faq-esencial li { margin: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-esencial a { display: inline-flex; align-items: center; min-height: 40px; font: 500 15px/1.4 var(--cs-fuente-texto) !important; color: #6F5828 !important; text-decoration: underline !important; text-underline-offset: 3px; }
html:not(#cs-a):not(#cs-b) .cs-faq-volver { margin: 18px 0 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-volver a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/1 var(--cs-fuente-texto) !important; color: #6F5828 !important; text-decoration: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-volver a::before { content: "↑"; font-size: 15px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-volver a:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* La cápsula «Consultar» que estaba aquí se reemplazó por el botón flotante de WhatsApp (14.18). */

/* 14.15 · Accesibilidad de las simulaciones (16 oct 2026).
   - «Saltar el mapa» en Contacto: oculto hasta recibir el foco.
   - Los títulos de portada de Camadas y Galería rozaban su subtítulo.
   - Letra: subtítulo de Contacto de 10 a 12 px, lema de la portada a 16 px
     en el teléfono y el texto de Camadas en peso 400 (estaba en 300). */
html:not(#cs-a):not(#cs-b) .cs-saltar-mapa {
  position: absolute; left: 16px; z-index: 60; transform: translateY(-140%); padding: 12px 18px; border-radius: 999px;
  background: #2F1C0E; color: #F3EEE6 !important; font: 500 15px/1 var(--cs-fuente-texto); text-decoration: none !important;
  opacity: 0; pointer-events: none;
}
html:not(#cs-a):not(#cs-b) .cs-saltar-mapa:focus { opacity: 1; pointer-events: auto; transform: translateY(12px); outline: 2px solid #866B34 !important; outline-offset: 2px !important; }
html:not(#cs-a):not(#cs-b) #cs-tras-mapa:focus { outline: none; }
html:not(#cs-a):not(#cs-b) .elementor-widget-heading h1.elementor-heading-title { line-height: 1.15 !important; }
html:not(#cs-a):not(#cs-b) .elementor-widget-heading:has(h1) + .elementor-widget-heading { margin-top: 10px !important; }
html:not(#cs-a):not(#cs-b) .cs-escribenos-subtitle { font-size: 12px !important; }
html:not(#cs-a):not(#cs-b) .page-id-99 .elementor-widget-text-editor :is(p, li) { font-weight: 400 !important; }
@media (max-width: 767px) { html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-portada-lema { font-size: 16px !important; } }

/* 14.16 · «Tableta extra», de 841 a 1024 px, y cabecera de escritorio estrecha
          (16 oct 2026).
   - Entre 841 y 1024 px, Historia, Camadas y Familias mostraban dos héroes,
     el de teléfono y el de escritorio, uno bajo el otro; se resolvió en el
     HTML con la clase elementor-hidden-tablet_extra, como ya hacía la portada.
   - En ese mismo rango, la cabecera pasa a la barra del teléfono (botón de
     menú redondo), también por clases en el HTML: el menú de escritorio no
     cabía y se partía en dos líneas. En Elementor: en la plantilla de la
     cabecera, ocultar 8fe4d5c en «Tableta extra» y mostrar ahí 74d6420a.
   - Entre 1025 y 1279 px, los seis enlaces y «Consultar» se partían en dos o
     tres líneas (a 1100 px, tres): letra y relleno menores solo en ese rango.
     En Elementor: tipografía y relleno del menú en un punto de corte propio. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) {
    font-size: 19px !important; padding-left: 11px !important; padding-right: 11px !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] {
    font-size: 14px !important; padding: 0 18px !important; margin-left: 4px !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap !important; }
}
/* Con la cabecera isla (al desplazar), entre 1280 y 1439 px «Consultar»
   quedaba pegado al extremo redondeado: un punto menos de letra y relleno. */
@media (min-width: 1280px) and (max-width: 1439px) {
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) {
    font-size: 20px !important; padding-left: 16px !important; padding-right: 16px !important;
  }
}
/* La barra del teléfono no tenía valores para «Tableta extra» (heredaba los
   de escritorio: botón centrado, sin barra). Se copian los de tableta.
   En Elementor: los mismos valores de tableta en «Tableta extra». */
@media (min-width: 841px) and (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .elementor-48 .elementor-element.elementor-element-74d6420a {
    --min-height: 0px; --flex-direction: row; --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%);
    --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap;
    --justify-content: space-between; --align-items: center; --margin-top: 0px; --margin-bottom: -110px; --margin-left: 0px; --margin-right: 0px;
    --padding-top: 0px; --padding-bottom: 0px; --padding-left: 30px; --padding-right: 30px; --z-index: 2;
  }
  html:not(#cs-a):not(#cs-b) .elementor-48 .elementor-element.elementor-element-78628391.elementor-element { --flex-grow: 1; --flex-shrink: 0; }
  html:not(#cs-a):not(#cs-b) .elementor-48 .elementor-element.elementor-element-78628391 .elementor-icon-wrapper { text-align: end; }
  html:not(#cs-a):not(#cs-b) .elementor-48 .elementor-element.elementor-element-78628391 .elementor-icon { font-size: 35px; }
  html:not(#cs-a):not(#cs-b) .elementor-48 .elementor-element.elementor-element-78628391 .elementor-icon svg { height: 35px; }
}

/* 14.17 · La etiqueta «Quiénes somos» de la bienvenida solo existe en la
          versión editorial (casasiam-alta-gama.css); sin ella, no se muestra. */

/* 14.18 · Botón flotante de WhatsApp (16 oct 2026). Reemplaza la cápsula
          «Consultar» que aparecía arriba al desplazar (14.14), que entre 841 y
          1024 px quedaba sola sobre el texto. Va abajo a la derecha y solo hasta
          1024 px, donde la cabecera es la del teléfono; en escritorio,
          «Consultar» ya está en la cabecera, que sigue a la vista. Aparece al
          pasar la primera pantalla y se retira cuando el pie, que tiene su
          propio botón, está a la vista. Lo crea casasiam-prototipo.js. */
html:not(#cs-a):not(#cs-b) .cs-wa-flotante { display: none; }
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .cs-wa-flotante {
    display: grid; place-items: center; position: fixed; z-index: 40;
    right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    width: 56px; height: 56px; border-radius: 999px; background: #866B34; color: #FBF8F3 !important; text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(47, 28, 14, .08), 0 18px 36px -14px rgba(20, 12, 6, .55);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.92);
    transition: opacity .45s cubic-bezier(.32, .72, 0, 1), transform .45s cubic-bezier(.32, .72, 0, 1), background-color .3s cubic-bezier(.32, .72, 0, 1), visibility 0s .45s;
  }
  html.cs-wa-visible:not(#cs-a):not(#cs-b) .cs-wa-flotante { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html:not(#cs-a):not(#cs-b) .cs-wa-flotante svg { width: 27px; height: 27px; fill: currentColor; }
  html:not(#cs-a):not(#cs-b) .cs-wa-flotante:hover { background: #6F5828; }
  html.cs-wa-visible:not(#cs-a):not(#cs-b) .cs-wa-flotante:active { transform: scale(.96); }
  html:not(#cs-a):not(#cs-b) .cs-wa-flotante:focus-visible { outline: 2px solid #2F1C0E !important; outline-offset: 3px !important; }
  /* En WordPress, con el panel de cookies abierto (Complianz), el botón se retira. */
  html:not(#cs-a):not(#cs-b) body:has(.cmplz-cookiebanner.cmplz-show) .cs-wa-flotante { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { html:not(#cs-a):not(#cs-b) .cs-wa-flotante { transition: none !important; transform: none !important; } }
@media print { html:not(#cs-a):not(#cs-b) .cs-wa-flotante { display: none !important; } }

/* 14.19 · Barrido de defectos de las nueve páginas (16 oct 2026, noche).
          Los números son los del informe del barrido; cada uno dice qué
          ajuste corresponde en Elementor cuando no es solo de esta capa. */

/* Títulos: sin una palabra sola en la última línea (20). */
html:not(#cs-a):not(#cs-b) :is(h1, h2, h3) { text-wrap: balance; }

/* (1) Historia: el párrafo final se salía de su contenedor de alto fijo y la
   sección siguiente, vacía, tapaba sus enlaces. En Elementor: alto
   automático en 737c0cbb. */
html:not(#cs-a):not(#cs-b) .elementor-element-737c0cbb { --height: auto; height: auto !important; }
html:not(#cs-a):not(#cs-b) .elementor-element-b532ba8 { pointer-events: none; }

/* (2) Portada, sección ética entre 841 y 1024 px: tres columnas con el texto
   en 241 px. Se copian los valores de tableta. En Elementor: los mismos
   valores de tableta en «Tableta extra». */
@media (min-width: 841px) and (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-e2d2b9a {
    --min-height: 687px; --flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial;
    --container-widget-flex-grow: 0; --container-widget-align-self: initial; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-e2d2b9a:not(.elementor-motion-effects-element-type-background) { background-position: -800px 575px; }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-db9ee7c { --width: 100%; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-1dc528a0 { --width: 100%; --align-items: center; --container-widget-width: calc((1 - var(--container-widget-flex-grow)) * 100%); }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-391ad3f8 { padding: 10px 30px 30px; }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-3fc47aa { padding: 0; }
  html:not(#cs-a):not(#cs-b) .elementor-102 .elementor-element.elementor-element-3fc47aa img { width: 100%; max-width: 560px; }
}

/* (3) Galería: el título, de 142 px, se metía bajo la cabecera transparente
   y en los portátiles bajos se cortaba. Tamaño según el ancho y el alto, y
   aire arriba. */
@media (min-width: 768px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-3d50fec3 .elementor-heading-title { font-size: clamp(56px, min(9vw, 14vh), 140px) !important; line-height: 1.02 !important; padding-inline: 24px; }
  html:not(#cs-a):not(#cs-b) .elementor-element-127c22a6 { padding-top: 110px !important; }
}

/* (5) Preguntas, Términos y Política: hasta 1024 px el botón del menú tapaba
   la primera línea del título. */
@media (max-width: 1024px) { html:not(#cs-a):not(#cs-b) .cs-banda { padding-top: 170px !important; } }

/* (6) Portada, 389 px o menos: el lema no partía línea y ensanchaba la página. */
@media (max-width: 389px) { html:not(#cs-a):not(#cs-b) .cs-portada-lema { white-space: normal !important; text-wrap: balance; } }

/* (8) Portátiles bajos: el monograma del héroe tocaba el de la cabecera. */
@media (min-width: 1025px) and (max-height: 760px) { html:not(#cs-a):not(#cs-b) .cs-portada-logo { display: none !important; } }

/* (9) Camadas, teléfono y tableta: la columna derecha conservaba los 820 px de
   alto mínimo de escritorio (blanco antes del pie) y la foto de cierre
   quedaba en un contenedor de alto cero. En Elementor: alto mínimo
   automático en 7dab8572 y ocultar 79524c42 en Tableta y Móvil. */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-7dab8572 { --min-height: 0px; min-height: 0 !important; }
}
@media (max-width: 767px) { html:not(#cs-a):not(#cs-b) .elementor-element-79524c42 { display: none !important; } }

/* (11) Menú del teléfono: los ítems centrados; bajo 375 px, «Preguntas
   frecuentes» cabe en una línea. */
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 .elementor-nav-menu--main .elementor-item { justify-content: center !important; text-align: center !important; }
@media (max-width: 374px) { html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 .elementor-nav-menu--main .elementor-item { font-size: 30px !important; } }

/* (12) Títulos de héroe pegados a los bordes en el teléfono. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) :is(.elementor-element-7c607a6a, .elementor-element-3d50fec3) .elementor-heading-title { padding-inline: 16px; }
}
@media (max-width: 1100px) { html:not(#cs-a):not(#cs-b) .elementor-element-44e089cf { padding-inline: 16px; } }

/* (13) Camadas, teléfono: «Nacimientos registrados y proyectados» en cuatro
   líneas con una «y» sola. */
@media (max-width: 412px) { html:not(#cs-a):not(#cs-b) .elementor-element-61f6dfd h2 { font-size: 40px !important; line-height: 1.08 !important; } }

/* (14, 15) Familias: botones en píldora, como los del resto del sitio, y
   «Leer las opiniones en Google» en una línea. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-familias__boton {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 999px !important; letter-spacing: .01em !important;
}
@media (max-width: 412px) { html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-familias__boton { white-space: nowrap; padding: 12px 20px !important; } }

/* (16) Camadas: cada título de característica pegado a su texto; en tableta,
   la tercera quedaba sola a la derecha. En tableta van en una columna. */
html:not(#cs-a):not(#cs-b) :is(.elementor-element-cf680cd, .elementor-element-542161c, .elementor-element-e5dcfc8) { margin-bottom: 12px !important; }
@media (min-width: 601px) and (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-159c1546 { --flex-direction: column; flex-direction: column !important; align-items: center !important; }
  html:not(#cs-a):not(#cs-b) :is(.elementor-element-4a3c91a4, .elementor-element-7dab8572) { --width: 100%; width: 100% !important; max-width: 640px !important; }
}

/* (19) Portada, escritorio: el fondo del héroe apuntaba a un video .mov, que
   no sirve como imagen. En Elementor: poner un póster .webp en Fondo. */
html:not(#cs-a):not(#cs-b) .elementor-element-4c679ea { background-image: none !important; }

/* (21) Política, teléfono: las tablas se leen como fichas, cada dato con su
   rótulo (atributo data-rotulo en cada celda). */
@media (max-width: 480px) {
  html:not(#cs-a):not(#cs-b) .cs-tabla { overflow: visible !important; }
  html:not(#cs-a):not(#cs-b) .cs-tabla :is(table, tbody, tr, td) { display: block; width: 100%; }
  html:not(#cs-a):not(#cs-b) .cs-tabla table { min-width: 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html:not(#cs-a):not(#cs-b) .cs-tabla tr { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(134, 107, 52, .22); border-radius: 12px; background: #FFFDF9; }
  html:not(#cs-a):not(#cs-b) .cs-tabla td { padding: 4px 0 !important; border: 0 !important; }
  html:not(#cs-a):not(#cs-b) .cs-tabla td[data-rotulo]::before { content: attr(data-rotulo); display: block; font: 600 11px/1.4 var(--cs-fuente-texto); letter-spacing: .12em; text-transform: uppercase; color: #6F5828; }
}

/* (23) Teléfono: al desplazar, el espaciador que deja Elementor para el
   botón del menú tomaba el relleno de la barra y la página saltaba 20 px. */
@media (max-width: 1024px) { html.cs-desplazado:not(#cs-a):not(#cs-b) .elementor-element-78628391.elementor-sticky__spacer { padding: 0 !important; background: none !important; box-shadow: none !important; } }

/* (24) Camadas, teléfono: 133 px de blanco entre dos párrafos seguidos. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b) .elementor-element-84e0ebd { padding-bottom: 8px !important; }
  html:not(#cs-a):not(#cs-b) .elementor-element-202c93d { padding-top: 16px !important; }
}

/* (26) Visor de fotos: fondo casi opaco (antes se veía el botón del menú
   detrás) y botón de cerrar de 44 px. */
html:not(#cs-a):not(#cs-b) .elementor-lightbox { background-color: #120B06 !important; } /* opaco desde el 17 oct: al 95 % se transparentaba el menú de la cabecera detrás de los controles */
html:not(#cs-a):not(#cs-b) .elementor-lightbox .dialog-lightbox-close-button { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 24px !important; }

/* 14.20 · Botones cuyo texto tapaba un efecto (17 oct 2026).
   - Contacto, «WhatsApp +56 9 3679 0252»: al pasar el ratón, el relleno dorado
     entra y el texto debía volverse crema, pero la regla de la sección 1
     («títulos y etiquetas en el oro de marca») lo dejaba dorado sobre dorado:
     solo se veía el ícono. */
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-social:hover :is(.cs-social-name, .cs-social-text, .cs-symbol) { color: #FFFAF2 !important; }

/* 14.21 · Instagram de Contacto, fiel a la app (17 oct 2026). La casa pidió que
   «se vea similar» y «correctamente medido». Medido contra el perfil público
   (@casasiam.cl, iPhone en modo oscuro): fondo #0C1014, texto #F5F5F5,
   secundario #A8A8A8, azul de botones #4A5DF9, insignia #0095F6, letra del
   sistema, nombre de usuario en negrita, cuadrícula 3:4 con 1 px entre fotos.
   La pantalla tiene la proporción de un iPhone (390 × 844) y corta abajo como
   la app, con su barra inferior. «Mensaje» es solo imagen: las consultas van
   por WhatsApp. */
/* Dos columnas solo desde 861 px; hasta 860 se apilan (texto arriba, teléfono abajo). */
@media (min-width: 861px) {
  html:not(#cs-a):not(#cs-b) .cs-ig-perfil__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 412px) !important; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-ig-perfil__telefono {
  width: 100%; max-width: 412px; justify-self: center; box-sizing: border-box;
  padding: 11px !important; border: 0 !important; border-radius: 56px !important; background: #0B0B0C !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 0 0 1px rgba(0, 0, 0, .55), 0 44px 90px -36px rgba(0, 0, 0, .75) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 45px;
  background: #0C1014; color: #F5F5F5; text-align: left;
  font: 400 14px/18px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: normal;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm :is(p, li, a, span, strong, ul) {
  font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; color: inherit;
  margin: 0; padding: 0; text-transform: none !important; text-decoration: none !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm ul { list-style: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm svg { display: block; flex: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm a:focus-visible { outline: 2px solid #F5F5F5 !important; outline-offset: 2px !important; border-radius: 4px; }

/* Barra de estado e isla */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__estado { flex: none; height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 26px 0 32px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__hora { font-size: 17px !important; line-height: 22px !important; font-weight: 600; letter-spacing: -.02em !important; padding-top: 3px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__isla { align-self: start; width: 125px; height: 37px; margin-top: 11px !important; border-radius: 20px; background: #000; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__sistema { justify-self: end; display: flex; align-items: center; gap: 6px; padding-top: 3px !important; }

/* Barra de navegación */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__nav { flex: none; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 10px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__usuario { display: inline-flex; align-items: center; gap: 4px; font-size: 17px !important; line-height: 22px !important; font-weight: 700; color: #F5F5F5 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__verificado { width: 14px !important; height: 14px !important; margin: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__acciones { margin-left: auto !important; display: flex; align-items: center; gap: 22px; }

/* Cuerpo: cabecera, biografía, botones, destacadas, pestañas y cuadrícula */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__cuerpo { flex: 1; min-height: 0; overflow: hidden; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__cabecera { display: flex; align-items: center; gap: 22px; padding: 6px 16px 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__avatar { flex: none; display: block; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__avatar img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__datos { flex: 1; min-width: 0; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__nombre { font-weight: 600 !important; margin: 0 0 8px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__cifras { display: flex; justify-content: space-between; max-width: 236px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__cifras li { display: flex; flex-direction: column; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__cifras strong { font-size: 16px !important; line-height: 20px !important; font-weight: 700 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__bio { padding: 12px 16px 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__bio .cs-email-address { font: inherit !important; color: inherit !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__bio .cs-email-address::before { color: inherit !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__enlace { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 2px !important; font-weight: 600 !important; color: #E0F1FF !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__botones { display: flex; gap: 6px; padding: 14px 16px 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__boton {
  flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px;
  background: #25292E; color: #F5F5F5 !important; font-weight: 600 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__boton--seguir { background: #4A5DF9; color: #FFFFFF !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__boton--seguir:hover { background: #3E50E8; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__boton.cs-igm__boton--icono { flex: 0 0 34px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__destacadas { display: flex; gap: 16px; padding: 16px 16px 0 !important; overflow: hidden; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__destacadas li { flex: none; width: 64px; text-align: center; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__aro { display: block; width: 64px; height: 64px; padding: 3px !important; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1px #363A3F; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__aro img { width: 58px !important; height: 58px !important; border-radius: 50%; object-fit: cover; display: block; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm .cs-igm__rotulo { display: block; margin-top: 5px !important; font-size: 12px !important; line-height: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__pestanas { display: grid; grid-template-columns: repeat(3, 1fr); height: 44px; margin-top: 14px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__pestana { display: flex; align-items: center; justify-content: center; color: #A8A8A8; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__pestana.es-activa { color: #F5F5F5; box-shadow: inset 0 -1px 0 #F5F5F5; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #1C1F23; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__foto img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: filter .3s cubic-bezier(.32, .72, 0, 1); }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__foto:hover img { filter: brightness(.82); }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__foto:focus-visible { outline-offset: -3px !important; }

/* Barra inferior de la app */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 83px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start;
  padding-top: 11px; background: #0C1014; box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); color: #F5F5F5;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__barra > span { display: flex; justify-content: center; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__yo img { width: 26px !important; height: 26px !important; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm__indicador { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #F5F5F5; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-ig-perfil__telefono { border-radius: 50px !important; padding: 9px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm { border-radius: 41px; }
}

/* 14.22 · Botones, foco, visor y enlaces (17 oct 2026). La casa pidió revisar
   cada botón y cada enlace: «se queda tapada la información con los efectos».
   Se midió cada botón en reposo, al pasar el mouse, con foco de teclado y al
   presionar, a 390, 976 y 1280 px, en las 18 páginas. */

/* Portada, en pantallas táctiles: el relleno dorado de «Conocer camadas»,
   «Ver la galería» y «Cómo se reserva» solo entra con mouse, pero al tocarlos
   el texto pasaba igual a blanco y desaparecía sobre el crema (1,06:1).
   Al presionarlos, el tinte del fondo bajaba el dorado a 4,4:1: mientras se
   presionan van en un dorado más oscuro (6,6:1). */
@media (hover: none) {
}

/* Menú del teléfono por encima de la cabecera. En Contacto la cabecera lleva
   z-index 99990 y su botón tapaba la X: el menú no se podía cerrar. */
html:not(#cs-a):not(#cs-b) #elementor-popup-modal-45 { z-index: 100000 !important; }

/* Selector de idioma de la cabecera de escritorio, por encima del menú. En
   Contacto el menú lleva z-index 99999 y tapaba «EN»: no se podía pulsar. */
html:not(#cs-a):not(#cs-b) [data-elementor-type="header"] .cs-idioma-cabecera { z-index: 100000; }

/* Contacto: correos y píldoras de WhatsApp e Instagram. Al pasar el mouse se
   desplazaban 3 px y, con el puntero en el borde, parpadeaban; el correo,
   además, se aclaraba al 76 % (3,0:1). Ya no se mueven, y el correo se
   oscurece y se subraya. */
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final :is(.cs-mail-button, .cs-social):hover { transform: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-mail-button:hover { opacity: 1 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-mail-button:hover :is(.cs-mail-text, .cs-mail-text span) {
  color: #6F5828 !important; -webkit-text-fill-color: #6F5828 !important; text-decoration: underline !important; text-underline-offset: 4px;
}

/* Botón del menú del teléfono: redondo en todas las páginas, como en la
   portada y como el botón flotante (en las demás era un cuadrado). */
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-78628391 .elementor-icon { border-radius: 999px !important; }

/* Anillos de foco dobles, crema por fuera y espresso por dentro, para que se
   vean sobre fotos claras y oscuras: botón del menú (en la portada medía
   entre 1,2 y 2,6:1) y botón flotante de WhatsApp (2,7:1 en Contacto). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon:focus-visible {
  outline: 2px solid #F3EEE6 !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px #2F1C0E !important;
}
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-wa-flotante:focus-visible {
    outline: 2px solid #F3EEE6 !important; outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #2F1C0E, 0 18px 36px -14px rgba(20, 12, 6, .55) !important;
  }
}
/* Logo de la cabecera: con la cabecera isla, el anillo salía de la isla. */
html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 a:focus-visible { outline-offset: -3px !important; }

/* Instagram de Contacto: el anillo de foco de las fotos quedaba por fuera,
   recortado por las fotos vecinas. Va por dentro, blanco con borde oscuro. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm a.cs-igm__foto { position: relative; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm a.cs-igm__foto:focus-visible { outline: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-igm a.cs-igm__foto:focus-visible::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px #F5F5F5, inset 0 0 0 5px rgba(12, 16, 20, .9);
}

/* Visor de fotos de Galería. Las flechas eran un chevrón claro sin fondo que
   se perdía sobre las fotos claras (2,2:1): van en un círculo oscuro. El foco
   pasa a crema (16,9:1 sobre el fondo del visor; el dorado daba 2,6:1) y, en
   las flechas, rodea el círculo y no la franja de 192 px que lo contiene. Al
   hacer clic ya no aparece el anillo azul del navegador. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-lightbox .elementor-swiper-button svg {
  box-sizing: content-box; padding: 12px; border-radius: 50%; background: rgba(18, 11, 6, .55); fill: #F3EEE6;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-lightbox :is(a, button, [role="button"], [role="switch"], [tabindex]):focus-visible { outline: 2px solid #F3EEE6 !important; outline-offset: 3px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-lightbox .elementor-swiper-button:focus-visible { outline: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-lightbox .elementor-swiper-button:focus-visible svg { outline: 2px solid #F3EEE6; outline-offset: 3px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-lightbox [tabindex]:focus:not(:focus-visible) { outline: none !important; }

/* 14.23 · Revisión de la casa del 17 oct por la tarde: sin botón de pausa,
   selector de idioma a la vista, el bloque de Contacto en dos columnas, su
   héroe más alto y el video de la portada también en el teléfono. */

/* El botón «Pausar video» se quitó: le quitaba estética a los héroes. Quien
   pide «reducir movimiento» sigue viendo la imagen fija (regla 12.10). */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-video-pausa { display: none !important; }

/* Selector de idioma: una píldora con el otro idioma y un globo, en vez del
   «ES | EN» de 13 px que pasaba inadvertido. En escritorio va en la
   cabecera, a la izquierda; en teléfono y tableta, junto al botón del menú
   (la crea casasiam-prototipo.js). El idioma actual y la barra «|» salen de
   la vista: el nombre accesible del enlace («English» / «Español») ya dice
   adónde lleva, y el menú del teléfono y el pie conservan el selector doble. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-idioma-cabecera :is(.cs-idioma__op--actual, .cs-idioma__sep) { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) {
  display: inline-flex !important; align-items: center; gap: 7px; box-sizing: border-box; min-height: 38px; min-width: 0;
  padding: 0 15px 0 12px !important; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  background: rgba(47, 28, 14, .32) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #FFFFFF !important; font-family: var(--cs-fuente-texto) !important; font-size: 13px !important; font-weight: 700;
  line-height: 1 !important; letter-spacing: .14em !important; text-decoration: none !important; text-shadow: none; opacity: 1 !important;
  transition: background-color .35s cubic-bezier(.32, .72, 0, 1), border-color .35s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::before {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):hover { background: #866B34 !important; border-color: #866B34; }
html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):focus-visible { outline: 2px solid #F3EEE6 !important; outline-offset: 3px !important; border-radius: 999px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) a.cs-idioma-barra { min-height: 44px; margin-right: 10px; vertical-align: middle; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-78628391 .elementor-icon-wrapper { white-space: nowrap; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-78628391 .elementor-icon { vertical-align: middle; }

/* Contacto: el bloque de contacto era una columna de 640 px y el resto de la
   página quedaba vacío. Desde 960 px va en dos columnas: a la izquierda el
   lema, el texto y el sello de Google; a la derecha una ficha con los canales
   (WhatsApp, Instagram, correos y dirección). En el teléfono se apila. */
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-wrap { max-width: 1120px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-info { max-width: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-description { max-width: 520px; font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 22px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-contacto-sello { margin: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha {
  margin-top: 40px; padding: 6px; border-radius: 30px; background: rgba(134, 107, 52, .07);
  box-shadow: 0 0 0 1px rgba(134, 107, 52, .16);
  opacity: 0; transform: translateY(20px); animation: csFadeUp .85s cubic-bezier(.22, .61, .36, 1) .3s forwards;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha__inner {
  border-radius: 24px; background: #FFFDF9; padding: 32px 32px 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 48px -32px rgba(47, 28, 14, .28);
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha__grupo + .cs-ficha__grupo { margin-top: 24px !important; padding-top: 24px; border-top: 1px solid rgba(134, 107, 52, .16); }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha .cs-section-title { margin: 0 0 14px !important; font-size: 13px !important; letter-spacing: .14em; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha .cs-social { width: 100%; max-width: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha .cs-social + .cs-social { margin-top: 12px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha .cs-mail-list { margin-top: 0; gap: 8px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha .cs-address p { font-size: 15px !important; line-height: 1.55 !important; }
@media (min-width: 960px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); column-gap: 88px; align-items: start; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-columns { display: contents !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-intro { grid-column: 1; grid-row: 1; margin-bottom: 34px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-info--texto { grid-column: 1; grid-row: 2; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 700px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha { margin-top: 32px; border-radius: 26px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha__inner { border-radius: 20px; padding: 24px 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-ficha { animation: none; opacity: 1; transform: none; }
}

/* Héroe de Contacto: la foto es vertical y la banda mostraba solo una franja
   con el ojo. La banda crece (entre 520 y 700 px), el título queda centrado
   y la foto se encuadra sobre la cara. La foto de origen mide 1487 px de
   ancho: en escritorio y en pantallas Retina se amplía casi al doble y por
   eso se ve blanda; para que gane nitidez hace falta un original mayor. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-escribenos {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(520px, 62vh, 700px); padding: 150px 40px 70px !important;
  background-position: 62% 50% !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-escribenos-header { margin: 0 !important; padding-top: 0 !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-escribenos { min-height: clamp(440px, 66vh, 620px); padding: 110px 24px 56px !important; background-position: 100% 40% !important; } /* en vertical la foto sobra a lo ancho: se alinea a la derecha para que el ojo entre entero */
}

/* Portada en el teléfono: el mismo video que en escritorio (1,8 MB), en vez
   de la imagen fija de 366 px de ancho, para que la portada sea una sola.
   Con «reducir movimiento» sigue la imagen. Historia, Camadas y Familias
   (videos de 3,5 a 4,4 MB) siguen con imagen fija en el teléfono. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-7520593a > .elementor-background-video-container { display: block !important; }
}

/* 14.25 · ™ en el logo, píldora de idioma interactiva, menú del teléfono
   como píldora con un panel más sobrio, y aviso de propiedad intelectual
   en el pie (17 oct 2026, tarde). Pedidos de la casa. */

/* ™ como texto: en el © del pie, el aviso y Términos va en el HTML (<sup class="cs-tm">). */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-tm {
  display: inline-block; position: relative; top: -.95em; margin-left: .12em; vertical-align: baseline;
  font-family: var(--cs-fuente-texto) !important; font-size: .26em !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; opacity: .92;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-footer__bottom, .cs-footer__aviso, .cs-legal) .cs-tm { top: -.45em; font-size: .72em !important; margin-left: .05em; }
/* 20 oct 2026: la casa pidió quitar el ™ de los logos («no ha quedado bien»).
   Salió de los logos de la cabecera y del pie y del título de la portada;
   sigue, como texto, en el © del pie, en el aviso de propiedad y en Términos. */

/* Aviso de propiedad intelectual en el pie, sobre la línea del ©. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-footer__aviso { margin: 44px 0 0 !important; max-width: 760px; font: 400 12px/1.65 var(--cs-fuente-texto) !important; color: #BFB3A3 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-footer__aviso a { color: #D9CFC2 !important; text-decoration: underline; text-underline-offset: 3px; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-footer__aviso a:hover { color: #E2CFA9 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-footer__bottom { margin-top: 18px !important; }

/* Píldora de idioma interactiva: al pasar el mouse o enfocarla, el globo gira
   media vuelta y «EN» se abre en «English» (en inglés, «ES» en «Español»);
   al presionar se hunde un poco. En táctil, el toque navega. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) { gap: 0; overflow: hidden; white-space: nowrap; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::before { margin-right: 7px; transition: transform .7s cubic-bezier(.32, .72, 0, 1); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) > span {
  display: inline-block; max-width: 60px; overflow: hidden; vertical-align: middle;
  transition: max-width .55s cubic-bezier(.32, .72, 0, 1), opacity .35s cubic-bezier(.32, .72, 0, 1), transform .55s cubic-bezier(.32, .72, 0, 1), margin .55s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) > .cs-sr {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; clip: auto !important; white-space: nowrap !important;
  max-width: 0; opacity: 0; transform: translateX(-6px); text-transform: none; letter-spacing: .06em;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):is(:hover, :focus-visible) > .cs-sr { max-width: 110px; opacity: 1; transform: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):is(:hover, :focus-visible) > [aria-hidden="true"] { max-width: 0; opacity: 0; transform: translateX(6px); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):is(:hover, :focus-visible)::before { transform: rotate(180deg); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):active { transform: scale(.96); }

/* Botón del menú (teléfono y tableta): de círculo dorado con tres barras a
   una píldora pareja con la de idioma, con la palabra «Menú» y dos líneas
   finas. La palabra la pone la hoja según el idioma de la página; el nombre
   accesible sigue siendo «Abrir el menú». */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon {
  display: inline-flex !important; align-items: center; gap: 9px; box-sizing: border-box; width: auto !important; height: 44px !important;
  padding: 0 14px 0 16px !important; border: 1px solid rgba(255, 255, 255, .55) !important; border-radius: 999px !important;
  background: rgba(47, 28, 14, .32) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none !important;
  color: #FFFFFF !important; font-family: var(--cs-fuente-texto) !important; font-size: 13px !important; font-weight: 700; line-height: 1 !important; letter-spacing: .14em; text-decoration: none !important;
  transition: background-color .35s cubic-bezier(.32, .72, 0, 1), border-color .35s cubic-bezier(.32, .72, 0, 1), transform .35s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon svg { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon::before { content: "MENÚ"; }
html[lang^="en"]:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon::before { content: "MENU"; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon::after {
  content: ""; flex: none; width: 18px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1.5h16M1 8.5h16'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon:hover { background: #866B34 !important; border-color: #866B34 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon:hover::after { transform: translateX(2px); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-78628391 .elementor-icon:active { transform: scale(.96); }

/* Panel del menú: fondo de vidrio espresso, el panel como cajón a la derecha
   con el borde redondeado (desde 641 px), el monograma arriba, una línea
   dorada que nace bajo el ítem al pasar y el botón de cerrar como aro fino. */
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 { background: rgba(20, 12, 6, .55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-widget-content {
  position: relative; background: linear-gradient(180deg, #33200F 0%, #241509 100%) !important; box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .6) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-widget-content::before {
  content: ""; position: absolute; top: 20px; left: 26px; width: 46px; height: 51px; opacity: .92; pointer-events: none;
  background: url("wp-content/uploads/2025/11/Logo-casa-siam-blanco.webp") center / contain no-repeat;
}
@media (min-width: 641px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 { justify-content: flex-end !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-widget-content { border-radius: 28px 0 0 28px !important; overflow: hidden; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-close-button {
  top: 20px !important; right: 24px !important; border: 1px solid rgba(243, 238, 230, .45) !important; border-radius: 50% !important;
  background: transparent !important; transition: background-color .3s cubic-bezier(.32, .72, 0, 1), border-color .3s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-close-button:hover { background: rgba(243, 238, 230, .1) !important; border-color: rgba(243, 238, 230, .8) !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .dialog-close-button svg { width: 18px !important; height: 18px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item { position: relative; text-decoration: none !important; transition: color .35s cubic-bezier(.32, .72, 0, 1); }
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 28px; height: 1px; background: #C9AE7A;
  transform: translateX(-50%) scaleX(0); transition: transform .45s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item:is(:hover, :focus-visible) { color: #E2CFA9 !important; text-decoration: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item:is(:hover, :focus-visible)::after { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra, .elementor-element-78628391 .elementor-icon), html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::before, html:not(#cs-a):not(#cs-b):not(#cs-c) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) > span { transition: none !important; }
}
/* Entre 1025 y 1120 px el menú de escritorio empieza a 127 px del borde y la
   píldora abierta («English») lo rozaba: en ese tramo gira el globo pero no
   se abre el nombre. */
@media (min-width: 1025px) and (max-width: 1120px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-idioma-cabecera a.cs-idioma__op:is(:hover, :focus-visible) > .cs-sr { max-width: 0; opacity: 0; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-idioma-cabecera a.cs-idioma__op:is(:hover, :focus-visible) > [aria-hidden="true"] { max-width: 60px; opacity: 1; transform: none; }
}

/* 14.26 · Preguntas frecuentes: la fuente de cada respuesta del grupo «¿Es un
   siamés para nosotros?» (17 oct 2026), en una línea aparte y más chica. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-fuente { display: block; margin-top: 8px; font-size: 13px !important; line-height: 1.5; color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-faq-fuente a { color: #6F5828 !important; text-decoration: underline; text-underline-offset: 3px; }

/* 14.26 · Tarjetas parejas también en inglés (17 oct 2026). Cada tarjeta
          interior tenía una altura mínima de 490 px y se centraba dentro de su
          contenedor; cuando un texto pasa de esa altura (el «How to reserve»
          en inglés), esa tarjeta sobresale arriba y abajo. Ahora las tres
          crecen hasta la altura de la más alta y los botones siguen al pie. */
@media (min-width: 768px) {
}

/* 14.27 · Logo horizontal en la isla de la cabecera (17 oct 2026, decisión 42).
          El emblema (óvalo con «EST. 2024») iba a 73 px de ancho en una isla
          de 81 px: tocaba los bordes y quedaba bajo el mínimo del Manual (F.1:
          96 px para el emblema, 120 para el logo). La casa eligió el logo
          horizontal («EST. CS 2024»), la pieza que el Manual nombra para la
          cabecera. Se usa el archivo que ya está en la biblioteca de medios
          (CasaSiam-Logo-Blanco-cs460.webp, el mismo de la barra del teléfono),
          que trae su propio margen transparente: a 150 px de ancho el dibujo
          mide 134 × 90 px; entre 1025 y 1279 px, a 134 px, mide 120 × 81, el
          mínimo del Manual. Con 6 px de relleno la isla pasa de 81 a unos
          118 px (107 en escritorio estrecho). El ™ queda en la esquina
          superior derecha del dibujo. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] > .elementor-element-8fe4d5c { padding-top: 6px !important; padding-bottom: 6px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }
  /* La columna del logo medía 140 px fijos y el dibujo de 150 se salía por la derecha: ahora se ajusta al logo y las dos columnas del menú ceden parejo. */
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-43fcafb8 { --width: auto; width: auto !important; flex: 0 0 auto !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 a { display: block !important; line-height: 0; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 img { width: 150px !important; height: auto !important; max-width: none !important; display: block; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 img { width: 134px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-element-63482937 { margin-left: 10px !important; margin-right: 10px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) { padding-left: 9px !important; padding-right: 9px !important; }
}

/* 14.28 · Menú de papel, logo una sola vez en la portada y escritorio con
          más aire (17 oct 2026, noche). La casa vio el menú saturado (panel
          espresso con desenfoque, degradado, monograma, aro de cierre y
          subrayados dorados) y, en la portada, el logo de la cabecera justo
          encima del logo del héroe.
   - El panel del menú pasa a papel: la crema de la marca con el grano del
     sitio, la lista en espresso alineada a la izquierda y de arriba abajo,
     un solo acento (la píldora de WhatsApp), sin desenfoque, degradado ni
     monograma. Cierra con una equis fina que gira al pasar. La página
     actual lleva un punto dorado al margen.
   - (Retirado la misma noche, ver 14.30: ocultar el logo de la cabecera en la
     portada dejaba un hueco en el menú; la casa lo rechazó.)
   - Escritorio: ítems de 22 a 20 px desde 1280 px; a 1440 y más, un poco
     menos de relleno para que el aire sea parejo. */

/* El panel */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 {
  background: #F3EEE6 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  justify-content: flex-start !important; align-items: stretch !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-widget-content {
  position: relative; width: 100% !important; max-width: none !important; height: 100% !important; border-radius: 0 !important;
  background: #F3EEE6 !important; box-shadow: none !important; overflow: visible !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-widget-content::before { display: none !important; }
/* Grano de papel, el mismo del cuerpo del sitio (la capa fija del cuerpo queda debajo del panel) */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-widget-content::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; 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:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-message { width: 100% !important; max-width: none !important; max-height: 100vh; max-height: 100dvh; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-element-70336bde {
  --justify-content: flex-start; --align-items: flex-start; --min-height: 100vh; --min-height: 100dvh;
  box-sizing: border-box; padding: 96px clamp(28px, 9vw, 140px) 56px !important;
}

/* La lista, a la izquierda */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-widget-nav-menu { width: 100% !important; margin: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main > .elementor-nav-menu > li { margin: 0 !important; text-align: left !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item {
  position: relative; display: inline-flex !important; justify-content: flex-start !important; text-align: left !important; width: auto !important;
  padding: 9px 0 !important; background: none !important; color: #2F1C0E !important;
  font-family: var(--cs-fuente-titulos) !important; font-size: clamp(30px, 4.6vw, 40px) !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: 0 !important;
  text-decoration: none !important; text-shadow: none !important;
  transition: color .45s cubic-bezier(.32, .72, 0, 1), transform .45s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item::after { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]):is(:hover, :focus-visible) { color: #866B34 !important; transform: translateX(8px); text-decoration: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item.elementor-item-active:not([href*="wa.me"]) { color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item.elementor-item-active:not([href*="wa.me"])::before {
  content: ""; position: absolute; left: -20px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #866B34;
}

/* Idioma, bajo una línea fina, y la píldora de WhatsApp como único acento */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma-item {
  display: flex !important; justify-content: flex-start !important; margin: 26px 0 0 !important; padding: 22px 0 0 !important;
  border-top: 1px solid rgba(47, 28, 14, .14); color: #2F1C0E !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma { font-size: 13px !important; letter-spacing: .16em !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma a.cs-idioma__op { color: #2F1C0E !important; opacity: .72; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma a.cs-idioma__op:is(:hover, :focus-visible) { opacity: 1; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma__op--actual { text-decoration-color: #866B34; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 a.elementor-item[href*="wa.me"] {
  display: inline-flex !important; width: auto !important; margin: 22px 0 0 !important; min-height: 52px !important; padding: 0 26px !important;
  border-radius: 999px !important; background: #866B34 !important; color: #fff !important;
  font-family: var(--cs-fuente-texto) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: .01em !important; line-height: 1 !important;
  transform: none !important; transition: background-color .45s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 a.elementor-item[href*="wa.me"]:is(:hover, :focus-visible) { background: #6F5828 !important; color: #fff !important; }

/* Cerrar: una equis fina, sin aro, que gira al pasar */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-close-button {
  top: 20px !important; right: 20px !important; left: auto !important; inset-inline-end: 20px !important;
  width: 44px !important; height: 44px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: #2F1C0E !important; font-size: 20px !important;
  transition: transform .6s cubic-bezier(.32, .72, 0, 1), background-color .4s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-close-button:hover { background: rgba(47, 28, 14, .07) !important; transform: rotate(90deg); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-close-button svg { width: 20px !important; height: 20px !important; fill: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-close-button i { color: #2F1C0E !important; }
/* Foco sobre crema: anillo espresso */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 :is(a, button, [role="button"]):focus-visible { outline: 2px solid #2F1C0E !important; outline-offset: 4px !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 :is(.elementor-nav-menu--main a.elementor-item, .dialog-close-button, a.elementor-item[href*="wa.me"]) { transition: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]):is(:hover, :focus-visible) { transform: none; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .dialog-close-button:hover { transform: none; }
}

@media (min-width: 1280px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) { font-size: 20px !important; }
}
@media (min-width: 1440px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) [data-elementor-type="header"] .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]) { padding-left: 22px !important; padding-right: 22px !important; }
}
/* Mientras el script mide la cabecera (cs-midiendo), nada transiciona: así el
   logo y «Consultar» de la portada no aparecen y se desvanecen al cargar. */
html.cs-midiendo:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) [data-elementor-type="header"] :is(.elementor-element-63482937, a.elementor-item, .elementor-element-8fe4d5c) { transition: none !important; animation: none !important; }

/* 14.29 · Controles del tope fieles al original (17 oct 2026, noche). La casa
          aprobó el menú de papel, el logo una sola vez y el blog («Está re
          lindo») y pidió cambiar «toda esa píldora que tiene cada una de las
          secciones en el tope», recordando «seguir la fidelidad del diseño de
          la página web original». En el sitio original el botón del menú del
          teléfono y la tableta es el ícono blanco de tres barras, sin caja, y
          el idioma va en texto. Vuelven así:
   - El botón del menú: el ícono original (tres barras blancas), con 44 px de
     toque, sin fondo, borde ni palabra. Las píldoras de 14.25 quedan pisadas.
   - El idioma: «EN» en texto blanco, en la letra y el espaciado del ES | EN
     original, con una línea fina que se dibuja al pasar; sigue abriéndose en
     «English» al pasar o enfocar. Sin globo.
   - Al desplazar, para que se lean sobre las secciones crema, los dos
     controles del teléfono entran en una cápsula espresso, la misma materia
     que la cápsula de escritorio. Arriba del todo no hay nada alrededor. */

/* El botón del menú: el ícono original */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon {
  display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; margin: 0 !important; gap: 0 !important;
  border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #FFFFFF !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important;
  filter: drop-shadow(0 1px 6px rgba(30, 18, 8, .45));
  transition: opacity .35s cubic-bezier(.32, .72, 0, 1), transform .35s cubic-bezier(.32, .72, 0, 1), filter .5s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon::before,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon::after { content: none !important; display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon svg { display: block !important; width: 24px !important; height: 24px !important; fill: #FFFFFF !important; }
@media (min-width: 768px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon svg { width: 27px !important; height: 27px !important; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon:hover { opacity: .82; background: transparent !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon:active { transform: scale(.94); }

/* El idioma: texto, como el ES | EN original */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra) {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; min-width: 44px; padding: 0 10px !important; margin: 0 !important; gap: 0;
  border: 0 !important; border-radius: 4px; background: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #FFFFFF !important; font-family: var(--cs-fuente-texto) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .14em !important;
  text-decoration: none !important; text-shadow: 0 1px 8px rgba(30, 18, 8, .45) !important; opacity: 1 !important;
  transition: opacity .35s cubic-bezier(.32, .72, 0, 1), text-shadow .5s cubic-bezier(.32, .72, 0, 1) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::before { content: none !important; display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 11px; height: 1px; background: currentColor; opacity: .9;
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):is(:hover, :focus-visible) { background: transparent !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):is(:hover, :focus-visible)::after { transform: scaleX(1); }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):active { transform: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra):focus-visible { outline: 2px solid #F3EEE6 !important; outline-offset: 2px !important; border-radius: 4px !important; box-shadow: 0 0 0 4px #2F1C0E !important; }

/* Teléfono y tableta: los dos controles juntos; al desplazar, en una cápsula espresso */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 { display: flex !important; justify-content: flex-end; align-items: center; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon-wrapper {
    display: inline-flex !important; align-items: center; gap: 2px; box-sizing: border-box; padding: 0; border-radius: 999px; background: transparent;
    transition: background-color .5s cubic-bezier(.32, .72, 0, 1), padding .5s cubic-bezier(.32, .72, 0, 1), box-shadow .5s cubic-bezier(.32, .72, 0, 1);
  }
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon-wrapper {
    padding: 2px 4px 2px 8px; background: rgba(47, 28, 14, .9); -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 18px 36px -20px rgba(20, 12, 6, .7);
  }
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon { box-shadow: none !important; animation: none !important; filter: none; }
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) a.cs-idioma-barra { text-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.elementor-element-78628391 .elementor-icon, .elementor-element-78628391 .elementor-icon-wrapper, .cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra),
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) :is(.cs-idioma-cabecera a.cs-idioma__op, a.cs-idioma-barra)::after { transition: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .elementor-element-78628391 .elementor-icon:active { transform: none; }
}

/* 14.30 · La portada sin el logo repetido y «Consultar» en texto (17 oct 2026,
          noche). La casa, al ver la cabecera de la portada con el hueco donde
          iba el logo (14.28): «Quedó libre el espacio del logo. Está todo mal
          hecho». Y antes: «seguir la fidelidad del diseño de la página web
          original».
   - El logo vuelve a estar siempre en la cabecera: se quitó la regla de 14.28
     que lo ocultaba en la portada. Lo que se repetía era el emblema pequeño
     del héroe, que es el mismo archivo: en escritorio, donde la cabecera ya
     muestra el logo, el héroe lo deja de mostrar y abre con el nombre; en el
     teléfono y la tableta, donde la cabecera no lleva logo, el héroe lo
     conserva. La regla de pantallas bajas (max-height 760) ya hacía lo mismo.
   - «Consultar» deja la píldora (13.3) y vuelve a ser un ítem de texto del
     menú, como en el sitio original: misma letra, relleno y subrayado de
     puntero que los demás. El botón principal sigue en el héroe, en las
     secciones y en el botón flotante. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) body.home .cs-portada-logo { display: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] {
    display: inline-flex !important; align-items: center; min-height: 0 !important; margin: 0 !important; padding: 13px 25px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    color: #FFFFFF !important; font-family: var(--cs-fuente-titulos) !important; font-size: 22px !important; font-weight: 400 !important;
    letter-spacing: 0 !important; line-height: 1.2 !important; text-transform: none !important;
    text-shadow: 0 1px 8px rgba(30, 18, 8, .45) !important; transform: none !important; transition: none !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]:is(:hover, :focus-visible) { background: transparent !important; color: #FFFFFF !important; }
  /* El subrayado de puntero de Elementor, como en los demás ítems */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]::after { display: block !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"]::before { display: none !important; }
}
/* Letra y relleno por tramos: los mismos que los demás ítems (13.x, 14.27, 14.28 y la hoja del idioma) */
@media (min-width: 1025px) and (max-width: 1279px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { font-size: 19px !important; padding-left: 9px !important; padding-right: 9px !important; }
}
@media (min-width: 1280px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { font-size: 20px !important; }
}
@media (min-width: 1280px) and (max-width: 1339px) {
  html:lang(es):not(.cs-desplazado):not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (min-width: 1340px) and (max-width: 1399px) {
  html:lang(es):not(.cs-desplazado):not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { padding-left: 22px !important; padding-right: 22px !important; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (min-width: 1440px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { padding-left: 22px !important; padding-right: 22px !important; }
}

/* 14.31 · El logo de la isla, más chico (18 oct 2026, decisión 45). La casa,
          al ver la cabecera: «El logo está muy enorme aún». La 14.27 lo llevaba
          a 150 px de imagen (dibujo de 134 × 90) desde 1280 px y a 134
          (120 × 81) en escritorio estrecho. Se le mostró el mínimo del Manual
          (134 px de imagen, dibujo de 120) y un tamaño menor, y eligió el
          menor: «Bájalo a 112 px, aunque quede por debajo del Manual». Queda en
          112 px de imagen en todo escritorio: el dibujo mide 100 × 68 y la isla
          baja de 118 a 91 px. El Manual (F.1) pide 120 px de dibujo para el
          logo; la casa decidió ir por debajo en la cabecera del sitio. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] .elementor-element-63482937 img { width: 112px !important; }
  /* 20 oct 2026: la casa pidió «suficiente espacio» para el logo en la barra:
     el aire a cada lado sube de 16 a 28 px en escritorio estrecho y a 44 px
     desde 1280 (antes, los ítems vecinos quedaban a 16 px del dibujo). */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] .elementor-element-63482937 { margin-left: 28px !important; margin-right: 28px !important; }
}
@media (min-width: 1280px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] .elementor-element-63482937 { margin-left: 44px !important; margin-right: 44px !important; }
}
/* Con el logo más angosto, las dos columnas del menú (45 % cada una) ya no
   llenaban la isla desde 1441 px y el logo quedaba 5 u 8 px a la izquierda
   del centro. Las dos columnas se reparten el ancho por igual: el logo queda
   centrado en cualquier ancho; hasta 1440 no cambia nada. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] :is(.elementor-element-3a4bc60f, .elementor-element-1741bbea) { flex: 1 1 0 !important; min-width: 0; }
}

/* 14.32 · Revisión de la casa del 20 oct 2026 ------------------------------
   - Los correos de Contacto traían una sombra paralela: text-shadow 0 0 10px
     rgba(0,0,0,.3) sobre .cs-mail-button, heredado del CSS personalizado del
     sitio en Elementor (en esta copia, wp-content/litespeed/css/ff3c213b….css).
     En el sitio real hay que quitarlo de ese CSS; aquí se anula. */
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-mail-button,
html:not(#cs-a):not(#cs-b):not(#cs-c) #cs-contacto-final .cs-mail-button * { text-shadow: none !important; }

/* - Familias: la foto en blanco y negro se ve a color al pasar el cursor, al
     enfocar la tarjeta con el teclado o al tocarla. El efecto necesita las
     fotos a color en assets/familias/ (hoy los siete archivos están en
     blanco y negro, así que todavía no se nota). */
html:not(#cs-a):not(#cs-b) .cs-testimonio__foto { filter: grayscale(1); transition: filter .7s cubic-bezier(.32, .72, 0, 1); }
html:not(#cs-a):not(#cs-b) .cs-testimonio:hover .cs-testimonio__foto,
html:not(#cs-a):not(#cs-b) .cs-testimonio:focus-within .cs-testimonio__foto,
html:not(#cs-a):not(#cs-b) .cs-testimonio:active .cs-testimonio__foto { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { html:not(#cs-a):not(#cs-b) .cs-testimonio__foto { transition: none; } }

/* 14.33 · Papel con textura (20 oct 2026). La casa envió una textura de papel y
   pidió usarla «en más sitios»; la baldosa es la imagen y sus tres espejos
   (1152 × 812 px, 20 KB, sin costuras), con la media llevada a #FAF8F5 y
   multiplicada con el color de cada superficie. Esa tarde, al verla en Contacto
   e Historia, pidió quitarla de ahí y dejar esas páginas como estaban («lo
   mejor era decirte cuáles eran las zonas»): queda solo donde nació, en la
   portada («Próximas entregas», la zona de las tarjetas y la línea de enlaces)
   y en el menú de papel del teléfono, hasta que la casa diga las zonas. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-estado, #elementor-popup-modal-45 .dialog-widget-content) {
  background-image: url("papel/papel-casa-siam.webp") !important; background-size: 1152px 812px !important; background-repeat: repeat !important; background-blend-mode: multiply;
}
@media print { html:not(#cs-a) body, html:not(#cs-a) .cs-estado, html:not(#cs-a) #cs-contacto-final { background-image: none !important; } }

/* 14.34 · Portada: tarjetas y bienvenida tal cual la web (20 oct 2026). La casa
   pidió dejar las dos secciones «con el mismo diseño y animaciones que tiene
   actualmente en la web». Ese diseño es el CSS propio del sitio (la hoja
   combinada 8115e281…css, con sus animaciones de aparición y de los botones),
   así que no se añade nada: se retiraron de esta hoja todas las reglas de las
   pasadas anteriores sobre .cs-camadas, .cs-galeria, .cs-reserva, sus
   contenedores (640cbbc9, 10c7a54c, 400c46ad), .cs-bienvenida y el contenedor
   11235c1e (panel, botones, alineación, alturas, tamaños), y de la hoja de alta
   gama, las placas de doble bisel y el panel. Quedan el foco visible (12.4) y
   la nota de la visita bajo los botones de la bienvenida. */
/* 20 oct 2026, tarde: Contacto e Historia volvieron a su fondo de antes; ver 14.33.
   20 oct 2026, noche: también la zona de las tarjetas de la portada y su línea de
   enlaces, a pedido de la casa («restaurarlo a su color original»): sin papel y
   transparentes sobre el blanco de la página, como en la web. */

/* 14.35 · Subtítulos en cursiva, a la manera de la portada (20 oct 2026). La
   casa pidió llevar a las secciones parecidas lo que hace el héroe de la
   portada: el título en la Seasons recta y, debajo, una línea más chica en la
   Seasons cursiva, en minúscula y sin espacio entre letras («Criadero de
   siameses modernos» bajo «Nacidos de la herencia, criados para el tiempo»).
   Va en la línea bajo el título de los héroes de Historia, Camadas, Galería,
   Familias, Preguntas frecuentes, Términos y Política, y en la fecha bajo
   «Próximas entregas» (antes en versalitas doradas espaciadas). Esas líneas
   pasaron de mayúsculas a minúscula en el HTML, en los dos idiomas. Elementor
   conserva el tamaño de cada ancho; solo las líneas que eran de Poppins a
   12 px toman un tamaño propio. Quedan fuera la bienvenida y las tarjetas de
   la portada (14.34) y los antetítulos («Desde 2024», «CASA SIAM» en Contacto). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(
  .cs-portada-descriptor,
  .cs-estado__fecha,
  .cs-seccion-titulo, .cs-historia-final-titulo,
  .elementor-element-2801596c .elementor-heading-title, .elementor-element-a2e7b1d .elementor-heading-title,
  .elementor-element-2a35b4c4 .elementor-heading-title,
  .elementor-element-68c3daa4 .elementor-heading-title, .elementor-element-0b2ebc2 .elementor-heading-title,
  .cs-banda > p
) {
  font-family: var(--cs-fuente-titulos) !important; font-style: italic !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-estado__fecha {
  margin-top: 14px !important; font-size: clamp(19px, 1.5vw, 22px) !important; line-height: 1.25 !important; color: #6F5828 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-banda > p {
  margin-top: 14px !important; font-size: clamp(17px, 1.45vw, 22px) !important; line-height: 1.25 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-element-a2e7b1d .elementor-heading-title { font-size: clamp(23px, 1.9vw, 28px) !important; }
/* En el teléfono y la tableta chica (≤ 840 px, el corte de Elementor en estos
   héroes) la cursiva en minúscula a 15–16 px se perdía bajo títulos de 44 a
   69 px: sube a 19–23 px. El sello de Historia, igual en su propio héroe. */
@media (max-width: 840px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.elementor-element-2801596c, .elementor-element-2a35b4c4, .elementor-element-68c3daa4) .elementor-heading-title { font-size: clamp(19px, calc(.9vw + 15.5px), 23px) !important; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-seccion-titulo { font-size: clamp(19px, calc(2vw + 11px), 30px) !important; }

/* 14.36 · Ronda de la noche del 20 oct 2026 ----------------------------------
   Pedidos de la casa con capturas: «Nuestra filosofía de crianza» con el
   formato de la web; menú sin el rótulo en versalitas ni el «ES | EN»
   espaciado («delatan el estilo de diseño de Claude»); el efecto del menú de
   Fluid Glass al pasar el cursor; todos los botones «traslúcidos y
   redondeados», a la manera de los de la bienvenida en la web; y Tita en la
   bienvenida. La zona de las tarjetas volvió a su color original en 14.33. */

/* Historia · «Nuestra filosofía de crianza»: el texto en Montserrat dorado,
   como lo trae la sección en la web (la cursiva del título y la ceja en
   Montserrat vuelven al quitar la sección de 12.9 y de la regla de fuentes). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-filosofia__text p {
  font-family: Montserrat, Arial, sans-serif !important; color: var(--cs-color, #866A34) !important;
  font-size: inherit !important; line-height: inherit !important;
}

/* Menú del teléfono · el rótulo, en la voz de los subtítulos (14.35) */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-element-7245b6d8::before {
  margin: 0 0 14px !important; font: italic 400 22px/1.1 var(--cs-fuente-titulos) !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #866B34 !important;
}
/* … y el idioma con las palabras enteras (ya estaban en el HTML para los
   lectores de pantalla), sin mayúsculas espaciadas, negrita ni barra. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma {
  gap: 24px !important; font-family: var(--cs-fuente-titulos) !important; font-size: 21px !important; letter-spacing: 0 !important; line-height: 1.2 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma .cs-sr {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: nowrap !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 :is(.cs-idioma__op > [aria-hidden="true"], .cs-idioma__sep) { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma .cs-idioma__op { min-width: 0 !important; padding: 0 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma .cs-idioma__op--actual {
  font-weight: 400 !important; font-style: italic !important; text-decoration: none !important; color: #2F1C0E !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma a.cs-idioma__op {
  opacity: 1 !important; color: #6B5B45 !important; text-decoration: underline !important;
  text-decoration-thickness: 1px !important; text-decoration-color: rgba(107, 91, 69, .35) !important; text-underline-offset: 6px !important;
  transition: color .4s cubic-bezier(.32, .72, 0, 1), text-decoration-color .4s cubic-bezier(.32, .72, 0, 1);
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma a.cs-idioma__op:is(:hover, :focus-visible) { color: #2F1C0E !important; text-decoration-color: #866B34 !important; }

/* Menú · al pasar el cursor, los demás ítems se atenúan de a poco y el
   señalado queda firme (referencia de la casa: el menú de Fluid Glass). La
   palabra que subía y entraba desde abajo salió a pedido de la casa el 20 de
   octubre en la noche («no me gusta que gire»). En la cabecera, el subrayado
   queda solo para la página actual. Sin script: el enlace de WhatsApp del
   panel del teléfono no atenúa a los demás. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .cs-idioma :is(a, span) { font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is([data-elementor-type="header"], .elementor-location-popup) .elementor-nav-menu--main a.elementor-item { transition: opacity .45s cubic-bezier(.32, .72, 0, 1), color .45s cubic-bezier(.32, .72, 0, 1) !important; }
/* «Consultar» de la cabecera venía sin transición (para que no se animara su relleno al desplazar); se desvanece igual que los demás */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) [data-elementor-type="header"] a.elementor-item[href*="wa.me"] { transition: opacity .45s cubic-bezier(.32, .72, 0, 1), color .45s cubic-bezier(.32, .72, 0, 1) !important; }
@media (hover: hover) and (pointer: fine) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) [data-elementor-type="header"]:has(.elementor-nav-menu--main a.elementor-item:hover) .elementor-nav-menu--main a.elementor-item:not(:hover) { opacity: .45; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-location-popup:has(.elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]):hover) .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]):not(:hover) { opacity: .4; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) [data-elementor-type="header"] .e--pointer-underline a.elementor-item:not(.elementor-item-active):is(:hover, :focus)::after { opacity: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item:not([href*="wa.me"]):is(:hover, :focus-visible) { color: #2F1C0E !important; transform: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #elementor-popup-modal-45 .elementor-nav-menu--main a.elementor-item.elementor-item-active:not([href*="wa.me"]):is(:hover, :focus-visible) { color: #6F5828 !important; }
/* Pie · el mismo gesto (pedido de la casa, 20 oct, noche: «una
   ligera animación… verse con menos opacidad al pasar el cursor»). En el menú
   del pie, los demás enlaces se atenúan; el que está bajo el cursor pasa al
   oro de a poco. Los enlaces de contacto y los legales solo
   ganan la transición. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-footer__nav, .cs-footer__contact) a,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-footer__bottom a:not([class]) {
  transition: opacity .45s cubic-bezier(.32, .72, 0, 1), color .45s cubic-bezier(.32, .72, 0, 1), border-color .45s cubic-bezier(.32, .72, 0, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-footer__nav:has(a:hover) a:not(:hover) { opacity: .45; }
}

/* Botones · traslúcidos y redondeados. La receta es la de los botones de la
   bienvenida en la web: velo café al 15 %, desenfoque de 5 px, filete de 1 px
   y píldora. Sobre foto u oscuro, filete y texto casi blancos; sobre claro,
   velo y filete en el oro oscuro del Manual. Sin la flecha en disco de la
   pasada de alta gama (la casa la señaló el 19 como «look de Claude»). Las
   tarjetas y la bienvenida de la portada ya eran así y no se tocan; quedan
   fuera el «Seguir» de la imitación de Instagram y el salto del mapa. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-ig__boton, .cs-estado__boton, .cs-etica__boton, .cs-wa-boton, .cs-familias__boton, #elementor-popup-modal-45 a.elementor-item[href*="wa.me"]),
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-ig__boton, .cs-estado__boton, .cs-etica__boton, .cs-wa-boton, .cs-familias__boton):is(:link, :visited) {
  border-radius: 999px !important; box-shadow: none !important; -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important;
  transition: background-color .5s cubic-bezier(.32, .72, 0, 1), border-color .5s cubic-bezier(.32, .72, 0, 1), color .5s cubic-bezier(.32, .72, 0, 1) !important;
}
/* sobre foto u oscuro */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-ig__boton),
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-ig__boton):is(:link, :visited) {
  background: rgba(66, 47, 31, .15) !important; border: 1px solid rgba(255, 253, 249, .92) !important; color: #FFFDF9 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-ig__boton):is(:hover, :focus-visible) { background: rgba(255, 253, 249, .16) !important; color: #FFFDF9 !important; }
/* sobre claro */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-estado__boton, .cs-etica__boton, .cs-wa-boton, .cs-familias__boton, #elementor-popup-modal-45 a.elementor-item[href*="wa.me"]),
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-estado__boton, .cs-etica__boton, .cs-wa-boton, .cs-familias__boton):is(:link, :visited) {
  background: rgba(134, 107, 52, .07) !important; border: 1px solid #6F5828 !important; color: #6F5828 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-estado__boton, .cs-etica__boton, .cs-wa-boton, .cs-familias__boton, #elementor-popup-modal-45 a.elementor-item[href*="wa.me"]):is(:hover, :focus-visible) {
  background: rgba(134, 107, 52, .16) !important; border-color: #5F4A25 !important; color: #5F4A25 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-etica__boton :is(.cs-etica__boton-texto),
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-etica__boton:hover .cs-etica__boton-texto { color: inherit !important; }
/* la flecha en disco, fuera; el texto, centrado */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton) { gap: 0 !important; padding: 0 28px !important; justify-content: center !important; transform: none; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-portada-boton, .cs-estado__boton, .cs-etica__boton)::after { display: none !important; }
/* el botón flotante de WhatsApp pasa por encima de todo: velo más denso */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-wa-flotante {
    background: rgba(47, 28, 14, .55) !important; border: 1px solid rgba(255, 253, 249, .75) !important; color: #FFFDF9 !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-wa-flotante:hover { background: rgba(47, 28, 14, .72) !important; }
}
/* Contacto: WhatsApp e Instagram de la ficha. El relleno que entra al pasar
   ahora es un velo, y el texto sigue en dorado (deja sin efecto 14.20). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #cs-contacto-final .cs-social {
  background: rgba(134, 107, 52, .06) !important; border: 1px solid rgba(111, 88, 40, .55) !important;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: none !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #cs-contacto-final .cs-social::before { background: rgba(134, 107, 52, .14) !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #cs-contacto-final .cs-social:hover { color: #6F5828 !important; border-color: #6F5828 !important; box-shadow: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) #cs-contacto-final .cs-social:hover :is(.cs-social-name, .cs-social-text, .cs-symbol, .cs-social-icon) { color: #6F5828 !important; }

/* Portada · Tita en la bienvenida (pedido de la casa con su maqueta). La
   foto de primer plano, con los bordes izquierdo, superior y derecho
   desvanecidos sobre su propio fondo (gris #252728 hasta el 31 oct; desde entonces, café), queda a la derecha
   del texto en escritorio, mirando hacia él. Hasta 1199 px, donde el texto
   ocupa casi todo el ancho, aparece debajo del texto: la sección suma abajo el
   alto de su cabeza. El velo dorado no cambia.
   Escritorio (corrección de la casa, 20 oct, noche: «no debe superponerse al
   gato; el gato debe poder apreciarse completo»): el texto va en una columna
   de 480 a 600 px (el título baja a dos líneas, como en el teléfono) y Tita,
   apoyada en el borde inferior, queda a su derecha con la cabeza entera, sin
   que el texto toque ni la punta de sus bigotes. Su alto sale del ancho
   libre a la derecha del texto (borde izquierdo del texto, 76 px + 4 vw;
   columna; aire, 3 vw + 16 px): de la punta de los bigotes (22,3 % del
   ancho de la foto) al 80 % del ancho hay 0,8655 altos de foto, así que en
   pantallas medianas el borde derecho corta apenas su costado, como en el
   teléfono. Nunca pasa del alto de la pantalla; cuando sobra ancho, la gata
   entera (0,993 altos, de los bigotes al lomo) se centra en el espacio
   libre. Abajo, el relleno baja del
   15 % al 5 % del ancho (el de arriba) para que la sección siga cabiendo en
   una pantalla con el texto más angosto. */
/* Tita sobre café (31 oct 2026; Oriana: el gris rompía con los cafés de la portada). La foto lleva su
   fondo de estudio pasado a café por zonas (lejos de Tita, el café exacto de la sección; cerca, su luz),
   con los ojos, el pelaje, las puntas y el collar intactos. La sección es café desde el primer momento,
   aunque la foto aún no cargue, y su velo termina en café muy oscuro en lugar de negro. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e { background-color: #3B2718 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e::before { background-image: linear-gradient(#9E6E17 36%, #1E120A 77%) !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e.e-lazyloaded {
  background-color: #3B2718 !important;
  background-image: url("wp-content/uploads/2026/10/casa-siam-tita-siamesa-seal-point-bienvenida-fondo-cafe.webp") !important;
  background-repeat: no-repeat !important;
}
/* La nota de la visita: su enlace («Unidad de Fomento», en inglés) en el color del texto, subrayado, y no en el azul del navegador */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-bienvenida__nota a { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: rgba(255, 255, 255, .45) !important; text-underline-offset: 3px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-bienvenida__nota a:hover { text-decoration-color: currentColor !important; }
@media (min-width: 1200px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e {
    --cs-tita-texto: clamp(480px, calc(32vw + 50px), 600px);
    --cs-tita-libre: calc(93vw - 92px - var(--cs-tita-texto));
    --cs-tita-alto: min(100vh, calc(var(--cs-tita-libre) / .8655));
    padding-bottom: 5% !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e .cs-bienvenida { max-width: var(--cs-tita-texto) !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e.e-lazyloaded {
    background-size: auto var(--cs-tita-alto) !important;
    background-position: left calc(92px + 7vw + var(--cs-tita-texto) + max(0px, (var(--cs-tita-libre) - .993 * var(--cs-tita-alto)) / 2) - .3345 * var(--cs-tita-alto)) bottom 0 !important;
  }
}
@media (max-width: 1199px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e.e-lazyloaded {
    background-size: min(160vw, 900px) auto !important; background-position: 38.8% 100% !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-11235c1e { padding-bottom: calc(min(160vw, 900px) * .52 + 24px) !important; }
}

/* 14.37 · Instagram junto a WhatsApp (20 oct 2026, noche). La casa: «está
   genial que todo lleve a WhatsApp; necesito que algunas también lleven a
   nuestro Instagram». Eligió cuatro lugares de día a día y vida en familia: el
   módulo de ética de la portada («Instagram», junto a «Consultar por
   WhatsApp»), el cierre de Familias («Sus historias en Instagram»), el final de
   Galería («Ver más en Instagram») y el de Historia («Nuestro día a día en
   Instagram»). Usan los botones claros traslúcidos de 14.36. Lo que lleva a
   consultar o reservar sigue solo con WhatsApp (regla de Meta del 2 oct) y
   Camadas no enlaza a Instagram (decisión 27). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-etica__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-ig-accion { text-align: center !important; margin: 8px 0 72px !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-etica__botones { flex-direction: column; align-items: flex-start; }
}

/* 14.38 · Portada: los botones de las tres tarjetas no se salen de su
   tarjeta (20 oct 2026, noche). La hoja de las tarjetas, la del sitio
   original, les da un ancho mínimo fijo: 220 px a «Conocer camadas» y
   250 px a «Ver la galería» y a «Cómo se reserva». Entre 841 y 1099 px las
   tres tarjetas van en fila y no tienen ese ancho: a 841 px quedan 169 px
   de contenido, y «Cómo se reserva» se salía 25 px de la pantalla mientras
   los otros dos invadían el borde de la tarjeta vecina. Solo en ese rango,
   cada botón mide su ancho de siempre si cabe y, si no, el ancho de la
   tarjeta, centrado y en una línea («Conocer camadas» con 22 px de relleno
   en vez de 30). Bajo 841 px y desde 1100 px nada cambia.
   En Elementor: copiar este bloque al CSS del sitio. */
@media (min-width: 841px) and (max-width: 1099px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .e-con-full:has(> .elementor-widget :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton)) { container-type: inline-size; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton):is(*, :link, :visited) { max-width: 100cqw !important; white-space: nowrap; align-self: center !important; margin-left: 0 !important; margin-right: 0 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .cs-camadas__boton:is(*, :link, :visited) { min-width: min(220px, 100cqw) !important; padding-left: 22px !important; padding-right: 22px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) :is(.cs-galeria__boton, .cs-reserva__boton):is(*, :link, :visited) { min-width: min(250px, 100cqw) !important; }
}

/* 14.39 · Poppins y Montserrat, alojadas en el sitio (20 oct 2026, noche).
   La casa siguió la recomendación: The Seasons queda en Adobe Fonts (solo
   ahí tiene licencia) y Poppins y Montserrat, de licencia libre (SIL OFL
   1.1), se sirven desde el propio sitio, con los mismos archivos que
   entregaba Google: subconjuntos latino y latino extendido, en woff2, con
   sus licencias en assets/fuentes/. Así no se pide nada a Google ni a
   Adobe para el texto, la letra llega antes (Poppins 400 y 500 van
   precargadas en la cabecera de cada página) y vuelve la flecha de
   «↑ Volver al índice», que el conjunto por defecto de Adobe no trae.
   Pesos: los que dibujan las 18 páginas (Poppins 300, 400 y cursiva,
   500, 600, 700) y los que pide el sitio real a Montserrat (400 y
   cursiva, 500, 600, 700; un solo archivo variable por estilo).
   En WordPress: subir la carpeta fuentes/ y copiar este bloque con las
   rutas del servidor. */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/montserrat/montserrat-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/poppins/poppins-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/poppins/poppins-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fuentes/poppins/poppins-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fuentes/poppins/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/poppins/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/poppins/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/poppins/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/poppins/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/poppins/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/poppins/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/poppins/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fuentes/poppins/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 14.40 · Portada: el gato de «Criamos de forma ética» mira el texto (pedido
   de la casa, 21 oct 2026: «la idea es que este gato vea la información sobre
   él»; «tiene que estar más grande y conservar la nitidez máxima»). En
   escritorio ya lo mira: está a la izquierda y alza la vista hacia la derecha.
   Hasta 1024 px va debajo del texto (en el teléfono Elementor lo subía con
   order: -1) y se muestra solo su zona de la foto original de 1708 × 960
   (x 300–1110, y 150–960; el resto es blanco), a todo el ancho y hasta 620 px.
   Arrancaba en y 200 y la nariz, que empieza en y 188, quedaba cortada
   (la casa, 28 oct 2026: «aparece cortada en la nariz del gato»).
   El widget pide siempre el archivo original («sizes» en el HTML).
   La foto corta el cuerpo del gato a la izquierda y abajo: va apoyada en el
   borde izquierdo de la pantalla y en el borde de arriba del pie, para que
   esos cortes caigan en bordes reales y no se vea un recorte flotando en el
   blanco (la casa: «está como elevado; queda cuerpo recortado a la vista»). */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-e2d2b9a .elementor-element-1dc528a0 { order: 2 !important; padding-top: 0 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-3fc47aa { width: 100% !important; max-width: 620px; margin: 0 auto 0 0 !important; align-self: flex-start !important; aspect-ratio: 810 / 810; overflow: hidden; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-3fc47aa img {
    display: block; width: calc(100% * 1708 / 810) !important; max-width: none !important; height: auto !important;
    margin: calc(-100% * 150 / 810) 0 0 calc(-100% * 300 / 810) !important;
  }
}
/* En escritorio, la misma foto es el fondo de la sección (contain): Elementor la
   baja 70 px desde arriba, y entre 1025 y unos 1300 px su borde de abajo, donde
   se corta el cuerpo, quedaba sobre el final de la sección (23 px a 1280, 155 a
   1100). Anclada abajo, ese corte coincide siempre con el borde de la sección. */
@media (min-width: 1025px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-e2d2b9a.e-lazyloaded,
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e) .elementor-102 .elementor-element-e2d2b9a:not(.elementor-motion-effects-element-type-background) { background-position-y: 100% !important; }
}


/* 14.41 · «Próximas entregas» a la manera de la Anatomía (pedido de la casa,
   21 oct 2026: la versión anterior «parece muy de Claude»). La casa mostró la
   introducción de «Anatomía de un siamés» («Del retrato a la convivencia» ·
   «Diez detalles para imaginar la vida juntos») y se toman sus medidas:
   todo centrado, 100 px de aire arriba y abajo y 8 % a los lados (70 px en el
   teléfono); antetítulo en Arial de 10 px, mayúsculas, .15em entre letras;
   título en Palatino recto de 400, 4.4vw hasta 70 px (35 px hasta 760 px y
   como mínimo, para que no encoja al pasar del teléfono a la tableta),
   interlínea 1.1, −.035em, espresso y 25 px debajo; párrafos en la misma
   Palatino, 18/1.6 (17 px en el teléfono), en el marrón suave #6B5B45 de la
   referencia y hasta 640 px. Los mismos textos, solo cambia el orden visual:
   - antetítulo: «Próximas entregas · Estado al 17 de octubre de 2026» (el h2
     y la fecha; en el teléfono, en dos líneas y sin el punto);
   - título: el lapso, en dos líneas («Entre fines de diciembre / y comienzos
     de enero», sin punto final, decisión 47): la referencia las corta con <br>; aquí, sin tocar el texto,
     un ancho de 12em y text-wrap: balance (en inglés, sin ese tope, entre
     768 y 1100 px cabía en una; en el teléfono son tres, como la referencia);
   - los dos párrafos, ya sin la raya entre ellos, con «Ver las camadas»
     subrayado en el color del texto; y el botón traslúcido de 14.36, centrado.
   El antetítulo va en el oro oscuro #6F5828 de los textos chicos del sitio:
   el #866B34 de la referencia queda bajo 4,5:1 sobre el papel. Sin la
   textura de papel de 14.33: la casa la quitó al ver la sección («Quitemos la
   textura», 21 oct 2026), y la textura sigue solo en el menú del teléfono.
   Fondo: Alabastro #F2F0EB, un blanco cálido y neutro, elegido por la casa
   entre cuatro opciones esa noche («Ganó Alabastro»; decisión 48). Antetítulo
   5,9:1 y párrafos 5,8:1 sobre él. Palatino: la página de la Anatomía la toma del
   sistema (Mac, iPhone y, como «Palatino Linotype», Windows; Georgia en
   Android). El proyecto web de Adobe (bbq5ksi) hoy solo trae The Seasons; si
   la casa le suma Palatino Linotype, «palatino-linotype» la toma sin otro
   cambio. Queda sin efecto aquí la cursiva de 14.35 en la fecha. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado {
  --cs-palatino: "palatino-linotype", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  padding: 100px 8% !important; text-align: center !important;
  background: #F2F0EB !important; background-image: none !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__inner { display: block !important; max-width: 900px !important; margin: 0 auto !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__cabeza { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; margin: 0 0 22px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado :is(.cs-estado__titulo, .cs-estado__fecha) {
  margin: 0 !important; font: normal 400 10px/1.5 Arial, Helvetica, sans-serif !important;
  letter-spacing: .15em !important; text-transform: uppercase !important; color: #6F5828 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__fecha::before { content: "·"; content: "·" / ""; margin: 0 .9em 0 .75em; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__cuerpo { max-width: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__lapso {
  max-width: 12em; margin: 0 auto 25px !important; font-family: var(--cs-palatino) !important; font-style: normal !important; font-weight: 400 !important;
  font-size: clamp(35px, 4.4vw, 70px) !important; line-height: 1.1 !important; letter-spacing: -.035em !important; color: #2F1C0E !important; text-wrap: balance;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado :is(.cs-estado__detalle, .cs-estado__nota) {
  max-width: 640px !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important;
  font: 400 18px/1.6 var(--cs-palatino) !important; color: #6B5B45 !important; text-align: center !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__detalle { margin-bottom: 14px !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__enlace,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__enlace:is(:link, :visited) {
  margin-left: 0 !important; font: inherit !important; color: inherit !important; white-space: nowrap;
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__enlace:hover { color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__acciones { justify-content: center !important; align-items: center !important; margin-top: 35px !important; }
@media (max-width: 760px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado { padding: 70px 8% !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado .cs-estado__lapso { font-size: 35px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado :is(.cs-estado__detalle, .cs-estado__nota) { font-size: 17px !important; }
}
@media (max-width: 600px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__fecha { flex-basis: 100%; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-estado__fecha::before { content: none; }
}

/* 14.42 · «En Instagram» de Contacto, con el criterio de la Anatomía (pedido
   de la casa, 21 oct 2026: «Sigue el mismo criterio para diagramar esto […]
   con la salvedad que es una sección con distinta utilidad y con su debido
   concepto en versión escritorio y mobile»). La misma letra y el mismo orden
   de «Próximas entregas» (14.41), sobre el espresso de la sección y con la
   maqueta del teléfono:
   - antetítulo: «En Instagram» (el h2), en Arial de 10 px, mayúsculas, .15em
     entre letras, en el oro sobre oscuro del sitio #C9AE7A (7,6:1; el #866B34
     daría 3,2:1 sobre el espresso);
   - título: la primera frase del texto de la casa, aparte en el HTML
     (.cs-ig-perfil__lema), en Palatino de 400, crema, −.03em, interlínea 1.1;
   - párrafo: el resto del texto, en Palatino 18/1.6 (17 px en el teléfono),
     en el crema al 80 % que usa la Anatomía sobre fondo oscuro;
   - el botón traslúcido de 14.36 y la nota «Perfil de Instagram verificado»,
     en Palatino cursiva de 16 px, en tan #DAC9BA (el acento del Manual sobre
     fondo oscuro).
   Escritorio (desde 1025 px): dos columnas, a la manera del llamado
   intermedio de la Anatomía (.cta-interlude, título clamp(35px, 3.5vw, 55px)):
   el texto a la izquierda, centrado en alto frente al teléfono, con 100 px de
   aire arriba y abajo y 8 % a los lados. Antes las dos columnas empezaban a
   861 px, y hasta 1024 el texto quedaba en 250 a 340 px de ancho.
   Teléfono y tableta (hasta 1024 px): la columna centrada de la introducción
   de la Anatomía y el teléfono debajo. Hasta 760 px, 70 px de aire; el texto
   queda al 8 % del borde y la maqueta conserva sus 16 px. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil {
  --cs-palatino: "palatino-linotype", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  padding: 100px 8% !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil__inner {
  max-width: 1160px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 412px) !important; gap: 56px clamp(64px, 7vw, 120px) !important; align-items: center !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__titulo {
  margin: 0 0 22px !important; font: normal 400 10px/1.5 Arial, Helvetica, sans-serif !important;
  letter-spacing: .15em !important; text-transform: uppercase !important; color: #C9AE7A !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__lema {
  max-width: 13em; margin: 0 0 25px !important; font: normal 400 clamp(35px, 3.5vw, 55px)/1.1 var(--cs-palatino) !important;
  letter-spacing: -.03em !important; color: #F3EEE6 !important; text-wrap: balance;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__bajada {
  max-width: 34em !important; margin: 0 0 35px !important; font: 400 18px/1.6 var(--cs-palatino) !important; color: #F3EEE6CC !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__nota {
  margin: 16px 0 0 !important; font: italic 400 16px/1.4 var(--cs-palatino) !important; color: #DAC9BA !important;
}
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil__inner { grid-template-columns: minmax(0, 1fr) !important; max-width: 640px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil__texto { text-align: center; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil :is(.cs-ig-perfil__lema, .cs-ig-perfil__bajada) { margin-left: auto !important; margin-right: auto !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil__telefono { margin: 0 auto !important; }
}
@media (max-width: 760px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil { padding: 70px 16px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil__texto { padding: 0 calc(8vw - 16px); }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__lema { font-size: 35px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f) .cs-ig-perfil .cs-ig-perfil__bajada { font-size: 17px !important; }
}

/* 14.43 · Héroes con imagen de respaldo y fundido entre páginas (pedido de la
   casa, 28 oct 2026: los videos y el paso de una página a otra demoraban).
   - Imagen de respaldo: el primer cuadro de cada video, en WebP, de fondo en
     los héroes de escritorio que no tenían imagen (Portada, Camadas y
     Familias). Se ve al instante y el video entra encima cuando está listo,
     desde el mismo cuadro. Reemplaza el «none» de (19) en la Portada. Historia
     ya traía su imagen; los héroes del teléfono conservan sus fotos.
     Los cuatro videos pasaron a 720 px de alto, sin audio y con el índice al
     principio: de 13,3 a 4,7 MB en total.
   - Fundido: el navegador cruza la página que sale con la que entra en
     200 ms. Lo que es igual en las dos, como la cabecera, se mantiene firme
     durante el cruce. Chrome, Edge y Safari 18.2 o posterior; Firefox navega
     como siempre. Sin animación para quien pide reducir el movimiento.
     La cabecera no lleva nombre de transición propio: ese nombre la vuelve
     una capa aparte, y la prioridad de su contenedor (z-index 3) deja de
     valer frente al héroe, que la tapa (probado el 28 oct).
   En Elementor: en cada contenedor, Fondo → Video → «Background Fallback» con
   su imagen; el fundido va tal cual al CSS del sitio. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-4c679ea:not(.elementor-motion-effects-element-type-background) {
  background: #0C0800 url("wp-content/uploads/2025/11/Thai-Cat-Siamese-Kittens-Sleep-Little-Kittens-In-A-2023-11-27-05-15-53-Utc-3-1-poster.webp") 50% 50% / cover no-repeat !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-a62573c:not(.elementor-motion-effects-element-type-background) {
  background: #0C0800 url("wp-content/uploads/2025/11/Thai-Cat-Siamese-Mom-Lies-With-Her-Kittens-In-The-2025-09-02-06-17-51-Utc-1-poster.webp") 50% 50% / cover no-repeat !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c) .elementor-element-585ce42:not(.elementor-motion-effects-element-type-background) {
  background: #0C0800 url("wp-content/uploads/2025/11/Screenrecording-05-13-2025-10-34-50-1-poster.webp") 50% 50% / cover no-repeat !important;
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }
}

/* Decisiones B y D de la revisión (28 oct 2026).
   B · Tarjetas de la portada (Camadas, Galería, Cómo reservar): el texto en
   #AA9869 daba 2,8:1 y el botón en #927D43, 4,0:1. Pasan al oro oscuro que el
   sitio ya usa en el foco y los enlaces (#6F5828, 6,8:1 sobre blanco), con el
   mismo dibujo. El relleno al pasar el mouse también: blanco sobre #9B8748
   daba 3,5:1. Los títulos (#866B34 a 24 y 28 px, texto grande) no cambian. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__texto, .cs-galeria__texto, .cs-reserva__texto),
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__texto, .cs-galeria__texto, .cs-reserva__texto) strong { color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton):is(*, :link, :visited) { color: #6F5828 !important; border-color: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton)::before { background: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton):is(:hover, :focus-visible) { color: #FFFFFF !important; border-color: #6F5828 !important; }

/* D · «EN» sobre la foto del héroe, en teléfono y tableta: blanco sobre los
   claros de la foto daba 3,0 a 3,1:1. La decisión 44 fija el formato (texto,
   como el ES | EN original), no el color. Primero llevó detrás un velo
   radial; la casa lo vio como una mancha oscura que arruinaba la foto
   (28 oct 2026) y quedó solo una sombra ceñida a las letras; como aún se veía
   un halo en el teléfono, quedó en un contorno de 2 px. Se va al desplazar,
   cuando la cápsula espresso ya da el fondo. */
@media (max-width: 1024px) {
  html:not(.cs-desplazado):not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) a.cs-idioma-barra {
    text-shadow: 0 1px 2px rgba(30, 18, 8, .4) !important;
  }
}

/* Tarjetas de la portada en fila (desde 841 px), 28 oct 2026. Cada marco
   (640cbbc9, 10c7a54c, 400c46ad) medía 450 px o lo que pidiera su texto, y
   su columna de 690 px lo centraba: entre 841 y unos 1200 px quedaban de
   alturas distintas y escalonadas (la casa: «se deforma mal, dependiendo de
   cómo se estrecha o amplía la ventana»). Ahora la columna deja 120 px arriba
   y abajo, como antes en escritorio, y el marco ocupa el resto: los tres
   miden lo mismo y, si un texto pide más, crecen juntos. Dentro, el ícono y
   el título parten arriba y el botón se apoya abajo, a la misma altura. */
@media (min-width: 841px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.elementor-element-76a72103, .elementor-element-63fcd580, .elementor-element-6b47c922) {
    justify-content: flex-start !important; padding-top: 120px !important; padding-bottom: 120px !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.elementor-element-640cbbc9, .elementor-element-10c7a54c, .elementor-element-400c46ad) {
    flex: 1 1 auto !important; height: auto !important; justify-content: flex-start !important; padding-top: 22px !important; padding-bottom: 34px !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.elementor-element-640cbbc9, .elementor-element-10c7a54c, .elementor-element-400c46ad) > .elementor-widget-text-editor {
    flex: 1 1 auto !important; display: flex !important; flex-direction: column; padding-top: 0 !important; padding-bottom: 0 !important; /* el de Galería traía 20 px arriba y abajo */
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas, .cs-galeria, .cs-reserva, .cs-galeria__contenido, .cs-reserva__contenido) { flex: 1 1 auto; display: flex !important; flex-direction: column; align-items: center; width: 100%; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__texto, .cs-galeria__texto, .cs-reserva__texto) { margin-bottom: 28px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton):is(*, :link, :visited) { margin-top: auto !important; }
}

/* Cabeceras de Contacto y de Preguntas frecuentes con fotos propias del
   Manual de marca (28 oct 2026; la casa: la de Contacto «no se logra
   distinguir apropiadamente» y Preguntas «necesita una imagen»). Regla de la
   casa: el texto se lee sobre espacio vacío, nunca sobre el gato; los
   encuadres se calculan desde la posición del título, no por captura.

   Contacto · Tita, primer plano sobre gris oscuro (1800 × 1200). En pantallas
   de 768 px o más, Tita mira el título desde la derecha. El título, centrado,
   mide unos 370 px. La foto se apoya abajo; su alto es el de la banda, salvo
   que no quepa entre el título y el borde derecho, y entonces se achica
   (a 768 px, 250 de alto). Con ese alto «h», los bigotes empiezan a 0,32 h
   del borde de la foto, quedan a 200 px del centro, y entre la oreja y el
   borde derecho quedan al menos 0,2 h (la oreja termina a 0,9 h). A la izquierda, arriba y, en pantallas anchas, a la derecha, un
   gris del mismo tono funde los bordes de la foto. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-escribenos {
  --cs-tita-alto-px: min(clamp(520px, 62vh, 700px), (50vw - 210px) / .7); /* el alto de la banda, arriba */
  --cs-tita-x: calc(50vw + 200px - var(--cs-tita-alto-px) * .32);
  background-color: #262827 !important;
  background-image:
    linear-gradient(to top, rgba(39, 41, 40, 0) calc(var(--cs-tita-alto-px) - 60px), #282a29 var(--cs-tita-alto-px)),
    linear-gradient(90deg, #232524 calc(var(--cs-tita-x) + 10px), rgba(35, 37, 36, 0) calc(var(--cs-tita-x) + 140px), rgba(54, 55, 55, 0) calc(var(--cs-tita-x) + var(--cs-tita-alto-px) * 1.5 - 140px), #353636 calc(var(--cs-tita-x) + var(--cs-tita-alto-px) * 1.5 - 4px)),
    linear-gradient(rgba(30, 18, 8, .15), rgba(30, 18, 8, .15)),
    url("../assets/wp-content/uploads/2026/10/contacto-casa-siam-tita-siamesa-seal-point-primer-plano-fondo-gris-cs1800.webp") !important;
  background-repeat: no-repeat !important;
  background-size: auto, auto, auto, auto var(--cs-tita-alto-px) !important;
  background-position: 0 0, 0 0, 0 0, left var(--cs-tita-x) bottom 0 !important;
}
/* Teléfono: Tita va abajo, bajo el título, con la cara al centro; arriba, un
   gris parejo para el título y el subtítulo. Ancho de la foto: 124 % de la
   pantalla, hasta 520 px; asoma 34 px bajo el borde, para que las orejas no
   lleguen al título. Si la foto es más angosta que la pantalla, sus bordes se
   funden con el gris de cada lado. */
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-escribenos {
    --cs-tita-ancho: min(124vw, 520px);
    --cs-tita-x: calc(50vw - var(--cs-tita-ancho) * .42);
    background-color: #2a2c2b !important;
    background-image:
      linear-gradient(to top, rgba(39, 41, 40, 0) calc(var(--cs-tita-ancho) / 1.5 - 80px), #272928 calc(var(--cs-tita-ancho) / 1.5 - 30px)),
      linear-gradient(90deg, #232524 calc(var(--cs-tita-x) + 10px), rgba(35, 37, 36, 0) calc(var(--cs-tita-x) + 80px), rgba(54, 55, 55, 0) calc(var(--cs-tita-x) + var(--cs-tita-ancho) - 80px), #353636 calc(var(--cs-tita-x) + var(--cs-tita-ancho) - 10px)),
      linear-gradient(rgba(30, 18, 8, .15), rgba(30, 18, 8, .15)),
      url("../assets/wp-content/uploads/2026/10/contacto-casa-siam-tita-siamesa-seal-point-primer-plano-fondo-gris-cs1800.webp") !important;
    background-size: auto, auto, auto, var(--cs-tita-ancho) auto !important;
    background-position: 0 0, 0 0, 0 0, left var(--cs-tita-x) bottom -34px !important;
  }
}

/* Preguntas frecuentes (página 1177; la misma banda de Términos y Privacidad
   no cambia) · Arya, retrato sobre gris (1800 × 1200). En escritorio, desde
   1025 px: la foto va a la izquierda, con la cara entera entre 10 px del borde
   y 40 px antes del título, que mide unos 620 px. Su ancho se calcula con el
   espacio que queda (entre 400 y 860 px); el resto de la banda es un gris del
   tono del fondo de la foto, y un velo café sostiene el título. La banda
   tiene el alto de las demás cabeceras (entre 520 y 700 px, como Contacto);
   antes medía 372 y se veía estrecha (la casa, 28 oct 2026). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .page-id-1177 .cs-banda {
  --cs-arya-ancho: min(860px, (50vw - 360px) / .46);
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(520px, 62vh, 700px); padding-top: 150px !important; padding-bottom: 70px !important; box-sizing: border-box;
  --cs-arya-x: calc(10px - var(--cs-arya-ancho) * .21);
  background-color: #7f7569 !important;
  background-image:
    linear-gradient(90deg, rgba(46, 36, 26, .3) 0, rgba(46, 36, 26, .62) 27%, rgba(46, 36, 26, .62) 75%, rgba(46, 36, 26, .5)),
    linear-gradient(to top, rgba(133, 123, 108, 0) calc(var(--cs-arya-ancho) / 1.5 - var(--cs-arya-ancho) / 12 - 90px), #857b6c calc(var(--cs-arya-ancho) / 1.5 - var(--cs-arya-ancho) / 12 - 4px)),
    linear-gradient(90deg, rgba(119, 109, 99, 0) calc(var(--cs-arya-x) + var(--cs-arya-ancho) * .72), #776d63 calc(var(--cs-arya-x) + var(--cs-arya-ancho) - 4px)),
    url("../assets/wp-content/uploads/2026/10/preguntas-casa-siam-arya-balinesa-seal-point-retrato-cs1800.webp") !important;
  background-repeat: no-repeat !important;
  background-size: auto, auto, auto, var(--cs-arya-ancho) auto !important;
  background-position: 0 0, 0 0, 0 0, left var(--cs-arya-x) bottom calc(var(--cs-arya-ancho) / -12) !important;
}
/* Hasta 1279 px no cabe entera al lado del título: la banda crece 300 px
   por debajo del texto y Arya ocupa ese espacio, centrada; el título y el
   subtítulo quedan arriba, sobre gris con velo. */
@media (max-width: 1279px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .page-id-1177 .cs-banda {
    --cs-arya-ancho: 450px;
    --cs-arya-x: calc(50vw - var(--cs-arya-ancho) * .44);
    min-height: 0;
    padding-bottom: 300px !important;
    background-image:
      linear-gradient(rgba(46, 36, 26, .62) 0, rgba(46, 36, 26, .6) calc(100% - 300px), rgba(46, 36, 26, .22) 100%),
      linear-gradient(to top, rgba(133, 123, 108, 0) 220px, #857b6c 296px),
      linear-gradient(90deg, #8f8578 calc(var(--cs-arya-x) + 4px), rgba(143, 133, 120, 0) calc(var(--cs-arya-x) + 130px), rgba(119, 109, 99, 0) calc(var(--cs-arya-x) + var(--cs-arya-ancho) - 130px), #776d63 calc(var(--cs-arya-x) + var(--cs-arya-ancho) - 4px)),
      url("../assets/wp-content/uploads/2026/10/preguntas-casa-siam-arya-balinesa-seal-point-retrato-cs1800.webp") !important;
    background-size: auto, auto, auto, var(--cs-arya-ancho) auto !important;
    background-position: 0 0, 0 0, 0 0, left var(--cs-arya-x) bottom -10px !important;
  }
}

/* Sello «4,8 en Google» de la portada: el fondo café al 42 % se leía como una
   sombra oscura sobre la foto (la casa, 28 oct 2026). Pasa a un vidrio más
   claro, con un filete blanco tenue, y el texto conserva una sombra fina. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-sello.cs-sello--oscuro {
  background: rgba(47, 28, 14, .24) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-sello.cs-sello--oscuro :is(.cs-sello__grupo, .cs-sello__nota) { text-shadow: 0 1px 2px rgba(30, 18, 8, .45); }

/* Menú del teléfono propio (28 oct 2026): estos son los estilos de base que
   ponía Elementor Pro al armar el panel (medidos con el panel abierto antes
   del cambio). El aspecto lo siguen dando las reglas de arriba, que usan el
   mismo id y las mismas clases. Cerrado lleva el atributo «hidden». */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 {
  position: fixed; inset: 0; display: flex; align-items: stretch; justify-content: flex-start;
  width: 100%; height: 100%; box-sizing: border-box; pointer-events: all; z-index: 100000 !important;
  background-color: #F3EEE6;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45[hidden] { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .dialog-widget-content {
  position: relative; display: block; width: 100%; height: 100%; max-height: 100%; box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain; background-color: #F3EEE6;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .dialog-message { display: flex; align-items: flex-start; width: 100%; min-height: 100%; box-sizing: border-box; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .elementor-45 { display: block; width: 100%; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .dialog-close-button {
  position: absolute; top: 20px; right: 20px; z-index: 9999; border-radius: 50%; cursor: pointer;
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; font-size: 20px; line-height: 1;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .dialog-close-button svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* Cabecera del teléfono sobre la foto (28 oct 2026): el botón del menú llevaba
   una aureola (drop-shadow de 6 px) y la casa la vio como una sombra oscura.
   Queda un contorno de 2 px, como el de «EN». */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .elementor-element-78628391 .elementor-icon { filter: drop-shadow(0 1px 1.5px rgba(30, 18, 8, .35)) !important; }
html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .elementor-element-78628391 .elementor-icon { filter: none !important; }
/* La X del menú propio recibe el foco al abrir: el aro solo se ve si se llegó
   con el teclado; una regla :focus ajena le ponía sombra y fondo al tocarla. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #elementor-popup-modal-45 .dialog-close-button:focus:not(:focus-visible) { box-shadow: none !important; background: transparent !important; outline: none !important; }

/* Barra de progreso de lectura (28 oct 2026): la crea casasiam-prototipo.js
   en Preguntas frecuentes, Términos, Privacidad y Galería. 2 px en el oro de
   marca (#866B34), sin carril, sobre la cabecera y bajo el menú del teléfono. */
.cs-progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 99995;
  background: #866B34; transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none; will-change: transform;
}
@media print { .cs-progreso { display: none; } }

/* Cápsula espresso del teléfono al desplazar («EN» y el menú): su sombra de
   36 px hacia abajo se leía como una mancha oscura sobre el texto (la casa,
   28 oct 2026: «la sombra sigue viéndose en la versión mobile»). Queda el
   filete claro y una sombra corta y tenue. */
@media (max-width: 1024px) {
  html.cs-desplazado:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .elementor-element-78628391 .elementor-icon-wrapper {
    box-shadow: inset 0 1px 0 rgba(243, 238, 230, .10), 0 0 0 1px rgba(243, 238, 230, .08), 0 4px 10px -6px rgba(20, 12, 6, .3) !important;
  }
}

/* Sombra de los títulos de los héroes (28 oct 2026; la casa: «La sombra que
   veo es en el título»). En el teléfono, el lema y el descriptor de la
   portada llevaban un halo doble (70 % y 60 %, 14 px) puesto el 16 de octubre
   por contraste; con el velo actual del héroe ya no hace falta: sin ninguna
   sombra miden de 6,3 a 7,1:1 sobre el fondo promedio en el peor cuadro. El
   título y los rótulos de las demás cabeceras traían un halo de 14 a 18 px.
   Todos quedan con un contorno de 1 px que solo afirma la letra. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-portada-titulo, .cs-portada-lema, .cs-portada-descriptor, .cs-portada-nota, .cs-seccion-marca, .cs-seccion-titulo) {
  text-shadow: 0 1px 2px rgba(20, 12, 6, .28) !important;
}
/* 31 oct 2026: en el teléfono y la tableta, sin ninguna sombra en los textos de los héroes. */
@media (max-width: 1024px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) :is(.cs-portada-titulo, .cs-portada-lema, .cs-portada-descriptor, .cs-portada-nota, .cs-seccion-marca, .cs-seccion-titulo) {
    text-shadow: none !important;
  }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-portada-logo { filter: none !important; }
}

/* Videos de fondo propios (28 oct 2026): sin el script de Elementor, que les
   daba un tamaño en línea para cubrir el héroe, el video llena su contenedor
   y se recorta al centro, como antes. Su póster es el primer cuadro. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .elementor-background-video-container > video[data-cs-video] {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-width: none; transform: none;
  object-fit: cover; object-position: 50% 50%;
}

/* Galería propia (28 oct 2026): mosaico y visor, sin Elementor Pro.
   Mosaico: cada foto va a la columna más baja, como el «masonry» de Elementor
   (mismas posiciones medidas a 1440, 768 y 390 px). Tres columnas desde 841
   px, dos entre 413 y 840 y una hasta 412 (los cortes del sitio), con 10 px
   de separación. Las posiciones las calcula casasiam-prototipo.js; sin script,
   el mosaico se arma con columnas de CSS. El contenedor mide el alto real de
   las fotos (el de Elementor quedaba de 50 a 150 px corto). */
.cs-mosaico { position: relative; column-count: 3; column-gap: 10px; }
@media (max-width: 840px) { .cs-mosaico { column-count: 2; } }
@media (max-width: 412px) { .cs-mosaico { column-count: 1; } }
.cs-mosaico > .cs-mosaico__foto { position: relative; display: block; overflow: hidden; margin: 0 0 10px; break-inside: avoid; }
.cs-mosaico.cs-mosaico--listo { column-count: auto; }
.cs-mosaico.cs-mosaico--listo > .cs-mosaico__foto { position: absolute; margin: 0; }
.cs-mosaico > .cs-mosaico__foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-mosaico > .cs-mosaico__foto:focus-visible { outline: 2px solid #6F5828; outline-offset: 3px; }

/* Visor de fotos propio: el mismo dibujo del de Elementor (fondo espresso,
   contador arriba a la izquierda, botones arriba a la derecha, flechas a los
   lados y título debajo, en Poppins), sin sus librerías de casasiam.cl. */
.cs-visor { position: fixed; inset: 0; z-index: 100002; background: #120B06; color: rgba(237, 237, 237, .9); font-family: "Poppins", Arial, sans-serif; display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; }
.cs-visor[hidden] { display: none !important; }
.cs-visor__cabeza { flex: none; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 12px 0 20px; box-sizing: border-box; position: relative; z-index: 2; }
.cs-visor__contador { font-size: 15px; line-height: 1.5; }
.cs-visor__acciones { display: flex; align-items: center; gap: 4px; }
.cs-visor button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.cs-visor__boton { width: 44px; height: 44px; border-radius: 50%; transition: background-color .25s ease; }
.cs-visor__boton svg { width: 22px; height: 22px; }
.cs-visor__boton--cerrar svg { width: 24px; height: 24px; }
.cs-visor button:focus-visible { outline: 2px solid #F3EEE6; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cs-visor__boton:hover { background: rgba(243, 238, 230, .1); } }
.cs-visor__escena { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 70px; touch-action: pan-y pinch-zoom; }
.cs-visor__imagen { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3); transition: opacity .2s ease; }
.cs-visor__imagen.cs-cargando { opacity: 0; }
.cs-visor__flecha { position: absolute; top: 60px; bottom: 0; width: min(214px, 15vw); z-index: 1; font-size: 25px; }
.cs-visor__flecha svg { width: 28px; height: 28px; transition: transform .25s ease; }
.cs-visor__flecha--ant { left: 0; } .cs-visor__flecha--sig { right: 0; }
@media (hover: hover) and (pointer: fine) { .cs-visor__flecha--ant:hover svg { transform: translateX(-3px); } .cs-visor__flecha--sig:hover svg { transform: translateX(3px); } }
/* El pie con la descripción de la foto no se ve (4 nov 2026): queda en el visor, fuera de la vista, y la misma descripción sigue como alt de cada foto de la página. */
.cs-visor__pie { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-visor__aviso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
  .cs-visor__escena { padding: 0; }
  .cs-visor__imagen { border-radius: 0; }
  .cs-visor__flecha { top: 50%; bottom: auto; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(18, 11, 6, .55); }
  .cs-visor__flecha--ant { left: 4px; } .cs-visor__flecha--sig { right: 4px; }
  .cs-visor__flecha svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cs-visor__imagen, .cs-visor__flecha svg, .cs-visor__boton { transition: none; } }
/* Con el visor abierto, la barra de progreso no se dibuja encima. */
html.cs-visor-abierto .cs-progreso { display: none; }
/* El tema Hello pinta los botones con foco o al pasar el mouse en #c36 y les
   pone borde: dentro del visor no corre. */
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-visor button,
html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-visor button:is(:hover, :focus, :active) {
  border: 0 !important; background-color: transparent !important; color: rgba(237, 237, 237, .9) !important; box-shadow: none !important; text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-visor .cs-visor__boton:hover { background-color: rgba(243, 238, 230, .1) !important; }
}
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-visor .cs-visor__flecha,
  html:not(#cs-a):not(#cs-b):not(#cs-c) .cs-visor .cs-visor__flecha:is(:hover, :focus, :active) { background-color: rgba(18, 11, 6, .72) !important; color: #F3EEE6 !important; }
}
@media (min-width: 768px) { .cs-visor .cs-visor__flecha svg { width: 32px; height: 32px; stroke-width: 2.2; } }

/* 31 oct 2026 · Sin rótulos ni rayitas en todo el sitio, a pedido de la casa.
   «Próximas entregas» de la portada pasa a ser una carta de la casa, en papel
   y cerrada con el sello de lacre; su título queda solo para lectores de
   pantalla. Los títulos que siguen se escriben en minúscula, sin espaciado. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta { background: #F2F0EB !important; background-image: none !important; padding: 128px 24px 112px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__hoja {
  position: relative; max-width: 640px; margin: 0 auto; padding: 80px 68px 52px;
  background: #FBF8F3 url("papel/papel-casa-siam.webp") center / 640px auto;
  box-shadow: 0 1px 2px rgba(47, 28, 14, .08), 0 24px 48px -30px rgba(47, 28, 14, .5);
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__sello {
  position: absolute; top: -46px; left: 50%; width: 96px; height: 96px; margin-left: -48px;
  background: url("casasiam-sello-lacre.png") center / contain no-repeat;
  transform: rotate(-8deg); filter: drop-shadow(0 6px 8px rgba(47, 28, 14, .28));
}
/* La carta se compone como una carta: un solo cuerpo y un solo color de tinta
   para fecha, saludo y párrafos; una línea en blanco entre bloques; todo a la
   izquierda; sin espaciado entre letras. Solo la firma va en The Seasons. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-carta__lugar, .cs-carta__saludo, .cs-carta__texto, .cs-carta__despedida) {
  margin: 0 0 1.7em !important; font: 400 17px/1.75 var(--cs-fuente-texto) !important;
  letter-spacing: 0 !important; color: #2B2B2B !important; text-align: left !important; max-width: 34em;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__lugar { margin-bottom: 2.4em !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__saludo { margin-bottom: 1em !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__texto { margin-bottom: 1em !important; text-wrap: pretty; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__despedida { margin: 1.6em 0 .2em !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__firma { margin: .2em 0 0 !important; font: 400 34px/1 var(--cs-fuente-titulos) !important; letter-spacing: 0 !important; color: #2F1C0E !important; text-align: left !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__acciones { max-width: 640px; margin: 44px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__boton,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__boton:is(:link, :visited) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px;
  background: #2F1C0E !important; color: #F3EEE6 !important; border: 0 !important; border-radius: 2px !important;
  font: 500 15px/1 var(--cs-fuente-texto) !important; letter-spacing: 0 !important; text-decoration: none !important;
  transition: background-color .2s ease;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__boton:is(:hover, :focus-visible) { background: #6F5828 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__enlace,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__enlace:is(:link, :visited) {
  display: inline-flex; align-items: center; min-height: 44px; font: 400 15px/1 var(--cs-fuente-texto) !important; letter-spacing: 0 !important;
  color: #2F1C0E !important; text-decoration: underline !important; text-decoration-color: rgba(47, 28, 14, .35) !important; text-underline-offset: 6px;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__enlace:hover { text-decoration-color: currentColor !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta { padding: 88px 16px 64px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__hoja { padding: 64px 24px 34px; background-size: 520px auto; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__sello { top: -40px; width: 84px; height: 84px; margin-left: -42px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-carta__lugar, .cs-carta__saludo, .cs-carta__texto, .cs-carta__despedida) { font-size: 16px !important; line-height: 1.7 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__firma { font-size: 30px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__acciones { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 8px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__boton { width: 100%; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-carta__enlace { align-self: flex-start; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) :is(.cs-historia-titulo, .cs-filosofia__title)::after { content: none !important; display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-section-title,
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) #cs-contacto-final .cs-ficha .cs-section-title {
  font: 400 22px/1.2 var(--cs-fuente-titulos) !important; letter-spacing: 0 !important; text-transform: none !important; color: #2F1C0E !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-ig-perfil .cs-ig-perfil__titulo {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-faq-indice__titulo { font: 400 22px/1.2 var(--cs-fuente-titulos) !important; letter-spacing: 0 !important; text-transform: none !important; color: #2F1C0E !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g) .cs-tabla td[data-rotulo]::before { font: 600 13px/1.4 var(--cs-fuente-texto) !important; letter-spacing: 0 !important; text-transform: none !important; color: #2F1C0E !important; }

/* 31 oct 2026 · Composición de la portada. Una sola escala: texto corrido a
   17 px en el computador y 16 en el teléfono, con interlineado de 1,7; notas a
   15; títulos de tarjeta y de sección en dos tamaños fijos; ningún espaciado
   negativo, y en las mayúsculas del nombre, uno leve y positivo. El lema y el
   descriptor dejan de ser dos bajadas casi iguales: el lema en The Seasons, el
   descriptor (h1) en Poppins recta, sin cursiva. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-titulo { letter-spacing: .025em !important; word-spacing: .06em; line-height: 1 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-lema { font: 400 23px/1.3 var(--cs-fuente-titulos) !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-descriptor { margin-top: 14px !important; font: 400 16px/1.5 var(--cs-fuente-texto) !important; font-style: normal !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home :is(.elementor-element-dc79b60, .elementor-element-1f056623, .elementor-element-2a8cb17f) .elementor-heading-title { font-size: 36px !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home :is(.cs-camadas__texto, .cs-galeria__texto, .cs-reserva__texto) { font-size: 17px !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-mas p { font-size: 17px !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-bienvenida__titulo { letter-spacing: 0 !important; line-height: 1.05 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-bienvenida__texto p { font-size: 17px !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-bienvenida__nota { font-size: 15px !important; line-height: 1.6 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-etica__texto p { font-size: 17px !important; line-height: 1.7 !important; letter-spacing: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home :is(.cs-portada-boton, .cs-camadas__boton, .cs-galeria__boton, .cs-reserva__boton, .cs-bienvenida__boton, .cs-etica__boton, .cs-etica__boton-texto, .cs-carta__boton, .cs-carta__enlace) { font-size: 15px !important; letter-spacing: 0 !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-lema { font-size: 19px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-portada-descriptor { margin-top: 10px !important; font-size: 15px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home :is(.elementor-element-dc79b60, .elementor-element-1f056623, .elementor-element-2a8cb17f) .elementor-heading-title { font-size: 30px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home :is(.cs-camadas__texto, .cs-galeria__texto, .cs-reserva__texto, .cs-portada-mas p, .cs-bienvenida__texto p, .cs-etica__texto p) { font-size: 16px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) body.home .cs-bienvenida__titulo { font-size: 40px !important; }
}

/* 31 oct 2026 · Composición del pie, en las 18 páginas. Mismo contenido, colores
   y letras; el armado del pie va en cuatro columnas (marca, páginas, contacto y
   consulta) con las clases cs-pc. Respaldo: _respaldo antes de la composición del pie (31 oct)/. */
  /* Reglas: dos tamaños (15 px para lo que se usa, 13 px para lo que informa), dos interlineados (24 y 20 px),
     un solo peso, sin espaciado entre letras, espacios en múltiplos de 8 y todo alineado a la izquierda. */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc { padding: 64px 40px 32px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc :is(p, ul, li) { margin: 0 !important; padding: 0 !important; list-style: none; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc :is(p, li, a, span) { letter-spacing: 0 !important; font-weight: 400 !important; }

  /* Grilla: páginas y contacto miden lo que su texto, en una línea; marca y consulta se reparten el resto por igual.
     Espacios iguales entre columnas (64 px; 40 bajo 1280). Todas las columnas empiezan a la misma altura. */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content max-content minmax(0, 1fr); column-gap: 64px; row-gap: 40px; align-items: start; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc :is(.cs-pc__paginas a, .cs-pc__contacto li) { white-space: nowrap; }
  @media (max-width: 1279px) { html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__grid { column-gap: 40px; } }

  /* Nivel 1 · 15/24 */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc :is(.cs-pc__paginas a, .cs-pc__contacto li, .cs-pc__texto) { font: 400 15px/24px var(--cs-fuente-texto) !important; color: #F3EEE6 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas li + li, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__contacto li + li { margin-top: 8px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas a { display: inline-block !important; padding: 0 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__contacto a { white-space: nowrap; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__texto { max-width: 30ch; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__consulta .cs-footer__button { margin-top: 16px !important; min-width: 0 !important; justify-content: flex-start !important; min-height: 24px !important; font: 400 15px/24px var(--cs-fuente-texto) !important; letter-spacing: 0 !important; }

  /* Nivel 2 · 13/20 */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc :is(.cs-pc__lema, .cs-pc__verificado, .cs-pc__sello, .cs-pc__sello *, .cs-footer__aviso, .cs-pc__base, .cs-pc__base a, .cs-pc__base .cs-idioma, .cs-pc__base .cs-idioma *) { font-size: 13px !important; line-height: 20px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__logo { display: block; width: 184px; height: auto; margin: 0 0 24px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__lema { color: #F3EEE6 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__verificado { display: inline-flex !important; margin: 16px 0 0 !important; padding: 4px 12px 4px 8px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__sello { margin-top: 16px !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__sello .cs-sello { min-height: 0 !important; padding: 0 !important; row-gap: 0 !important; }

  /* Cierre: aviso, filete y una sola línea de base */
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-footer__aviso { margin: 64px 0 0 !important; max-width: 72ch; color: #BFB3A3 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgb(243 238 230 / .22); color: #D9CFC2; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base a { color: #D9CFC2 !important; padding: 0 !important; display: inline !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__legal { display: inline-flex; gap: 24px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-tm { position: relative; top: -.45em; font-size: .72em !important; line-height: 0 !important; margin-left: .05em; vertical-align: baseline; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-idioma-pie { margin-left: auto; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-idioma__op { font-weight: 400 !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-idioma { display: inline-flex !important; align-items: baseline !important; gap: 8px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base :is(.cs-idioma__op, .cs-idioma__sep) { display: inline !important; padding: 0 !important; margin: 0 !important; vertical-align: baseline !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-idioma__op [aria-hidden] { display: inline !important; }

  @media (max-width: 1023px) {
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__grid { grid-template-columns: max-content max-content 1fr; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__marca { grid-column: 1 / -1; }
  }
  @media (max-width: 767px) {
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc { padding: 48px 24px 32px !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__grid { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 40px; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__logo { width: 152px; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__sello .cs-sello { min-height: 44px !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__contacto, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__consulta { grid-column: 1 / -1; }
    /* En el teléfono, las páginas en dos columnas de tres que se leen hacia abajo; cada enlace y cada línea de contacto mide 44 px de alto para el dedo. */
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas { grid-column: 1 / -1; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas ul { display: grid !important; grid-template-columns: max-content max-content; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 40px; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas li + li { margin-top: 0 !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__contacto li { display: flex; align-items: center; gap: 4px; min-height: 44px; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__paginas a, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__consulta .cs-footer__button { display: inline-flex !important; align-items: center; min-height: 44px !important; padding: 0 !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__contacto li + li { margin-top: 0 !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__consulta .cs-footer__button { margin-top: 8px !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-footer__aviso { margin-top: 48px !important; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base { flex-direction: column; align-items: flex-start; gap: 8px; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base .cs-idioma-pie { margin-left: 0; }
    html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h) .cs-footer.cs-pc .cs-pc__base a { display: inline-flex !important; align-items: center; min-height: 44px; }
  }

/* Portada reducida (31 oct 2026; aprobada por la casa desde su copia de comparación).
   Sin botones en el héroe ni botón flotante de WhatsApp; las estrellas de Google
   sin cápsula (la cápsula volvió el 2 de noviembre); la bienvenida lleva un solo enlace de texto, «Agendar una visita».
   «Criamos de forma ética» se ocultó primero y volvió el mismo día, sin sus botones,
   porque con ella se había ido el gato que mira el texto. Rige en español y en inglés. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-wa-flotante { display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello { margin-top: 18px !important; }
/* La cápsula de las estrellas vuelve (2 nov 2026; Oriana la quiso de regreso): rige otra vez
   el vidrio café al 24 % con filete blanco del 28 de octubre, más arriba en esta hoja. */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello .cs-sello { min-height: 44px; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton:is(:link, :visited) {
  display: inline-flex !important; width: auto !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important;
  justify-content: flex-start !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 400 17px/1 "Poppins", "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 0 !important; color: #F3EEE6 !important;
  text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: rgba(243, 238, 230, .45) !important; text-underline-offset: 6px;
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton::before, html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton::after { content: none !important; display: none !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton:hover { text-decoration-color: currentColor !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-bienvenida__acciones { justify-content: flex-start !important; align-items: flex-start !important; }
@media (max-width: 767px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home a.cs-bienvenida__boton { font-size: 16px !important; }
}

/* Portada (2 nov 2026): sin «Criadero de gatos siameses modernos en Santiago» a la vista (sigue como h1 para Google y lectores
   de pantalla) y el lema ordenado en dos líneas: «Nacidos de la herencia, / criados para el tiempo» */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home h1.cs-portada-descriptor { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-lema .cs-portada-lema__linea { display: inline; }

/* Portada, lema corrido (2 nov 2026, la casa: «El subtítulo, déjalo corrido. Revisa la proporción
   y las medidas»). El lema deja las dos líneas fijas y corre en una sola mientras quepa bajo
   «CASA SIAM»: su ancho nunca pasa el del título (5,3 veces el tamaño de la marca); si no cabe,
   se parte en dos líneas parejas. Así se mantiene la pirámide título › lema › sello en todo ancho.
   - Antes, entre 390 y 440 px el lema en una línea se salía de la pantalla (white-space: nowrap
     heredado de WordPress); ahora se parte.
   - Entre 768 y 1279 px el título arrastraba 33 px de margen inferior de Elementor
     (.elementor-kit-37 p): del título al lema había 57 px en tableta y 28 en computador.
     Queda en 0 y la distancia es la del lema en todos los anchos (23 a 27 px).
   - Bajo 1200 px el sello en una línea (496 px) era más ancho que el título; pasa a dos
     líneas centradas, como en el teléfono (bajo 640 px rige la regla del teléfono, 250 px). */
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-titulo { margin-bottom: 0 !important; margin-block-end: 0 !important; }
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-lema { white-space: normal !important; text-wrap: balance; max-width: calc(var(--c-marca) * 5.3) !important; margin-left: auto !important; margin-right: auto !important; }
@media (min-width: 640px) and (max-width: 1199px) {
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello .cs-sello { max-width: 270px; row-gap: 4px; padding: 10px 20px; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello .cs-sello__sep { display: none !important; }
  html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello .cs-sello__dir { flex-basis: 100%; text-align: center !important; }
}
html:not(#cs-a):not(#cs-b):not(#cs-c):not(#cs-d):not(#cs-e):not(#cs-f):not(#cs-g):not(#cs-h):not(#cs-i) body.home .cs-portada-sello { margin-top: 24px !important; }