:root {
  --tinta: #041a1b;
  --tinta-2: #0a2527;
  --papel: #f3f5f2;
  --blanco: #fff;
  --acento: #39d5c7;
  --acento-texto: #0a6f69;
  --gris-oscuro: #9db0b0;
  --gris-claro: #4e5e5f;
  --linea-oscuro: rgba(243, 245, 242, .16);
  --linea-claro: rgba(4, 26, 27, .16);
  --cuerpo: 'Manrope', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ancho: 1320px;
  --lateral: clamp(20px, 4vw, 56px);
  --hueco: clamp(72px, 10vw, 148px);
}
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--acento); color: var(--tinta); }
.saltar:focus { top: 16px; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lateral); }
.etiqueta { display: flex; align-items: center; gap: 10px; font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.etiqueta i { flex: none; width: 7px; height: 7px; background: var(--acento); }
.claro .etiqueta i { background: var(--acento-texto); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: .8px solid transparent; border-radius: 8px; font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:active { transform: translateY(1px); }
.btn-grande { min-height: 54px; padding-inline: 26px; font-size: 13px; }
.btn-acento { background: var(--acento); color: var(--tinta); }
.btn-acento:hover { background: #6be5da; }
.btn-claro { background: var(--papel); color: var(--tinta); }
.btn-claro:hover { background: var(--blanco); }
.btn-tinta { background: var(--tinta); color: var(--papel); }
.btn-tinta:hover { background: var(--tinta-2); }
.btn-linea { border-color: rgba(243, 245, 242, .5); color: var(--papel); }
.btn-linea:hover { background: var(--papel); color: var(--tinta); }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.nav { position: fixed; z-index: 50; top: max(16px, env(safe-area-inset-top, 0px)); left: 50%; display: flex; align-items: center; gap: 28px; width: min(1240px, calc(100% - 32px)); padding: 10px 10px 10px 22px; transform: translateX(-50%); border: .8px solid var(--linea-oscuro); border-radius: 12px; background: rgba(4, 26, 27, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav-logo { flex: none; }
.nav-logo img { width: 190px; height: auto; }
.nav-links { display: flex; gap: 22px; margin-inline: auto; }
.nav-links a { padding-block: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; opacity: .86; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-acciones { display: flex; flex: none; gap: 6px; }
.nav-boton { display: none; width: 44px; height: 44px; padding: 0; border: .8px solid var(--linea-oscuro); border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.nav-boton span { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: currentColor; transition: transform .2s; }
.nav-boton[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-boton[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.pie { border-top: .8px solid var(--linea-oscuro); }
.pie-dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 32px; }
.pie img { width: 230px; height: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie nav a { display: inline-flex; align-items: center; min-height: 44px; color: #c3d0cf; font-size: 14px; text-decoration: none; }
.pie nav a:hover { color: var(--papel); }
.barra-movil { display: none; }
@media (max-width: 1120px) {
  .nav-tel { display: none; }
  .nav-links { gap: 16px; }
}

@media (max-width: 960px) {
  .nav { gap: 12px; padding-left: 16px; }
  .nav-acciones { margin-left: auto; }
  .nav-boton { display: block; }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px; border: .8px solid var(--linea-oscuro); border-radius: 12px; background: var(--tinta); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
  .nav-links.abierto { visibility: visible; opacity: 1; transform: none; }
  .nav-links a { display: flex; align-items: center; min-height: 48px; font-size: 17px; }
  .nav-links a + a { border-top: .8px solid var(--linea-oscuro); }
  .nav { background: rgba(4, 26, 27, .86); }
  .barra-movil { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: .8px solid var(--linea-oscuro); background: rgba(4, 26, 27, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .barra-movil .btn { min-height: 50px; }
}

@media (max-width: 480px) {
  .nav-logo img { width: 142px; }
  .nav .btn-acento { display: none; }
  .grupo-botones .btn { flex: 1 1 100%; }
}

.pie-derechos { margin-top: 10px; color: var(--gris-oscuro); font-size: 13px; }
.admin-bar .nav { top: 48px; }
.wa-float { position: fixed; z-index: 45; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px; border-radius: 8px; background: var(--acento); color: var(--tinta); font: 500 12px var(--mono); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.wa-float:hover { background: #6be5da; }
.wa-float svg { width: 22px; height: 22px; }
#tcn-cookie-banner { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: none; border-top: .8px solid var(--linea-oscuro); background: var(--tinta-2); color: var(--papel); }
#tcn-cookie-banner.tcn-cookie-show { display: block; }
.tcn-cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; max-width: var(--ancho); margin-inline: auto; padding: 16px var(--lateral); }
.tcn-cookie-inner p { font-size: 14px; line-height: 1.45; }
.tcn-cookie-inner a { color: var(--acento); }
.tcn-cookie-btns { display: flex; flex: none; gap: 8px; }
.tcn-cookie-btn { min-height: 44px; padding: 10px 16px; border: .8px solid rgba(243, 245, 242, .5); border-radius: 8px; background: none; color: var(--papel); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tcn-cookie-btn--accept { border-color: var(--acento); background: var(--acento); color: var(--tinta); }
@media (max-width: 960px) {
  .wa-float { display: none; }
  .tcn-cookie-inner { flex-direction: column; align-items: stretch; }
  .tcn-cookie-btn { flex: 1; }
}

/* Pie: enlaces de la web */
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 0 20px; width: 100%; padding-top: 16px; border-top: .8px solid var(--linea-oscuro); }
.pie nav a { padding: 0; border: 0; font-family: var(--cuerpo); font-weight: 400; white-space: normal; }
.pie nav a:hover { border: 0; }
.wa-float { animation: none; }

/* Mapa: espera a que el visitante lo active */
.mapa-espera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; min-height: inherit; padding: 24px; background: var(--tinta-2); color: var(--papel); font: 400 15px/1.5 var(--cuerpo); text-align: center; }
.mapa-espera p { max-width: 38ch; margin: 0; }
.mapa-espera a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acento); font-size: 14px; text-underline-offset: 3px; }
.pie-cookies { min-height: 44px; padding: 0; border: 0; background: none; color: #c3d0cf; font: 400 14px var(--cuerpo); cursor: pointer; }
.pie-cookies:hover { color: var(--papel); }
