/* ==========================================================================
   DON CLOVIS · hoja de estilos del sitio de marca
   Globo Creativo · agosto 2026
   Paleta y escala tomadas del brief y de la maqueta aprobada.
   ========================================================================== */

:root {
  /* --- color --- */
  --azul:        #2D3464;
  --azul-hondo:  #232951;
  --petroleo:    #18364C;
  --oro:         #D1AE6D;
  --oro-luz:     #E4C890;
  --oro-sombra:  #B78E4D;
  --oro-hondo:   #744D25;
  --marfil:      #F3EEE2;
  --madera:      #C8A16B;
  --tinta:       #3b3a35;

  /* --- tipografía --- */
  --serif:  "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --firma:  "Alex Brush", cursive;

  /* Escala fluida: el número chico es celular, el grande desktop. */
  --t-title:  clamp(2.05rem, 1.30rem + 3.7vw, 3.40rem);
  --t-h1:     clamp(1.85rem, 1.25rem + 3.0vw, 2.75rem);
  --t-h2:     clamp(1.45rem, 1.10rem + 1.8vw, 2.25rem);
  --t-body:   clamp(1.00rem, 0.95rem + 0.30vw, 1.19rem);
  --t-lead:   clamp(1.06rem, 0.98rem + 0.55vw, 1.31rem);
  --t-ui:     0.6875rem;

  /* --- ritmo --- */
  --marco:    clamp(1.25rem, 0.60rem + 3.2vw, 5.625rem);  /* 20px → 90px  */
  --seccion:  clamp(2.50rem, 1.30rem + 6.0vw, 5.25rem);   /* 40px → 84px  */
  --ancho:    72rem;
  --ancho-txt: 46rem;

  /* --- video: una sola línea para cambiar cuando se confirme el formato --- */
  --video-aspecto: 16 / 9;
  --video-ancho:   58rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--azul);
  color: var(--marfil);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--oro); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--oro-luz); }

button { font-family: inherit; color: inherit; }

h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: .05em; }

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--oro-luz);
  outline-offset: 3px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--marfil); color: var(--azul);
  padding: .75rem 1.25rem; z-index: 999;
  font-family: var(--sans); font-size: .8rem;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   Utilidades de marca
   ========================================================================== */

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--marco); }
.texto      { max-width: var(--ancho-txt); }
.centrado   { text-align: center; margin-inline: auto; }

/* Versalitas de interfaz */
.vers {
  font-family: var(--sans);
  font-size: var(--t-ui);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}
.vers--oro   { color: var(--oro); }
.vers--hondo { color: var(--oro-hondo); }

/* Filete de oro con degradado, el de la cabecera */
.filete {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    rgba(209,174,109,0) 0%, var(--oro-sombra) 18%,
    var(--oro-luz) 50%, var(--oro-sombra) 82%, rgba(209,174,109,0) 100%);
}

/* Separador oficial: filete + rombo a 45° */
.rombo {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.6rem, .4rem + .6vw, .875rem);
}
.rombo::before, .rombo::after {
  content: ""; height: 1px;
  width: clamp(3.4rem, 2rem + 5vw, 6.9rem);
  background: var(--oro-sombra);
}
.rombo i {
  width: 7px; height: 7px; background: var(--oro-sombra);
  transform: rotate(45deg); flex: none;
}
.rombo--claro::before, .rombo--claro::after { background: var(--oro); }
.rombo--claro i { background: var(--oro); }

/* Fondo azul con madera al 7 % y viñeta superior */
.fondo-azul {
  background-color: var(--azul);
  background-image:
    radial-gradient(90% 65% at 50% 0%, rgba(72,80,138,.5) 0%, rgba(45,52,100,0) 65%),
    linear-gradient(rgba(45,52,100,.93), rgba(45,52,100,.93)),
    url("../assets/madera.jpg");
  background-size: auto, auto, 340px;
}
.fondo-azul--plano {
  background-image:
    linear-gradient(rgba(45,52,100,.93), rgba(45,52,100,.93)),
    url("../assets/madera.jpg");
  background-size: auto, 340px;
}
.fondo-marfil { background: var(--marfil); color: var(--tinta); }
.fondo-marfil h1, .fondo-marfil h2, .fondo-marfil h3 { color: var(--azul); }

/* Borde perimetral doble: el de la cara frontal de la caja */
.marco-doble { border: 1px solid rgba(209,174,109,.8); padding: clamp(4px, .4vw, 6px); }
.marco-doble > * { border: 3px solid rgba(183,142,77,.9); }

.seccion { padding-block: var(--seccion); }
.borde-oro { border-top: 3px solid var(--oro-sombra); }

/* ==========================================================================
   Cabecera y navegación
   ========================================================================== */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(45,52,100,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, padding .3s ease;
}
.cabecera__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: clamp(.7rem, .5rem + .6vw, 1.1rem) var(--marco);
  max-width: var(--ancho); margin-inline: auto;
  transition: padding .3s ease;
}
.cabecera.encogida .cabecera__barra { padding-block: .5rem; }
.cabecera__logo img { width: clamp(7.5rem, 5rem + 8vw, 10.6rem); }

.nav { display: none; gap: clamp(1.2rem, .4rem + 1.9vw, 2.125rem); }
.nav a {
  font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase;
  position: relative; padding-bottom: 3px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--oro-luz);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--oro-luz); }

/* Botón hamburguesa */
.hamburguesa {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px;
  padding: .5rem .125rem;
}
.hamburguesa span {
  display: block; width: 24px; height: 1px; background: var(--oro);
  transition: transform .3s ease, opacity .25s ease;
}
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú a pantalla completa */
.menu {
  position: fixed; inset: 0; z-index: 45;
  background-color: var(--azul);
  background-image: linear-gradient(rgba(45,52,100,.95), rgba(45,52,100,.95)), url("../assets/madera.jpg");
  background-size: auto, 300px;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.1rem, .6rem + 2vw, 1.6rem);
  padding: 6rem clamp(2rem, 1rem + 4vw, 3rem) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-1rem);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
}
.menu-abierto .menu { opacity: 1; visibility: visible; transform: none; }
.menu a {
  font-size: clamp(1.35rem, 1rem + 2.2vw, 1.7rem);
  letter-spacing: .1em; text-transform: uppercase;
}
.menu a[aria-current="page"] { color: var(--oro-luz); }
/* Absoluto para que no se coma el espacio libre y los enlaces queden centrados. */
.menu__pie {
  position: absolute; left: clamp(2rem, 1rem + 4vw, 3rem); right: clamp(2rem, 1rem + 4vw, 3rem);
  bottom: clamp(2rem, 1rem + 4vw, 3rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.menu__pie hr { height: 1px; border: 0; background: linear-gradient(90deg, var(--oro-sombra), rgba(209,174,109,0)); margin: 0; }
.menu__pie img { width: 58px; }

body.menu-abierto { overflow: hidden; }

@media (min-width: 62rem) {
  .nav { display: flex; }
  .hamburguesa { display: none; }
}

/* ==========================================================================
   Hero · la cara frontal de la caja, a todo el ancho
   ========================================================================== */

.hero {
  position: relative;
  background-color: #c9a678;
  background-image: url("../assets/madera-panel.jpg");
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  /* Hace del hero el grupo de mezcla: así el multiply de la ilustración
     encuentra la madera debajo en vez de fondo transparente. */
  isolation: isolate;
}
/* Viñeta: aclara el centro lo justo para que el logotipo negro y el grabado
   tengan contraste. Va en ::before para que el contenido pinte encima. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 40% at 50% 24%, rgba(255,246,228,.40) 0%, rgba(255,246,228,0) 100%),
    linear-gradient(to bottom, rgba(45,52,100,.34) 0%, rgba(45,52,100,0) 12%);
}
.hero__interior {
  position: relative;   /* sin z-index: no debe crear contexto de apilado */
  max-width: 68rem; margin-inline: auto;
  padding: clamp(2.2rem, 1rem + 5vw, 4.5rem) var(--marco) clamp(2rem, 1rem + 3vw, 3.25rem);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.9rem, .6rem + 1.2vw, 1.4rem);
  text-align: center;
}
.hero .vers { color: #5f3d16; letter-spacing: .34em; }
.hero__logo { width: min(100%, 30rem); }
.hero__engenho {
  font-family: var(--sans); font-size: var(--t-ui);
  letter-spacing: .26em; text-transform: uppercase;
  color: #2b2f52; line-height: 2; margin: 0;
}
.hero .rombo::before, .hero .rombo::after { background: #7a5223; }
.hero .rombo i { background: #7a5223; }
.hero__ilustracion {
  width: min(112%, 62rem);
  margin-block: clamp(-.5rem, -1vw, 0rem);
  mix-blend-mode: multiply;
  animation: flotar 9s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hero__bajada {
  font-size: var(--t-lead); line-height: 1.6; color: #232951;
  max-width: 32rem; margin-top: .25rem;
}
.hero__flecha {
  margin-top: -.75rem; color: #7a5223;
  animation: bajar 2.4s ease-in-out infinite;
}
@keyframes bajar {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ==========================================================================
   Video intro · marco doble de oro sobre la madera del hero
   ========================================================================== */

.intro-wrap {
  position: relative;
  padding: 0 var(--marco) clamp(2.5rem, 1.2rem + 5vw, 4.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.intro {
  margin: 0; width: min(100%, var(--video-ancho));
  border: 1px solid rgba(183,142,77,.95);
  padding: clamp(4px, .45vw, 6px);
  background: rgba(45,52,100,.18);
}
.intro__marco {
  border: 3px solid rgba(116,77,37,.85);
  background: var(--azul);
  aspect-ratio: var(--video-aspecto);
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.intro video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Portada con el escudo, mientras el video no se reproduce */
.intro__portada {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--azul) center/cover no-repeat;
  transition: opacity .4s ease, visibility .4s;
}
.intro__portada::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, rgba(20,24,54,.30) 0%, rgba(20,24,54,.62) 100%);
}
.intro.reproduciendo .intro__portada { opacity: 0; visibility: hidden; }
.intro__escudo {
  position: absolute; width: clamp(6rem, 4rem + 9vw, 11.5rem);
  opacity: .12; pointer-events: none;
}
.intro__play {
  position: relative;
  width: clamp(3.9rem, 2.8rem + 4vw, 5.5rem); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid var(--oro);
  background: rgba(45,52,100,.55);
  box-shadow: 0 0 0 1px rgba(20,24,54,.35), 0 6px 26px rgba(0,0,0,.35);
  display: grid; place-items: center; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.intro__play:disabled { cursor: default; }
.intro__play:hover { border-color: var(--oro-luz); background: rgba(45,52,100,.78); transform: scale(1.06); }
.intro__play::before {
  content: ""; display: block;
  border-left: clamp(15px, 1.2vw, 20px) solid var(--oro);
  border-top: clamp(9px, .75vw, 12px) solid transparent;
  border-bottom: clamp(9px, .75vw, 12px) solid transparent;
  margin-left: 5px;
}
.intro__play:hover::before { border-left-color: var(--oro-luz); }
.intro__etiqueta {
  position: absolute; bottom: clamp(.7rem, 1.4vw, 1.25rem);
  color: rgba(209,174,109,.85);
}
.intro__pie { font-family: var(--sans); font-size: .75rem; color: var(--oro-hondo); text-align: center; }

/* ==========================================================================
   Bloques de contenido
   ========================================================================== */

.encabezado { display: flex; flex-direction: column; align-items: center; gap: clamp(.7rem, .5rem + .8vw, 1rem); text-align: center; }
.encabezado h1, .encabezado h2 { font-size: var(--t-h1); }
.encabezado p { font-size: var(--t-lead); line-height: 1.7; max-width: 42rem; }

.duo { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.4rem); align-items: center; }
@media (min-width: 54rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--ancho-izq { grid-template-columns: 1.1fr 1fr; }
  .duo--ancho-der { grid-template-columns: 1fr 1.1fr; }
  .duo--invertido > :first-child { order: 2; }
}

.bloque-texto { display: flex; flex-direction: column; gap: clamp(.7rem, .5rem + .8vw, 1.1rem); align-items: flex-start; }
.bloque-texto h2 { font-size: var(--t-h2); }
.bloque-texto p { line-height: 1.85; }

/* Producto */
.productos { display: grid; gap: clamp(2.2rem, 1rem + 5vw, 3.5rem); }
@media (min-width: 48rem) { .productos { grid-template-columns: 1fr 1px 1fr; gap: clamp(2rem, 1rem + 3vw, 3.5rem); } }
.productos__linea { background: rgba(183,142,77,.45); }
.producto { display: flex; flex-direction: column; align-items: center; gap: clamp(.6rem, .4rem + .7vw, 1rem); text-align: center; }
.producto img { width: min(100%, 20rem); }
.producto h3 { font-size: var(--t-h2); }
.producto .medida { font-family: var(--sans); font-size: .75rem; letter-spacing: .2em; color: var(--oro-hondo); }
.producto p { line-height: 1.8; max-width: 26rem; }

/* Figuras con marco de oro */
.encuadre { border: 1px solid rgba(209,174,109,.7); padding: clamp(4px, .4vw, 6px); margin: 0; overflow: hidden; }
.encuadre img { width: 100%; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.encuadre:hover img { transform: scale(1.04); }

/* Galería de la caja */
.galeria { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, .4rem + .8vw, 1rem); }
@media (min-width: 54rem) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria .encuadre { border-color: rgba(209,174,109,.35); }

/* Banda fotográfica a todo el ancho */
.banda {
  position: relative; min-height: clamp(16rem, 10rem + 26vw, 30rem);
  display: grid; place-items: center;
  background: var(--azul-hondo) center/cover no-repeat;
  background-attachment: scroll;
  text-align: center;
  padding: var(--seccion) var(--marco);
  overflow: hidden;
}
.banda::before {
  content: ""; position: absolute; inset: 0;
  /* Oscurece lo justo para que el texto se lea, sin tapar la fotografía. */
  background:
    radial-gradient(80% 68% at 50% 50%, rgba(20,24,54,.34) 0%, rgba(20,24,54,.74) 100%),
    linear-gradient(rgba(35,41,81,.30), rgba(35,41,81,.46));
}
.banda h2, .banda p { text-shadow: 0 1px 14px rgba(12,15,34,.55); }
.banda > * { position: relative; z-index: 1; }
.banda h2 { font-size: var(--t-h1); }
.banda p { font-size: var(--t-lead); line-height: 1.8; max-width: 44rem; margin-inline: auto; }

/* La cita del nombre. Aire arriba y abajo, y nada al lado. */
.cita {
  padding-block: clamp(4rem, 2rem + 12vw, 8rem);
  text-align: center;
}
.cita p {
  font-size: clamp(1.35rem, 1rem + 2.1vw, 2.05rem);
  font-style: italic; line-height: 1.6; color: var(--azul);
  margin-inline: auto; max-width: 30rem;
}
.cita span { color: var(--oro-sombra); font-style: normal; }

/* Firma Alex Brush. Una sola vez en todo el sistema. */
.firma { font-family: var(--firma); font-size: clamp(2.7rem, 1.6rem + 5vw, 4.25rem); color: var(--oro); line-height: 1.1; }

/* Visor 360 y mapa */
.visor { width: min(100%, 55rem); margin-inline: auto; }
.visor .intro__marco { aspect-ratio: 1 / 1; }
@media (min-width: 48rem) { .visor .intro__marco { aspect-ratio: 4 / 3; } }
.visor iframe { width: 100%; height: 100%; border: 0; display: block; }

.mapa { aspect-ratio: 4 / 3; background: #E7E0D2; display: grid; place-items: center; }
@media (min-width: 54rem) { .mapa { aspect-ratio: 16 / 10; } }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* Ficha de datos */
.datos { display: flex; flex-direction: column; gap: clamp(.8rem, .6rem + .8vw, 1.1rem); border-top: 1px solid rgba(183,142,77,.4); padding-top: 1.35rem; width: 100%; }
.datos div { display: flex; flex-direction: column; gap: .25rem; }
.datos dt { font-family: var(--sans); font-size: .625rem; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-hondo); }
.datos dd { margin: 0; font-size: var(--t-lead); color: var(--tinta); }

/* ==========================================================================
   Botones
   ========================================================================== */

.boton {
  display: inline-block;
  font-family: var(--sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro); border: 1px solid rgba(209,174,109,.6);
  padding: .875rem 1.6rem;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.boton:hover { color: var(--oro-luz); border-color: var(--oro-luz); background: rgba(209,174,109,.12); }
.boton:active { color: var(--oro-hondo); background: var(--oro-sombra); border-color: var(--oro-sombra); }

.boton--solido {
  color: var(--marfil); background: var(--azul); border-color: var(--oro-sombra);
}
.boton--solido:hover { color: var(--marfil); background: var(--petroleo); border-color: var(--oro); }

.enlace-sutil {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro-hondo); border-bottom: 1px solid rgba(116,77,37,.4); padding-bottom: 4px;
}
.enlace-sutil:hover { color: var(--oro-hondo); border-bottom-color: var(--oro-hondo); }

/* Un dato todavía sin confirmar no finge ser un enlace. */
.pendiente { pointer-events: none; opacity: .55; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie { border-top: 1px solid rgba(209,174,109,.35); }
.pie__interior {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: clamp(1.9rem, 1rem + 3vw, 2.6rem) var(--marco);
  max-width: var(--ancho); margin-inline: auto; text-align: center;
}
.pie__escudo { width: 62px; }
.pie__ogaucho { width: 148px; opacity: .85; }
.pie__redes { display: flex; gap: 1.25rem; font-family: var(--sans); font-size: var(--t-ui); letter-spacing: .16em; text-transform: uppercase; }
.pie__legal { font-family: var(--sans); font-size: .625rem; line-height: 1.7; color: rgba(243,238,226,.55); margin: 0; }

@media (min-width: 54rem) {
  .pie__interior { flex-direction: row; justify-content: space-between; text-align: left; }
  .pie__centro { display: flex; flex-direction: column; align-items: center; gap: .875rem; }
}

/* ==========================================================================
   Aparición al hacer scroll
   ========================================================================== */

.revela { opacity: 0; transform: translateY(22px); }
.js .revela { transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.revela.visible { opacity: 1; transform: none; }
.revela.d1 { transition-delay: .1s; }
.revela.d2 { transition-delay: .2s; }
.revela.d3 { transition-delay: .3s; }

/* Sin animaciones si el sistema las tiene desactivadas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revela { opacity: 1; transform: none; }
  .hero__ilustracion, .hero__flecha { animation: none; }
}

/* Si no hay JS, nada se queda invisible. */
.no-js .revela { opacity: 1; transform: none; }

@media print {
  .cabecera, .menu, .intro__play, .hero__flecha { display: none; }
  body { background: #fff; color: #000; }
}