/* Ajustes propios encima del CSS de Squarespace. */

/* Fotos que Squarespace recortaba con JS: ahora llenan su caja con CSS. */
img[data-mdc-fill] { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

/* Fondos de sección con "grano de película": Squarespace los dibujaba en un canvas con JS.
   Ahora se ve la foto y el grano es una capa de ruido encima. */
.section-background img.background-image-fx { visibility: visible !important; width: 100%; height: 100%; object-fit: cover; }
[data-controller="BackgroundImageFXFilmGrain"] { position: relative; }
[data-controller="BackgroundImageFXFilmGrain"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("/assets/img/grain.webp") 0 0 / 256px 256px; opacity: .43; mix-blend-mode: overlay;
}

/* Barra roja de error de los formularios (igual a la de Squarespace). */
.mdc-form-error { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; margin-bottom: 16px; background: rgb(206, 44, 48); color: #fff; font-family: var(--body-font-font-family), sans-serif; font-size: 14px; line-height: 1.4; box-sizing: border-box; }
.mdc-form-error svg { width: 18px; height: 18px; flex: none; }
form [aria-invalid="true"] { border-color: rgb(206, 44, 48) !important; }


/* ---- Celular: mejoras de uso (no cambian el diseño) ---- */
/* iOS no agranda el texto solo al girar el teléfono. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 767px) {
  /* Campos de formulario en 16px: así el iPhone no hace zoom al tocarlos. */
  form input:not([type="checkbox"]):not([type="radio"]), form select, form textarea { font-size: 16px !important; }
  /* Íconos de Instagram: zona para tocar más grande (44 px), sin cambiar cómo se ven. */
  .header-icon, .header-menu .icon, .sqs-svg-icon--wrapper { position: relative; }
  .header-icon::after, .header-menu .icon::after, .sqs-svg-icon--wrapper::after { content: ""; position: absolute; inset: -10px; }
  /* Menú abierto: el logo blanco no se veía sobre el fondo claro; se muestra oscuro. */
  body.header--menu-open .header-title-logo img { filter: brightness(0); transition: filter .2s; }
}
/* Sin la demora de "doble toque" en botones y links. */
a, button, label, input, select, textarea { touch-action: manipulation; }

/* Flechas de los carruseles de fotos (Lake Atitlán, Casa Palopó): Squarespace las dibujaba con su fuente de íconos
   "squarespace-ui-font", que no se puede copiar. Mismo trazo fino, dibujado con SVG. */
.sqs-gallery-controls .previous:before,.sqs-gallery-controls .next:before{font-family:inherit;content:"";background-color:currentColor;-webkit-mask:var(--mdc-chevron) center/contain no-repeat;mask:var(--mdc-chevron) center/contain no-repeat}
.sqs-gallery-controls .previous:before{--mdc-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 2.5 6 12l9.5 9.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")}
.sqs-gallery-controls .next:before{--mdc-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 2.5 18 12l-9.5 9.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E")}

/* Botones y menú en Jost (reemplazo de Futura PT, ver fonts.css): grosores que más se parecen a la Futura original. */
:root { --site-navigation-font-font-weight: 450; --primary-button-font-font-weight: 560; --secondary-button-font-font-weight: 560; --tertiary-button-font-font-weight: 560; --header-button-font-font-weight: 560; }