/* ==========================================================
   DEPORTUR · estilos de la web
   Colores y tipografía: variables de :root (arriba del todo).
   Para cambiar el rojo de marca, toca solo --rojo.
   ========================================================== */

/* Layout: bandas a todo el ancho, contenido centrado a 1280px, fotos grandes y mucho aire */
:root {
  --rojo: #D7261E;          /* rojo del logo (PENDIENTE: HEX oficial) */
  --rojo-hover: #B01E18;
  --verde: #2F6B3A;         /* verde Naturaran */
  --verde-claro: #9AB040;   /* verde de las letras de NATURARAN */
  --tierra: #C9A27A;        /* tono de las montañas del logo */
  --papel: #F3F1EC;
  --papel-2: #E7E3D9;
  --tarjeta: #FFFFFF;
  --tinta: #16181A;
  --tinta-2: #4A4843;
  --linea: #DAD5C9;
  --noche: #141617;
  --noche-texto: #F3F1EC;
  --noche-texto-2: #C9C5BC;
  --pend-fondo: #FFF1D6;
  --pend-texto: #7A4B00;
  --pend-borde: #C98A1B;

  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1280px;
  --radio: 10px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #141617; --papel-2: #1C1F20; --tarjeta: #212526;
    --tinta: #EEECE6; --tinta-2: #B5B1A8; --linea: #33383A;
    --rojo: #E8463E; --rojo-hover: #F06A62; --verde: #2E6A3A;
    --pend-fondo: #3A2C10; --pend-texto: #F5CF85;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #141617; --papel-2: #1C1F20; --tarjeta: #212526;
  --tinta: #EEECE6; --tinta-2: #B5B1A8; --linea: #33383A;
  --rojo: #E8463E; --rojo-hover: #F06A62; --verde: #2E6A3A;
  --pend-fondo: #3A2C10; --pend-texto: #F5CF85;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: 17px; line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  line-height: .95; margin: 0; text-wrap: balance;
}
.h-xl { font-size: clamp(52px, 8vw, 112px); line-height: .9; }
.h-l  { font-size: clamp(42px, 5.5vw, 72px); }
.h-m  { font-size: clamp(34px, 4vw, 52px); }
.h-s  { font-size: 30px; line-height: 1; }
p { margin: 0; }
.antetitulo { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); }
.lead { font-size: 20px; max-width: 34em; }
.suave { color: var(--tinta-2); }
.prosa { display: flex; flex-direction: column; gap: 16px; max-width: 36em; }

/* ---------- contenedores ---------- */
.banda { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.wrap { max-width: var(--ancho); margin: 0 auto; padding-block: 104px; }
.wrap--corto { padding-block: 56px; }
.wrap--sin-arriba { padding-top: 0; }
.fila { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.fila > * { min-width: 0; }
.fila--arriba { align-items: flex-start; }
.col { flex: 1 1 420px; }
.col--estrecha { flex: 1 1 300px; }
.col--ancha { flex: 2 1 520px; }
.cabecera-seccion { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.cabecera-seccion p { max-width: 26em; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.banda--oscura { background: var(--noche); color: var(--noche-texto); }
.banda--oscura .suave { color: var(--noche-texto-2); }
.banda--gris { background: var(--papel-2); }
.banda--verde { background: var(--verde); color: #F3F1EC; }
.banda--verde .antetitulo { color: #DDE7A6; }
.banda--blanca { background: var(--tarjeta); }

/* ---------- aviso ---------- */
.aviso { background: var(--noche); color: var(--noche-texto); font-size: 14px; text-align: center; padding-block: 9px; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: #F3F1EC; color: #16181A; border-bottom: 1px solid #DAD5C9;
}
.cabecera__in { max-width: var(--ancho); margin: 0 auto; padding-block: 8px; display: flex; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img { height: 64px; width: auto; }
.menu { display: flex; gap: 4px; flex-grow: 1; font-weight: 500; align-items: center; }
.menu > a, .menu__grupo > button {
  text-decoration: none; padding: 10px 12px; border-radius: 6px; font: inherit; font-weight: 500;
  background: none; border: 0; color: inherit; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
}
.menu > a:hover, .menu__grupo > button:hover { color: #B01E18; }
.menu a[aria-current="page"], .menu__grupo.activo > button { color: #B01E18; box-shadow: inset 0 -3px 0 #D7261E; border-radius: 0; }
.menu__grupo { position: relative; }
.menu__grupo > button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 8px; }
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 8px; display: none; flex-direction: column;
}
.menu__grupo:hover .submenu, .menu__grupo:focus-within .submenu, .menu__grupo.abierto .submenu { display: flex; }
.submenu a { text-decoration: none; padding: 10px 12px; border-radius: 6px; display: flex; flex-direction: column; }
.submenu a:hover { background: #F3F1EC; }
.submenu small { color: #6A665E; font-size: 13px; }
.idiomas { display: flex; gap: 8px; font-size: 14px; font-weight: 600; }
.idiomas a { text-decoration: none; color: #6A665E; padding: 10px 2px; }
.idiomas a[aria-current="true"] { color: #16181A; }
.cabecera .btn--rojo { flex-shrink: 0; }
.btn-menu {
  display: none; margin-left: auto; background: none; border: 1px solid #16181A; color: #16181A;
  border-radius: 6px; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer;
}
@media (max-width: 1080px) {
  .marca img { height: 52px; }
  .btn-menu { display: inline-flex; align-items: center; }
  .menu, .idiomas, .cabecera .btn--rojo { display: none; }
  .cabecera.abierta .cabecera__in { flex-wrap: wrap; }
  .cabecera.abierta .menu { display: flex; flex-direction: column; align-items: stretch; width: 100%; order: 3; gap: 0; }
  .cabecera.abierta .menu > a, .cabecera.abierta .menu__grupo > button { width: 100%; font-size: 20px; }
  .cabecera.abierta .submenu { display: flex; position: static; box-shadow: none; background: transparent; padding: 0 0 0 16px; }
  .cabecera.abierta .menu__grupo > button::after { display: none; }
  .cabecera.abierta .idiomas { display: flex; order: 4; }
  .cabecera.abierta .btn--rojo { display: inline-flex; order: 5; width: 100%; margin-bottom: 12px; }
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 6px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn--rojo { background: var(--rojo); color: #fff; }
.btn--rojo:hover { background: var(--rojo-hover); }
.cabecera .btn--rojo { background: #D7261E; }
.btn--claro { background: #F3F1EC; color: #16181A; }
.btn--claro:hover { background: #fff; }
.btn--borde { border-color: currentColor; background: transparent; color: inherit; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- fotos ---------- */
.foto { position: relative; overflow: hidden; background: var(--papel-2); max-width: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.r-45 { aspect-ratio: 4 / 5; }
.r-43 { aspect-ratio: 4 / 3; }
.r-21 { aspect-ratio: 2 / 1; }
.redondo { border-radius: var(--radio); }
.pie-foto { font-size: 13px; color: var(--tinta-2); margin-top: 8px; }

/* ---------- pendientes ---------- */
.pend {
  display: inline-block; background: var(--pend-fondo); color: var(--pend-texto); border: 1px dashed var(--pend-borde);
  border-radius: 4px; padding: 2px 8px; font-family: var(--f-texto); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; line-height: 1.4;
}
html.sin-pendientes .pend { display: none; }

/* ---------- hero con foto ---------- */
.hero { position: relative; color: #F3F1EC; background: #2B3A35; display: flex; align-items: flex-end; min-height: min(78vh, 760px); }
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,10,.78) 0%, rgba(8,10,10,.35) 45%, rgba(8,10,10,.05) 75%); }
.hero .wrap { position: relative; width: 100%; padding-block: 160px 72px; }
.hero .antetitulo { color: #F3F1EC; }
.hero .lead { margin-top: 24px; }
.hero .botones { margin-top: 32px; }
.hero--bajo { min-height: min(58vh, 560px); }
.hero--verde .hero__foto::after { background: linear-gradient(to top, rgba(18,46,24,.85) 0%, rgba(18,46,24,.35) 50%, rgba(18,46,24,.05) 80%); }
.migas { font-size: 14px; margin-bottom: 20px; opacity: .9; }
.migas a { color: inherit; }

/* ---------- datos rápidos ---------- */
.datos { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dato__k { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--noche-texto-2); }
.dato__v { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1.1; margin-top: 4px; }

/* ---------- tarjetas de actividad ---------- */
.actividad { display: flex; flex-direction: column; background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: inherit; }
.actividad .foto img { transition: transform .5s ease; }
.actividad:hover .foto img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .actividad .foto img { transition: none; } }
.actividad__txt { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.actividad__pie { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--rojo); }
.actividad--verde .antetitulo, .actividad--verde .actividad__pie { color: var(--verde); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid currentColor; border-radius: 999px; padding: 5px 13px; font-size: 14px; font-weight: 500; }
.enlace { font-weight: 600; text-decoration: none; }
.enlace:hover { color: var(--rojo); }

/* ---------- mosaico de fotos ---------- */
.mosaico { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr; }
.mosaico .foto:first-child { grid-row: span 2; }
.mosaico .foto { border-radius: var(--radio); min-height: 220px; }
@media (max-width: 760px) { .mosaico { grid-template-columns: 1fr 1fr; } .mosaico .foto:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4/3; } }

/* ---------- pasos ---------- */
.pasos { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
.paso { display: flex; flex-direction: column; gap: 10px; }
.paso__num { font-family: var(--f-display); font-weight: 800; font-size: 40px; color: var(--rojo); line-height: 1; }
.paso h3 { font-family: var(--f-texto); text-transform: none; font-size: 20px; font-weight: 600; line-height: 1.3; }

/* ---------- packs ---------- */
.pack { background: var(--tarjeta); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pack ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pack .btn { margin-top: auto; align-self: flex-start; }

/* ---------- públicos ---------- */
.publico { background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.publico__txt { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.publico .enlace { margin-top: auto; color: var(--rojo); }

/* ---------- preguntas ---------- */
.faq { flex: 2 1 520px; min-width: 0; }
.faq details { border-top: 1px solid currentColor; }
.faq details:last-child { border-bottom: 1px solid currentColor; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-size: 21px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 30px; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 22px; color: var(--tinta-2); max-width: 40em; display: flex; flex-direction: column; gap: 10px; }
.faq-grupo + .faq-grupo { margin-top: 56px; }
.faq-grupo h2 { margin-bottom: 16px; }

/* ---------- reservar / contacto ---------- */
.reservar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.reservar a { background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; border: 2px solid transparent; }
.reservar a:hover { border-color: var(--rojo); }
.reservar .foto { aspect-ratio: 16 / 9; }
.reservar__txt { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; }
.reservar strong { font-family: var(--f-display); font-size: 26px; text-transform: uppercase; line-height: 1; }
.reservar span { color: var(--rojo); font-weight: 600; margin-top: 6px; }
.contacto { display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.contacto b { font-weight: 600; user-select: all; }
.copiar { font: inherit; font-size: 14px; background: none; border: 1px solid var(--linea); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--tinta-2); margin-left: 8px; min-height: 32px; }
.ficha-contacto { background: var(--tarjeta); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.ficha-contacto h3 { font-family: var(--f-texto); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); font-weight: 600; }

.cta-final { background: var(--rojo); color: #fff; border-radius: 12px; padding: clamp(28px, 5vw, 56px); }
.cta-final .fila { justify-content: space-between; gap: 32px; }

/* ---------- pie ---------- */
.pie { background: var(--noche); color: var(--noche-texto-2); }
.pie a { color: var(--noche-texto); }
.pie__grito { font-family: var(--f-display); font-weight: 800; font-size: 44px; color: var(--noche-texto); line-height: 1; }
.pie__cols { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pie__cols > div { display: flex; flex-direction: column; gap: 6px; }
.pie h3 { font-family: var(--f-texto); font-size: 13px; letter-spacing: .12em; color: var(--noche-texto-2); font-weight: 600; margin-bottom: 6px; }
.pie__logos { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.pie__logos img { height: 56px; width: auto; background: #F3F1EC; border-radius: 8px; padding: 6px 10px; }
.pie__base { border-top: 1px solid #2C3133; margin-top: 48px; padding-top: 20px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.mosaico--3 { grid-template-columns: 3fr 2fr; }
@media (max-width: 760px) { .mosaico--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { [style*="position: sticky"] { position: static !important; } }

/* ===== Firma ANÜK · v2 ===== */
.anuk-sig{--anuk-sig-heart:#C60000;--anuk-sig-word:#C60000;display:inline-flex;align-items:center;gap:.45em;color:inherit;text-decoration:none;white-space:nowrap;line-height:1.3}
.anuk-sig__t{opacity:.65}
.anuk-sig__logo{height:1.05em;width:auto;display:block;flex:none}
.anuk-sig__logo path{fill:currentColor}
.anuk-sig__w{color:var(--anuk-sig-word);font-weight:700;display:inline-flex;align-items:center;min-height:1.3em}
.anuk-sig__h{width:1em;height:.92em;fill:var(--anuk-sig-heart);animation:anukSigBeat 2.4s ease-in-out infinite;flex:none}
.anuk-sig[data-mode="type"] .anuk-sig__w::after{content:"";display:inline-block;width:2px;height:1em;background:var(--anuk-sig-word);margin-left:2px;animation:anukSigBlink 1s steps(1) infinite}
.anuk-sig[data-mode="scramble"] .anuk-sig__w{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em}
.anuk-sig[data-mode="roll"] .anuk-sig__w{overflow:hidden}
.anuk-sig[data-mode="roll"] .anuk-sig__w>*{animation:anukSigUp .5s cubic-bezier(.16,1,.3,1) both}
.anuk-sig[data-mode="tap"]{cursor:pointer}
.anuk-sig[data-mode="tap"] .anuk-sig__w>*{animation:anukSigPop .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes anukSigBeat{0%,60%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(.96)}36%{transform:scale(1.12)}}
@keyframes anukSigBlink{50%{opacity:0}}
@keyframes anukSigUp{from{transform:translateY(110%)}to{transform:none}}
@keyframes anukSigPop{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.anuk-sig__h,.anuk-sig__w::after,.anuk-sig__w>*{animation:none!important}}
/* ===== fin firma ===== */
/* En el pie oscuro: palabra en claro para que se lea; el corazón sigue en rojo */
.pie .anuk-sig{--anuk-sig-word:#F3F1EC}
.pie .anuk-sig .anuk-sig__t{opacity:.75}