/*
  Encabezado, menú y pie: los usa el inicio nuevo (importado desde global.css) y las páginas PHP del sitio
  actual (servido tal cual en /marco/marco.css). Por eso NO lleva Tailwind ni estilos globales: todo va
  dentro de .lienzo / .menu-movil, y los reinicios usan :where() para ganarle a main.css/Bootstrap del sitio
  viejo sin pelearse con nuestras propias clases.
*/

@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Adam: solo mayúsculas sin acentos; los acentos caen a la siguiente fuente, igual que en el Illustrator. */
@font-face {
  font-family: 'Adam';
  src: url('/fonts/adam-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Adam';
  src: url('/fonts/adam-light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

:root {
  --negro: #000;
  --fondo: #0d0d0d;
  --texto: #f1f1f1;
  --verde-claro: #6cc04a;
  --verde-oscuro: #0f7a3c;
  /* La fuente del diseño (Shree Devanagari 714) es de sistema de Mac y no se puede usar en web. */
  --fuente-sistema: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-raleway: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lienzo: 1 unidad del diseño = --u. Escritorio mide 1920 de ancho; celular, 1080. */
.pagina {
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.lienzo {
  --u: calc(100cqw / 1920);
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: var(--fuente-raleway);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
.pagina-movil {
  max-width: none;
}
.lienzo-movil {
  --u: calc(100cqw / 1080);
}
@media (max-width: 1023px) {
  .solo-escritorio {
    display: none;
  }
}
@media (min-width: 1024px) {
  .solo-movil {
    display: none;
  }
}

/* Reinicios: especificidad de elemento (le gana a main.css por orden) y menor que cualquier clase nuestra */
:where(.lienzo, .menu-movil) :is(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
:where(.lienzo, .menu-movil) :is(a, a:hover, a:focus, a:visited) {
  color: inherit;
  text-decoration: none;
  outline-offset: 2px;
}
:where(.lienzo, .menu-movil) :is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(.lienzo, .menu-movil) :is(button) {
  font: inherit;
  color: inherit;
}
:where(.lienzo, .menu-movil) :is(img, svg) {
  max-width: none;
  vertical-align: baseline;
}
:where(.lienzo, .menu-movil) * {
  box-sizing: border-box;
}

/* Encabezado */
.encabezado {
  background: var(--negro);
  font-family: var(--fuente-sistema);
  z-index: 5;
}
.barra-superior span,
.barra-superior a {
  white-space: nowrap;
  line-height: 1.2;
}
.linea {
  background: rgba(255, 255, 255, 0.55);
}
.separador {
  background: rgba(255, 255, 255, 0.7);
}
.linea-fuerte {
  background: #fff;
}
.enlace-tenue {
  transition: opacity 0.3s;
}
.enlace-tenue:hover {
  opacity: 0.7;
}
.menu-escritorio {
  display: flex;
  justify-content: flex-end;
}
.menu-enlace {
  white-space: nowrap;
  line-height: 1.2;
  padding-bottom: calc(var(--u) * 10);
  background-image: linear-gradient(#fff, #fff);
  background-size: 0% calc(var(--u) * 2);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  transition: background-size 0.5s var(--curva);
}
.menu-enlace:hover,
.menu-enlace.activo {
  background-size: 100% calc(var(--u) * 2);
}

/* Submenús (Nosotros): aparecen al pasar el cursor o al navegar con teclado */
.menu-grupo {
  position: relative;
  display: flex;
}
.menu-flecha {
  display: inline-block;
  margin-left: calc(var(--u) * 5);
  vertical-align: middle;
  opacity: 0.7;
  transition: transform 0.4s var(--curva);
}
.con-submenu:hover .menu-flecha,
.con-submenu:focus-within .menu-flecha {
  transform: rotate(180deg);
}
.con-submenu::after {
  /* puente invisible para no perder el submenú al bajar el cursor */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(var(--u) * 26);
}
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: calc(var(--u) * 240);
  padding: calc(var(--u) * 12) 0;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--u) * 12);
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(var(--u) * 6));
  transition:
    opacity 0.3s var(--curva),
    transform 0.45s var(--curva),
    visibility 0.3s;
}
.con-submenu:hover .submenu,
.con-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(var(--u) * 20));
}
.submenu-enlace {
  display: block;
  padding: calc(var(--u) * 9) calc(var(--u) * 24);
  white-space: nowrap;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  transition:
    background 0.25s,
    color 0.25s;
}
.submenu-enlace:hover,
.submenu-enlace:focus-visible,
.submenu-enlace.activo {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
/* El encabezado suelto de las páginas PHP no debe recortar el submenú y va encima del contenido viejo */
.sg-marco[data-marco='encabezado'] {
  position: relative;
  z-index: 999;
}
.sg-marco[data-marco='encabezado'] .lienzo {
  overflow: visible;
}

/* Menú de celular */
.hamburguesa {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hamburguesa span {
  position: absolute;
  left: calc(var(--u) * 15);
  right: calc(var(--u) * 15);
  background: #fff;
  border-radius: 2px;
}
.menu-movil {
  overflow-y: auto;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 5rem 10vw 2.5rem;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-family: var(--fuente-sistema);
  line-height: 1.3;
}
.menu-movil[hidden] {
  display: none;
}
/* centrado vertical con márgenes automáticos: si el menú no cabe (celulares chicos), se desplaza sin cortarse arriba */
.menu-movil > ul {
  margin-top: auto;
}
.menu-movil > .menu-pie {
  margin-bottom: auto;
}
.menu-movil ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.menu-movil li a {
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.menu-movil li a.activo {
  font-weight: 700;
}
.menu-movil .menu-sub {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.5rem 0 0.2rem 1.1rem;
}
.menu-movil .menu-sub a {
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  opacity: 0.78;
}
.menu-movil .menu-sub a.activo {
  opacity: 1;
}
.menu-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 1rem;
}
.menu-redes {
  display: flex;
  gap: 1.4rem;
}
.menu-cerrar {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-cerrar span {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: 50%;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.menu-cerrar span + span {
  transform: rotate(-45deg);
}

/* Pie */
.pie {
  background: #000;
  font-family: var(--fuente-raleway);
}
.pie-centro {
  text-align: center;
}
.pie-tenue {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
}
.pie-titulo {
  font-weight: 700;
}
.pie-enlace {
  transition: opacity 0.3s;
}
.pie-enlace:hover {
  opacity: 0.7;
}
.pie-red {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pie-contacto-titulo {
  font-family: var(--fuente-sistema);
  font-weight: 700;
}
.pie-contacto {
  display: flex;
  align-items: flex-start;
  font-family: var(--fuente-sistema);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2;
}
.pie-whatsapp-icono svg {
  transition: color 0.3s;
}
.pie-whatsapp-icono:hover svg {
  color: #25d366;
}
.subir {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3a3a3a;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.4s var(--curva);
}
.subir:hover {
  background: #555;
  transform: translateY(calc(var(--u) * -4));
}

@media (prefers-reduced-motion: reduce) {
  .lienzo *,
  .menu-movil * {
    transition-duration: 0.01ms !important;
  }
}