/* Love Light Studio — estilos del sitio público (lovelight.com.mx, sin www desde 2026-10-13).
   Reproducen el diseño que tenía el sitio en GoDaddy: medidas, tipos y colores salieron de ese sitio
   (estilos calculados en el navegador a 1440 y 390 px). Si cambias este archivo, sube el ?v= con el
   que lo llama index.html (ver LEEME.md): el servidor lo manda con caché de un año. */

:root {
  --rosa: #fff0f1;            /* tarjeta de la portada */
  --rosa-fuerte: #ffc4ca;     /* botón flotante y aviso de cookies */
  --vino: rgb(173, 95, 103);  /* títulos de sección y ligas */
  --vino-portada: rgb(166, 91, 99);
  --tinta: #151515;           /* titular de la portada */
  --tinta-suave: #1b1b1b;     /* subtítulos */
  --gris: #5e5e5e;            /* texto corrido */
  --gris-portada: #575757;
  --gris-pie: #595959;
  --borde: #e2e2e2;
  --pizarra: #455a64;         /* botón de WhatsApp */
  --sans: 'Open Sans', arial, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
  background: #fff;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vino); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--vino); outline-offset: 2px; }

.saltar { position: absolute; left: -9999px; top: 8px; background: #000; color: #fff; padding: 8px 16px; z-index: 20000; }
.saltar:focus { left: 8px; }

.contenedor { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- Secciones y sus títulos ---- */
.seccion { padding: 32px 0; background: #fff; }
.titulo-seccion {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--vino);
  text-align: left;
  margin: 0 0 24px;
}

/* ---- Cabecera: logo, menú del celular y portada ---- */
.cabecera { background: #fff; padding: 48px 0 24px; }
.cabecera-fila { position: relative; display: flex; align-items: center; justify-content: center; min-height: 60px; }
.logo { display: block; width: 224px; }
.logo img { width: 100%; height: auto; }
.hamburguesa {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #ff3862;   /* el ícono del menú era rosa en el celular */
}
/* "EN | ES" a la derecha del logotipo: chiquito y en el rosa de los títulos. El idioma de la página
   va sin liga y en tinta, para que se vea cuál es el actual. */
.idiomas {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vino);
}
.idiomas a { color: var(--vino); }
.idiomas [aria-current] { color: var(--tinta-suave); }
/* Letra de 11 px = un blanco de 11 px de alto; es la ÚNICA manera de cambiar de idioma y el pulgar no
   atina. El relleno agranda lo que se puede tocar (≈29×35 px) y el margen negativo lo descuenta, así
   que se ve exactamente igual. */
.idiomas a, .idiomas [aria-current] { padding: 12px 6px; margin: -12px -6px; }
.idiomas-sep { color: var(--borde); }
.menu-movil {
  position: fixed; inset: 0; z-index: 10000; background: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px;
  font-size: 22px; letter-spacing: 0.045em; color: var(--tinta-suave);
}
.menu-movil[hidden] { display: none; }
.menu-movil a { color: var(--tinta-suave); }
.menu-cerrar { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--tinta-suave); }
body.con-menu { overflow: hidden; }

.portada { margin-top: 48px; }
.portada-foto { display: block; }
.portada-foto img { width: 100%; height: auto; aspect-ratio: 1.5 / 1; object-fit: cover; }
.portada-tarjeta { background: var(--rosa); padding: 56px 24px; display: flex; align-items: center; justify-content: center; text-align: center; }
.portada-texto { max-width: 750px; }
.bienvenido {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--vino-portada);
  margin: 0 0 16px;
}
.portada h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.023em;
  color: var(--tinta);
  margin: 0 0 16px;
}
/* El margen de abajo y text-wrap:pretty son los del sitio de GoDaddy: sin ellos la frase se parte
   "…mágicos en tu / gran día" en vez de "…mágicos / en tu gran día", y el bloque queda 8 px más abajo. */
.portada p { color: var(--gris-portada); font-size: 16px; line-height: 1.5; margin: 0 0 16px; text-wrap: pretty; }

/* ---- Sobre Love Light Studio: foto cuadrada + texto, alternando de lado en escritorio ---- */
.bloque { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-bottom: 48px; text-align: center; }
.bloque:last-child { margin-bottom: 0; }
.bloque-foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.bloque-texto h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.045em;
  color: var(--tinta-suave);
  margin: 0 0 16px;
}
.bloque-texto p { color: var(--gris); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

/* ---- Botones negros (los mismos de GoDaddy: cuadrados, Open Sans bold, mayúsculas espaciadas) ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 0; border-radius: 0; cursor: pointer;
  background: #000; color: #fff;
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; text-decoration: none;
  transition: background 0.3s;
  max-width: 100%;
}
.boton:hover, .boton:focus-visible { background: #333; text-decoration: none; }
.boton:disabled { opacity: 0.6; cursor: default; }
.boton-grande { font-size: 14px; letter-spacing: 0.214em; min-height: 56px; padding: 8px 32px; width: 100%; }

/* ---- Reserva tu sesión: LA PÁGINA DE RESERVAS ADENTRO (Jorge 2026-10-13) ----
   Ya no son pastillas que mandan a /reservar: es /reservar?embed=1 en un marco (plantilla.html), la misma
   página con su misma cara (Jorge 2026-10-02: "que se vea como lo tenemos hoy"). El marco sale 12 px
   hacia cada lado para que las tarjetas de adentro (que traen 12 px de margen para su sombra) queden a
   plomo con el título de la sección; en el teléfono eso cae dentro de los 24 px de .contenedor, sin
   deslizar la página de lado. Arranca en 720 px y luego mide lo que diga la página de adentro. */
/* A TODO EL ANCHO de la sección, como las demás (Jorge 2026-10-13, en la Mac: *"está muy cargado a la izquierda,
   ponlo justificado y que quede conforme al tamaño de la página"*). Con 760 px quedaba un hueco a la derecha. */
.reservar { max-width: none; }
/* Arranca cerca de lo que mide la reserva cerrada (~509 px en teléfono, ~446 en computadora): con 720 todo lo de
   abajo brincaba ~250 px al cargar, y Safari no lo compensa (revisión 2026-10-13). */
.reservar-marco { display: block; width: calc(100% + 24px); height: 520px; margin: 0 -12px; border: 0; background: transparent; }
@media (min-width: 768px) { .reservar-marco { height: 460px; } }
@media (min-width: 1100px) { .reservar-marco { height: 380px; } }   /* a todo el ancho, los 6 hoteles caben en un renglón */
.reservar-respaldo { font-size: 14px; line-height: 1.5; margin: 8px 0 0; }

/* ---- Comunícate con nosotros: formulario, WhatsApp y correo ---- */
.contacto { max-width: 725px; margin: 0 auto; text-align: center; }
.contacto-titulo, .contacto-nombre {
  font-family: var(--sans); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.045em;
  color: var(--tinta-suave); margin: 0 0 24px;
}
.forma { text-align: center; }
.campo { position: relative; margin-bottom: 24px; text-align: left; }
.campo input, .campo textarea {
  display: block; width: 100%;
  font-family: var(--sans); font-size: 16px; color: var(--tinta-suave);
  background: #fff; border: 0; border-radius: 0; outline-offset: 0;
}
.campo input { height: 54px; padding: 18px 8px 4px; border-bottom: 2px solid var(--borde); }
.campo textarea { min-height: 146px; padding: 28px 8px 8px; line-height: 28px; border: 1px solid var(--borde); border-radius: 3px; resize: vertical; }
.campo label {
  position: absolute; left: 8px; top: 16px; color: var(--gris); font-size: 16px; line-height: 22px;
  pointer-events: none; transition: all 0.2s;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--vino); }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label { top: 4px; font-size: 12px; color: var(--vino); }
.campo-area label { top: 16px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { min-height: 24px; margin: 0 0 16px; font-size: 14px; }
.estado-ok { color: #2e7d32; }
.estado-error { color: #b00020; }
.nota { margin: 24px 0 0; font-size: 14px; color: var(--gris); }
.nota a { color: var(--vino); }

.whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 48px auto 64px; padding: 8px 16px; min-height: 56px; max-width: 88%;   /* 64 abajo en celular, 88 en escritorio: medido en GoDaddy */
  background: var(--pizarra); color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 700;
  transition: background 0.3s;
}
.whatsapp:hover, .whatsapp:focus-visible { background: #37474f; text-decoration: none; }
.contacto-correo { font-size: 16px; line-height: 1.5; padding-bottom: 24px; }   /* el aire de abajo que tenía la sección en GoDaddy */
.contacto-correo a { color: var(--vino); }

/* ---- Conéctate con nosotros ---- */
.redes { display: flex; justify-content: center; align-items: center; }
.redes a { display: block; padding: 0 8px 8px; }
.redes svg { width: 40px; height: 40px; display: block; }

/* ---- Pie ---- */
.pie { padding: 32px 0; text-align: center; background: #fff; }
.pie-nombre { font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0.083em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 48px; }   /* 48 en celular, 40 en escritorio (GoDaddy) */
.pie-derechos { font-size: 12px; line-height: 1.5; letter-spacing: 0.083em; text-transform: uppercase; color: var(--gris-pie); }
.pie-privacidad { font-size: 12px; line-height: 1.5; letter-spacing: 0.083em; text-transform: uppercase; margin-top: 8px; }
.pie-privacidad a { color: var(--vino); }

/* ---- Botón flotante de WhatsApp (ocupa el lugar de la burbuja de chat de GoDaddy) ---- */
.flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 9000;
  width: 65px; height: 65px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rosa-fuerte); color: #120f0f;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.25);
}
.flotante:hover, .flotante:focus-visible { text-decoration: none; background: #ffb3bb; }

/* ---- Aviso de cookies ---- */
.cookies {
  position: fixed; right: 0; bottom: 0; z-index: 10000;
  width: 100%; padding: 24px; background: var(--rosa-fuerte);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); text-align: left;
}
.cookies[hidden] { display: none; }
.cookies h2 { font-family: var(--sans); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: 0.045em; color: #000; padding-bottom: 8px; }
.cookies p { font-size: 16px; line-height: 1.5; color: #543034; }
.boton-cookies { font-size: 12px; letter-spacing: 0.214em; min-height: 40px; padding: 4px 16px; width: 100%; margin: 24px 0 4px; }

/* ====== Tableta ====== */
@media (min-width: 768px) {
  .seccion { padding: 40px 0; }
  .titulo-seccion { margin-bottom: 32px; }
  .cabecera { padding: 56px 0 40px; }
  .cabecera-fila { min-height: 80px; }
  .logo { width: auto; }
  .logo img { height: 80px; width: auto; }
  .idiomas { gap: 6px; font-size: 12px; letter-spacing: 0.125em; }
  /* La foto manda la altura (1.5:1, como en GoDaddy) y la tarjeta rosa se estira a su lado. */
  .portada { margin-top: 56px; display: grid; grid-template-columns: 65.1% 1fr; align-items: stretch; }
  .portada-foto img { min-height: 400px; aspect-ratio: auto; }
  /* En tableta parada (768–1023) la tarjeta rosa mide ~250 px y "Photography" a 38 px mide 228: la
     columna se estiraba y la página se deslizaba de lado (medido: 33 px de más a 768 en inglés, 6 en
     español). Letra de 32 (la del teléfono) y menos relleno a los lados; a 1024 vuelven los 38/40. */
  .portada-tarjeta { padding: 40px 24px; }
  .portada h1 { font-size: 32px; }
  /* Alternan de lado: 1.º y 3.º con la foto a la izquierda, 2.º y 4.º a la derecha (como en GoDaddy).
     Se cuenta por tipo (article) porque el título de la sección es el primer hijo del contenedor. */
  .bloque { grid-template-columns: 1fr 1fr; gap: 48px; }
  .bloque:nth-of-type(odd) .bloque-foto { order: 1; }
  .bloque:nth-of-type(odd) .bloque-texto { order: 2; }
  .bloque:nth-of-type(even) .bloque-foto { order: 2; }
  .bloque:nth-of-type(even) .bloque-texto { order: 1; }
  .bloque-texto h3 { margin-bottom: 24px; }
  .boton-grande, .boton-cookies { width: auto; }
  .whatsapp { padding: 8px 32px; margin-bottom: 88px; }
  .redes a { padding: 0 24px 8px; }
  .redes svg { width: 48px; height: 48px; }
  .pie { padding: 40px 0; }
  .pie-nombre { margin-bottom: 40px; }
  .cookies { width: 400px; margin: 24px; border-radius: 7px; }
}

/* ====== Escritorio ====== */
@media (min-width: 1024px) {
  .hamburguesa, .menu-movil { display: none; }
  /* Tal cual lo pintaba GoDaddy: la imagen (972×254, la misma que servía él) va dentro de una caja de
     445×127 con object-fit:contain, o sea que se ve de 445×116 centrada. Sin la caja saldría de 486. */
  .logo img { width: 445px; height: 127px; object-fit: contain; }
  .portada { margin-top: 80px; }
  .portada-tarjeta { padding: 40px; }
  .portada h1 { font-size: 38px; }
}
@media (min-width: 1280px) {
  .portada h1 { font-size: 44px; }
}
@media (min-width: 1536px) {
  body, .titulo-seccion, .bienvenido, .portada p, .bloque-texto p { font-size: 18px; }
  .portada h1 { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .whatsapp, .campo label { transition: none; }
}