/* =========================================================
   POSADA DISTRIBUIDORA · Hoja de estilos principal
   Edite colores, tamaños y espaciados desde las variables.
   ========================================================= */
:root {
  --azul: #0c2e8a;
  --azul-claro: #3157b2;
  --gris-fondo: #252525;
  --gris-profundo: #171717;
  --gris-texto: #686868;
  --gris-boton: #606060;
  --gris-borde: #dadada;
  --blanco: #ffffff;
  --ancho: 1180px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .18);
  --radio: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--blanco);
  background: var(--gris-fondo);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.modal-abierto { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 2000;
  padding: .75rem 1rem; background: var(--blanco); color: #111;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.contenedor { width: min(calc(100% - 40px), var(--ancho)); margin-inline: auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(235, 235, 235, 1.0);
  border-bottom:  3px solid var(--azul);
  backdrop-filter: blur(12px);
}
.header-interior {
  min-height: 100px; display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
}
.logo-link { flex: 0 1 300px; }
.logo { width: 100%; max-width: 300px; height: auto; }
.menu-toggle {
  display: none; border: 1px solid rgba(255,255,255,.3); background: transparent;
  color: #0c2e8a; padding: .62rem .8rem; border-radius: var(--radio);
}
.nav-list { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.nav-link {
  display: inline-block; padding: .65rem .82rem; text-decoration: none;
  color: #686868; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.activo {
  color: var(--azul-claro); border-color: var(--azul-claro);
}

/* Shared */
main { min-height: 70vh; }
.hero { padding: 42px 0 0; }
.hero-media { width: 100%; aspect-ratio: 16/7.25; object-fit: cover; box-shadow: var(--sombra); }
.panel-blanco { background: var(--blanco); color: var(--gris-texto); box-shadow: var(--sombra); }
.panel-contenido { padding: clamp(42px, 7vw, 92px); }
.encabezado-seccion { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.eyebrow {
  margin: 0 0 .75rem; color: var(--azul); font-size: .78rem;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
h1, h2, h3 { color: #464646; line-height: 1.15; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.65rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: clamp(1.65rem, 2.4vw, 2.4rem); color: #464646; line-height: 0.01; }
.titulo-linea::after {
  content: ""; display: block; width: 54px; height: 3px;
  margin: 1.2rem auto 0; background: var(--azul);
}
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #555; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .72rem 1.2rem; border: 0;
  background: var(--gris-boton); color: var(--blanco); text-decoration: none;
  font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
.boton:hover, .boton:focus-visible { background: var(--azul); transform: translateY(-2px); }

/* Home */
.home-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(34px, 6vw, 80px); align-items: center; }
.texto-columnas p:first-of-type::first-letter {
  float: left; padding: .06em .12em 0 0; color: var(--azul);
  font-size: 3.7rem; font-weight: 700; line-height: .8;
}
.dueno-img { width: 100%; max-height: 650px; object-fit: cover; }
.dato-destacado {
  margin-top: 2.2rem; padding: 1.2rem 1.4rem; border-left: 4px solid var(--azul);
  background: #f2f2f2; color: #4c4c4c;
}

/* Representaciones */
.intro-pagina { padding: 56px 0 30px; text-align: center; }
.intro-pagina h1 { color: var(--blanco); }
.intro-pagina .eyebrow { color: #8fa9ed; }
.intro-pagina p { max-width: 650px; margin: 1rem auto 0; color: #cfcfcf; }
.lista-representaciones { display: grid; gap: 22px; padding-bottom: 74px; }
.representacion {
  display: grid; grid-template-columns: minmax(230px, .72fr) 1.4fr;
  min-height: 260px; width: 100%; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--radio); background: var(--blanco); color: #444;
  text-align: left; box-shadow: var(--sombra); transition: transform .25s ease, box-shadow .25s ease;
}
.representacion:nth-child(even) { grid-template-columns: 1.4fr minmax(230px, .72fr); }
.representacion:nth-child(even) .representacion-info { order: 2; }
.representacion:hover, .representacion:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 65px rgba(0,0,0,.25); }
.representacion-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); }
.representacion-info small { color: var(--azul); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.representacion-info h2 { margin: .6rem 0 .9rem; font-size: clamp(1.8rem, 4vw, 3.7rem); }
.representacion-info span { color: #777; }
.representacion-media { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* Modal de marcas */
.modal {
  position: fixed; inset: 0; z-index: 1500; display: none; overflow: auto;
  background: rgba(13,13,13,.97); color: var(--blanco); cursor: zoom-out;
}
.modal.visible { display: block; animation: aparecer .22s ease both; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.modal-interior { width: min(calc(100% - 40px), 1180px); margin: 0 auto; padding: 58px 0 80px; }
.modal-cerrar {
  position: fixed; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.35);
  color: #fff; font-size: 1.4rem;
}
.modal h2 { margin: 0 0 1rem; color: var(--blanco); font-size: clamp(2.2rem, 6vw, 5.3rem); }
.modal-texto { max-width: 780px; color: #d4d4d4; }
.modal-aviso { color: #8fa9ed; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.modal-galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.modal-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #ddd; }

/* Novedades */
.novedades-lista { display: grid; gap: 34px; }
.novedad { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: var(--gris-texto); box-shadow: var(--sombra); }
.novedad:nth-child(even) .novedad-media { order: 2; }
.novedad-media { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.novedad-contenido { padding: clamp(32px, 5vw, 64px); align-self: center; }
.novedad-fecha { display: inline-block; margin-bottom: 1rem; color: var(--azul); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; }
.novedad h2 { margin: 0 0 1.2rem; }

/* Contacto */
.contacto-wrap { padding: 60px 0 90px; }
.contacto-panel { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 520px; }
.contacto-bloque-azul { padding: clamp(42px, 7vw, 84px); background: var(--azul); display: flex; flex-direction: column; justify-content: flex-end; }
.contacto-bloque-azul h1 { color: #fff; }
.contacto-bloque-azul p { color: #dce5ff; }
.contacto-datos { padding: clamp(42px, 7vw, 84px); display: grid; align-content: center; gap: 1.5rem; }
.contacto-item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--gris-borde); }
.contacto-item:last-child { border: 0; }
.contacto-item span { display: block; margin-bottom: .25rem; color: var(--azul); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.contacto-item a { color: #444; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Footer */
.site-footer { margin-top: 74px; background: var(--gris-profundo); border-top: 3px solid var(--azul); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 42px 0; }
.footer-contacto { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; color: #c8c8c8; font-size: .9rem; }
.footer-contacto a { text-decoration: none; }
.footer-social { display: flex; gap: .55rem; }
.social-link {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid #555; text-decoration: none; font-weight: 800;
  transition: background .2s ease, border-color .2s ease;
}
.social-link:hover, .social-link:focus-visible { background: var(--azul); border-color: var(--azul); }
.footer-copy { margin: 0; padding: 16px 0 24px; color: #777; font-size: .78rem; border-top: 1px solid #2d2d2d; }

/* Responsive */
@media (max-width: 850px) {
  .header-interior { min-height: 86px; }
  .logo-link { flex-basis: 235px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: #171717; border-top: 1px solid #333; }
  .site-nav.abierto { display: block; }
  .nav-list { display: block; padding: 12px 20px 20px; }
  .nav-link { display: block; padding: .9rem .4rem; }
  .home-grid, .contacto-panel { grid-template-columns: 1fr; }
  .dueno-img { max-height: 520px; }
  .representacion, .representacion:nth-child(even) { grid-template-columns: 1fr; }
  .representacion:nth-child(even) .representacion-info { order: 0; }
  .representacion-media { min-height: 220px; max-height: 340px; }
  .novedad { grid-template-columns: 1fr; }
  .novedad:nth-child(even) .novedad-media { order: 0; }
  .novedad-media { min-height: 280px; }
}
@media (max-width: 600px) {
  .contenedor { width: min(calc(100% - 24px), var(--ancho)); }
  .logo-link { flex-basis: 195px; }
  .hero { padding-top: 20px; }
  .hero-media { width: 100%; aspect-ratio: 4/3; }
  .panel-contenido { padding-inline: 26px; }
  .modal-interior { width: min(calc(100% - 24px), 1180px); padding-top: 74px; }
  .modal-galeria { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-social { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}