/* Estilos que comparten todas las páginas de Sereno */

/* Urbanist servida desde el sitio (fuente variable: un archivo para todos los grosores) */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fuentes/urbanist-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: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fuentes/urbanist-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; }

/* Los colores que cambian con el modo se registran como colores para que se puedan animar */
@property --fondo-base { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --texto { syntax: '<color>'; inherits: true; initial-value: #F4F4F2; }
@property --texto-suave { syntax: '<color>'; inherits: true; initial-value: #A6A6A6; }
@property --acento { syntax: '<color>'; inherits: true; initial-value: #FF7A66; }
@property --linea { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --borde { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --borde-fuerte { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tinta-tenue { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --superficie { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --superficie-pieza { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --burbuja { syntax: '<color>'; inherits: true; initial-value: #2E2E2E; }
@property --pista { syntax: '<color>'; inherits: true; initial-value: #2E2E2E; }
@property --fondo-punto { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --cabecera-solida { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --menu { syntax: '<color>'; inherits: true; initial-value: #A6A6A6; }
@property --menu-hover { syntax: '<color>'; inherits: true; initial-value: #F4F4F2; }
@property --marca-color { syntax: '<color>'; inherits: true; initial-value: #F4F4F2; }
@property --marca-sol { syntax: '<color>'; inherits: true; initial-value: #FF7A66; }
@property --boton-cab-fondo { syntax: '<color>'; inherits: true; initial-value: #F4F4F2; }
@property --boton-cab-texto { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --boton-cab-hover { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }

/* Paleta del kit de marca y colores de contenido por modo: oscuro (la noche) por defecto, claro (el atardecer) con data-tema="claro" */
:root {
  --noche: #101010;
  --grafito: #1A1A1A;
  --acero: #2E2E2E;
  --plata: #A6A6A6;
  --luna: #F4F4F2;
  --coral: #FF7A66;
  --coral-profundo: #E8604C;
  --coral-suave: #FFDCD5;
  /* Colores de contenido según el modo: oscuro (noche) por defecto, claro (atardecer) con data-tema="claro" */
  --fondo-base: var(--noche);
  --texto: var(--luna);
  --texto-suave: var(--plata);
  --acento: var(--coral);
  --linea: color-mix(in srgb, var(--luna) 18%, transparent);
  --borde: color-mix(in srgb, var(--luna) 28%, transparent);
  --borde-fuerte: color-mix(in srgb, var(--luna) 42%, transparent);
  --tinta-tenue: color-mix(in srgb, var(--luna) 32%, transparent);
  --superficie: color-mix(in srgb, var(--noche) 76%, transparent);
  --superficie-pieza: color-mix(in srgb, var(--grafito) 88%, transparent);
  --burbuja: var(--acero);
  --pista: var(--acero);
  --fondo-punto: var(--noche);
  /* El cambio de modo: colores y foto se funden juntos con la misma duración. Al ser transiciones,
     si se toca el botón a mitad de camino retoman desde donde están, sin saltos. */
  --cambio-tema: 350ms;
  transition-property: --fondo-base, --texto, --texto-suave, --acento, --linea, --borde, --borde-fuerte, --tinta-tenue, --superficie, --superficie-pieza, --burbuja, --pista, --fondo-punto, --cabecera-solida;
  transition-duration: var(--cambio-tema);
  transition-timing-function: ease;
  --cabecera-solida: var(--noche);
  --letra: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --fondo-base: var(--luna);
  --texto: var(--noche);
  --texto-suave: color-mix(in srgb, var(--noche) 72%, var(--luna));
  --acento: var(--coral-profundo);
  --linea: color-mix(in srgb, var(--noche) 16%, transparent);
  --borde: color-mix(in srgb, var(--noche) 22%, transparent);
  --borde-fuerte: color-mix(in srgb, var(--noche) 38%, transparent);
  --tinta-tenue: color-mix(in srgb, var(--noche) 20%, transparent);
  --superficie: color-mix(in srgb, var(--luna) 80%, transparent);
  --superficie-pieza: color-mix(in srgb, #FFFFFF 90%, transparent);
  --burbuja: color-mix(in srgb, var(--noche) 9%, var(--luna));
  --pista: color-mix(in srgb, var(--noche) 22%, var(--luna));
  --fondo-punto: var(--luna);
  --cabecera-solida: var(--luna);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--fondo-base);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--noche);
}
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg, canvas { max-width: 100%; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }

.envoltura {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding-left: max(var(--margen), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margen), env(safe-area-inset-right, 0px));
}
.banda { padding-block: clamp(36px, 5vw, 64px); }
/* Aparición de la info: cada bloque entra inclinado en 3D, escalonado y una sola vez (el retraso lo pone el script) */
.js [data-revelar] .revelar { opacity: 0; transform: perspective(900px) translateY(32px) rotateX(-18deg); transform-origin: 50% 0; }
.js [data-revelar].visto .revelar { opacity: 1; transform: none; transition: opacity 700ms var(--curva), transform 1000ms var(--curva); }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 6px;
  font: 600 17px/1 var(--letra);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--curva), background-color 160ms ease, box-shadow 160ms ease;
}
.boton:active { transform: scale(0.97); }
.boton-coral { background: var(--coral); color: var(--noche); }
.boton-linea { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 30%, transparent); color: var(--texto); }
.boton-luna { min-height: 42px; padding: 0 18px; font-size: 15px; background: var(--boton-cab-fondo); color: var(--boton-cab-texto); }
@media (hover: hover) and (pointer: fine) {
  .boton-coral:hover { background: color-mix(in srgb, var(--coral) 88%, var(--luna)); }
  .boton-linea:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texto) 70%, transparent); }
  .boton-luna:hover { background: var(--boton-cab-hover); }
  .tema:hover { border-color: var(--menu-hover); color: var(--menu-hover); }
  .enlace:hover { text-decoration-color: currentColor; }
}
.enlace {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 160ms ease;
}

/* Encabezado */
.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  margin-bottom: -72px;
  /* Sobre la foto del hero el texto es claro en los dos modos; con fondo, sigue al modo */
  --menu: var(--plata);
  --menu-hover: var(--luna);
  --marca-color: var(--luna);
  --marca-sol: var(--coral);
  --boton-cab-fondo: var(--luna);
  --boton-cab-texto: var(--noche);
  --boton-cab-hover: #FFFFFF;
  background: var(--cabecera-solida);
  transition: background-color 200ms ease, box-shadow 200ms ease, --menu var(--cambio-tema) ease, --menu-hover var(--cambio-tema) ease, --marca-color var(--cambio-tema) ease, --marca-sol var(--cambio-tema) ease, --boton-cab-fondo var(--cambio-tema) ease, --boton-cab-texto var(--cambio-tema) ease, --boton-cab-hover var(--cambio-tema) ease;
}
/* Transparente arriba de todo; al bajar toma un fondo de noche translúcido sobre la foto */
.js .cabecera:not(.solida) { background-color: transparent; }
.cabecera.con-logo { box-shadow: 0 1px 0 var(--linea); }
[data-tema="claro"] .cabecera.solida { --menu: color-mix(in srgb, var(--noche) 72%, var(--luna)); --menu-hover: var(--noche); --marca-color: var(--noche); --marca-sol: var(--coral-profundo); --boton-cab-fondo: var(--noche); --boton-cab-texto: var(--luna); --boton-cab-hover: var(--acero); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marca { display: inline-flex; color: var(--marca-color); --sol: var(--marca-sol); transition: opacity 240ms var(--curva), transform 240ms var(--curva), visibility 0s; }
.marca svg { width: 132px; height: auto; display: block; }
.js .cabecera:not(.con-logo) .marca { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms; }
.menu { display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 500; }
.menu a:not(.boton) { color: var(--menu); text-decoration: none; transition: color 160ms ease; }
.menu a:not(.boton):hover { color: var(--menu-hover); }
/* Selector de modo: el sol lleva al claro y la luna vuelve al oscuro */
.tema { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--menu) 50%, transparent); border-radius: 50%; background: none; color: var(--menu); cursor: pointer; transition: transform 160ms var(--curva), color 160ms ease, border-color 160ms ease; }
.tema:active { transform: scale(0.94); }
.tema svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--curva), opacity 200ms ease; }
.icono-luna { opacity: 0; transform: rotate(-80deg) scale(0.6); }
[data-tema="claro"] .icono-sol { opacity: 0; transform: rotate(80deg) scale(0.6); }
[data-tema="claro"] .icono-luna { opacity: 1; transform: none; }
@media (max-width: 760px) { .menu a:not(.boton) { display: none; } .menu { gap: 12px; } }
/* En el celular el botón dice sólo "Agendar" para que entre junto al logo y el selector de modo */
@media (max-width: 520px) {
  .solo-ancho { display: none; }
  .cabecera .envoltura { gap: 12px; }
  .marca svg { width: 120px; }
}

/* Paso entre páginas: el contenido se funde; el encabezado, el fondo y el botón de WhatsApp quedan quietos */
@view-transition { navigation: auto; }
.cabecera { view-transition-name: cabecera; }
.fondo { view-transition-name: fondo; }
.flotante { view-transition-name: flotante; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
.ya-visto .flotante { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Fondo de toda la página: la foto de la noche queda fija detrás y el contenido pasa por encima.
   Para que el texto se lea, al dejar el hero la foto se funde con su versión ya oscurecida (o aclarada en modo
   claro): las secciones quedan transparentes y la placa de video dibuja una sola pantalla por cuadro. */
.fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--fondo-base); pointer-events: none; }
.fondo-capa { position: absolute; top: 0; left: -16px; width: calc(100% + 32px); height: 112%; will-change: transform; }
.fondo-capa img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 65%; }
/* En modo claro el atardecer aparece encima de la noche */
.fondo-noche, .fondo-tarde { position: absolute; inset: 0; }
.fondo-manto { opacity: 0; }
/* Con la versión oscurecida ya cubriendo todo, la foto de abajo no se dibuja */
.fondo.cubierto .fondo-capa img:not(.fondo-manto) { visibility: hidden; }
/* En modo claro el atardecer aparece encima de la noche, y cada grupo se oculta cuando queda tapado */
.fondo-noche { transition: visibility 0s; }
[data-tema="claro"] .fondo-noche { visibility: hidden; transition: visibility 0s var(--cambio-tema); }
.fondo-tarde { opacity: 0; visibility: hidden; transition: opacity var(--cambio-tema) ease, visibility 0s var(--cambio-tema); }
[data-tema="claro"] .fondo-tarde { opacity: 1; visibility: visible; transition: opacity var(--cambio-tema) ease, visibility 0s; }
main, .pie { position: relative; z-index: 1; }
/* Red de seguridad: ningún objeto en 3D puede hacer que la página se corra de costado */
main { overflow-x: clip; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Encabezados de sección */
.titulo-seccion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.titulo-seccion h1, .titulo-seccion h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.titulo-seccion p { max-width: 32em; font-size: 19px; }
.titulo-seccion p { color: var(--texto-suave); }
@media (max-width: 760px) { .titulo-seccion { grid-template-columns: minmax(0, 1fr); } }

/* Pie */
.pie { border-top: 1px solid var(--linea); color: var(--texto-suave); font-size: 15px; }
.pie .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pie .marca-pie { color: var(--texto); --sol: var(--acento); display: inline-flex; }
.pie .marca-pie svg { width: 132px; height: auto; display: block; }

/* WhatsApp fijo abajo a la derecha. Va un poco más arriba para no pisar el cartel de Netlify;
   si el cartel se va (dominio propio o plan pago), se puede bajar --flotante-abajo a 24px. */
.flotante {
  --flotante-abajo: 80px;
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--flotante-abajo) + env(safe-area-inset-bottom, 0px));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--noche);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 160ms var(--curva);
  animation: flotante-entra 500ms var(--curva) 1500ms backwards;
}
.flotante svg { width: 30px; height: 30px; fill: currentColor; }
.flotante:active { transform: scale(0.94); }
.flotante-texto {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--luna);
  color: var(--noche);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity 180ms ease, transform 200ms var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .flotante:hover { transform: scale(1.05); }
  .flotante:hover .flotante-texto { opacity: 1; transform: translate(0, -50%); }
}
@keyframes flotante-entra { from { opacity: 0; transform: translateY(12px) scale(0.9); } }
@media (max-width: 520px) { .flotante { width: 56px; height: 56px; right: max(16px, env(safe-area-inset-right, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flotante { animation: none; }
  /* Con movimiento reducido la info sólo se funde, sin desplazarse ni girar */
  .js [data-revelar] .revelar { transform: none; }
  .js [data-revelar].visto .revelar { transition: opacity 300ms ease; }
}