/* ===========================================================
   BLOOM STUDIO — hoja de estilos compartida (multi-página)
   Dirección visual: editorial rosa/frambuesa sobre piedra cálida,
   con el arco (arco de espejo, arco de cortina) como firma
   recurrente — el mismo detalle arquitectónico real del estudio.
   =========================================================== */

:root{
  --rose:#D62A61;
  --rose-deep:#8F1B45;
  --rose-soft:#F6D9E2;
  --stone:#F7F1E7;
  --stone-deep:#EEE1CF;
  --ink:#241C19;
  --ink-soft:#5B4F48;
  --gold:#C79A56;
  --line:rgba(36,28,25,0.14);
  --line-light:rgba(255,255,255,0.28);
  --header-h:84px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:110px;}
body{
  margin:0; background:var(--stone); color:var(--ink);
  font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.eyebrow{font-size:12px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; color:var(--rose);}
::selection{background:var(--rose); color:#fff;}
:focus-visible{outline:2px solid currentColor; outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.skip-link{position:absolute; left:16px; top:-60px; z-index:200; background:#fff; color:var(--rose-deep); padding:10px 18px; border-radius:999px; font-weight:800; font-size:13px; text-decoration:none; transition:top .2s ease;}
.skip-link:focus{top:12px;}

/* ---------- NAV ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:80; transition:background .35s ease, box-shadow .35s ease;}
header.solid{background:#FF4684; backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(0,0,0,0.1);}
nav.wrap{display:flex; align-items:center; height:var(--header-h);}
.nav-side{display:flex; align-items:center; flex:1;}
.nav-side-left{justify-content:flex-end;}
.nav-side-right{justify-content:flex-start; gap:20px;}
.nav-login{position:relative; flex:none; width:160px; height:44px; margin-left:auto; overflow:hidden;}
.brand-center{flex-shrink:0; margin:0 32px; display:flex; align-items:center;}
.brand-logo{height:24px; width:auto; display:block; transition:filter .3s ease;}
header.solid .brand-logo{filter:brightness(0) invert(1);}
#navlinks{display:none;}
.navlinks, .navlinks-side{display:flex; align-items:center; gap:30px; font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
.navlinks a, .navlinks-side a{text-decoration:none; color:#fff; position:relative; padding-bottom:5px; transition:color .3s ease;}
.navlinks a::after, .navlinks-side a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:currentColor; transition:width .25s ease;}
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after,
.navlinks-side a:hover::after, .navlinks-side a[aria-current="page"]::after{width:100%;}
.cta-ghost{
  background:transparent; color:inherit; border:1.5px solid currentColor; padding:11.5px 24px; border-radius:999px;
  font-weight:700; font-size:13px; letter-spacing:0.03em; cursor:pointer; text-decoration:none; display:inline-block;
}
.navburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:14px 11px; margin-right:-11px;}
.navburger span{width:22px; height:2px; background:#fff; transition:background .3s ease;}

/* ---------- HOME HERO (página de inicio) ---------- */
.hero{
  position:relative; aspect-ratio:2200/1352; display:flex; align-items:center;
  background-color: var(--ink);
  background-image:
    linear-gradient(100deg, rgba(28,14,19,0.82) 0%, rgba(28,14,19,0.5) 42%, rgba(28,14,19,0.18) 68%, rgba(28,14,19,0.1) 100%),
    linear-gradient(0deg, rgba(20,10,14,0.55) 0%, rgba(20,10,14,0) 45%),
    url('Nerea-hero.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, auto, contain;
  overflow:hidden;
}
.hero-content{position:relative; z-index:2; max-width:720px; margin:-50px auto 0; padding:100px 0 50px; text-align:center;}
.hero h1{font-size:clamp(46px,6.2vw,80px); line-height:1.05; font-style:italic; color:#fff; font-weight:500;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:28px;}
.scroll-cue{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,0.7); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;}
.scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,0.5); animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:scaleY(0.2); opacity:0;} 50%{opacity:1;} 100%{transform:scaleY(1); opacity:0;}}

/* ---------- PAGE HERO (banner de cada subpágina) ---------- */
.page-hero{position:relative; padding:calc(var(--header-h) + 44px) 0 36px; overflow:hidden; isolation:isolate; text-align:center;}
.page-hero .wrap{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;}
.page-hero .eyebrow{margin-bottom:8px;}
.page-hero--404{min-height:70vh; display:flex; align-items:center; justify-content:center;}
.page-hero h1{font-size:clamp(34px,5vw,58px); font-style:italic; text-wrap:balance;}
.page-hero p{margin-top:16px; max-width:560px; font-size:15.5px; line-height:1.75;}
.page-hero--servicios,
.page-hero--reservar,
.page-hero--experiences,
.page-hero--tarifas,
.page-hero--tienda,
.page-hero--404,
.page-hero--legal{
  background:#B21F57;
  color:#fff;
  box-shadow:0 1px 0 #B21F57; /* evita la línea clara que aparece entre bloques por redondeo de píxeles */
}
.page-hero--servicios .eyebrow, .page-hero--servicios p,
.page-hero--reservar .eyebrow, .page-hero--reservar p,
.page-hero--experiences .eyebrow, .page-hero--experiences p,
.page-hero--tarifas .eyebrow, .page-hero--tarifas p,
.page-hero--tienda .eyebrow, .page-hero--tienda p,
.page-hero--404 .eyebrow, .page-hero--404 p,
.page-hero--legal .eyebrow, .page-hero--legal p{
  color:rgba(255,255,255,0.85);
}
/* ---------- STRIP ---------- */
.strip{background:var(--ink); color:var(--stone); padding:15px 0; position:relative; z-index:2; overflow:hidden;}
.strip-track{display:flex; width:max-content; animation:strip-scroll 32s linear infinite;}
.strip-group{display:flex; align-items:center; gap:14px; font-size:13px; letter-spacing:0.03em; flex-shrink:0; padding-right:14px; text-transform:uppercase; font-weight:700;}
.strip .dot{width:4px; height:4px; border-radius:50%; background:var(--rose); flex-shrink:0;}
@keyframes strip-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.strip:hover .strip-track{animation-play-state:paused;}

/* ---------- SECTION GENERIC ---------- */
section{position:relative; padding:96px 0;}
/* Subpáginas: el contenido arranca justo bajo el título y cierra con un margen moderado antes del pie */
.page-hero + section{padding:36px 0 72px;}

/* ---------- WIDGET SLOT (marcador para widgets reales de bsport) ---------- */
.widget-slot{
  border:1.5px dashed var(--line); border-radius:20px; padding:56px 28px;
  text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6; background:rgba(255,255,255,0.5);
}
.widget-slot strong{display:block; color:var(--ink); font-family:'Fraunces',serif; font-size:17px; font-style:italic; margin-bottom:8px; font-weight:500;}
.widget-slot--onrose{border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85);}
.widget-slot--onrose strong{color:#fff;}
.widget-block + .widget-block{margin-top:20px;}
.widget-block h4{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; font-weight:800; color:#fff; margin-bottom:12px;}

/* ---------- HOME: sections index (teaser grid a las subpáginas) ---------- */
#secciones{background:#B21F57; color:#fff; padding:72px 0;}
#secciones .eyebrow{font-family:'Manrope',sans-serif; color:rgba(255,255,255,0.85); text-align:center; text-wrap:balance; margin:0 auto 16px; max-width:620px;}
#secciones .section-lead{max-width:620px; margin:0 auto 40px; text-align:center; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,0.85); text-wrap:pretty;}
.svc-index{list-style:none; margin:0; padding:0; text-align:center;}
.svc-index a{position:relative; display:inline-block; padding:2px 0; text-decoration:none; color:rgba(255,255,255,0.58); transition:color .25s ease;}
.svc-index-name{font-family:'Fraunces',serif; font-style:italic; font-weight:500; letter-spacing:-0.01em; font-size:clamp(46px,11vw,132px); line-height:1.04;}
.svc-index li:first-child a{color:#fff;}
.svc-index:hover li:first-child a{color:rgba(255,255,255,0.58);}
.svc-index li a:hover, .svc-index li a:focus-visible, .svc-index li:first-child a:hover{color:#fff;}
@media (hover:none){ .svc-index a, .svc-index:hover li:first-child a{color:#fff;} }
@media (max-width:860px){
  .svc-index-name{font-size:clamp(44px,14vw,110px);}
}

/* ---------- SERVICIOS ---------- */
#servicios{background:#B21F57; color:#fff;}
.svc-rows{display:grid; gap:72px;}
.svc-row{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.svc-row--reverse .svc-photo{order:2;}
.svc-row--reverse .svc-card{order:1;}
.svc-photo{
  aspect-ratio:4/3; border-radius:20px; background-size:cover; background-position:center;
  background-color:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  color:rgba(255,255,255,0.55); font-size:12.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
}
.svc-card{display:block; text-decoration:none; color:inherit; border-radius:14px;}
.svc-card:hover .svc-arrow{transform:translateX(4px);}
.svc-cta{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#F6D9E2; margin-top:8px; letter-spacing:0.02em;}
.svc-arrow{transition:transform .2s ease;}
.svc-card h2{font-size:22px; margin:16px 0 8px; color:#fff;}
.svc-card p{margin:0; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,0.85);}

/* ---------- RESERVAR ---------- */
#reservar{background:#B21F57; color:#fff;}
.reservar-note{display:flex; gap:14px; align-items:flex-start; margin-top:26px; font-size:13.5px; color:rgba(255,255,255,0.85); line-height:1.6;}

/* ---------- EXPERIENCES ---------- */
#experiences{background:#B21F57; color:#fff;}
.coming-soon{margin:0; text-align:center; font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(22px,3vw,30px); line-height:1.4; color:rgba(255,255,255,0.9);}

/* ---------- TARIFAS ---------- */
#tarifas{background:#B21F57; color:#fff; text-align:center;}

/* ---------- TIENDA ---------- */
#tienda{background:#B21F57; color:#fff;}

/* ---------- FOOTER ---------- */
footer{background:#FF4684; color:#fff; padding:70px 0 40px;}
.foot-grid{display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.25);}
.foot-col{flex:1; min-width:180px;}
.foot-col-map{display:flex; justify-content:flex-start;}
.foot-col-estudio{display:flex; justify-content:flex-end;}
.foot-logo-mid{flex-shrink:0; align-self:center; margin-top:24px;}
.foot-logo-mid img{height:clamp(70px,9.5vw,116px); width:auto; filter:brightness(0) invert(1);}
.foot-title{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; margin:0 0 16px; color:rgba(255,255,255,0.9);}
footer ul{list-style:none; padding:0; margin:0; font-size:14px; line-height:2.2; color:rgba(255,255,255,0.92);}
footer ul a{text-decoration:none; color:inherit;}
footer ul a:hover{text-decoration:underline;}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:24px; padding-top:24px; font-size:12px; color:rgba(255,255,255,0.85);
}
.foot-social{display:flex; gap:10px; margin-top:20px;}
.foot-social a{width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.55); display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.foot-social a:hover, .foot-social a:focus-visible{background:#fff; color:#B21F57; border-color:#fff;}
.foot-social svg{width:17px; height:17px;}
.foot-link-btn{background:none; border:0; padding:0; margin:0; font:inherit; color:#fff; text-decoration:underline; cursor:pointer;}
.foot-map{width:100%; max-width:300px;}
.map-embed{position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:rgba(255,255,255,0.16);}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.map-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; text-align:center; color:#fff;}
.map-placeholder address{font-style:normal; font-size:13px; line-height:1.55; color:rgba(255,255,255,0.92);}
.map-btn{font:700 12px 'Manrope',sans-serif; letter-spacing:0.03em; padding:12px 20px; border-radius:999px; border:0; background:#fff; color:#B21F57; cursor:pointer; margin-top:2px;}
.map-btn:hover{background:var(--rose-soft);}
.foot-map-note{margin:10px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.9);}
.foot-map-note a{color:#fff; font-weight:700;}

/* ---------- BANNER DE COOKIES ---------- */
.cookie-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:300; max-width:780px; margin:0 auto; background:#fff; color:var(--ink); border-radius:20px; box-shadow:0 18px 50px rgba(36,28,25,0.3); padding:22px 24px; display:flex; gap:18px 24px; align-items:center; flex-wrap:wrap;}
.cookie-banner p{margin:0; flex:1 1 320px; font-size:13.5px; line-height:1.6; color:var(--ink-soft);}
.cookie-banner p strong{display:block; color:var(--ink); font-size:15px; margin-bottom:2px;}
.cookie-banner a{color:var(--rose-deep); font-weight:700;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-btn{font:700 13px 'Manrope',sans-serif; letter-spacing:0.03em; padding:14px 26px; border-radius:999px; border:1.5px solid #B21F57; background:#B21F57; color:#fff; cursor:pointer;}
.cookie-btn:hover{background:#8F1B45; border-color:#8F1B45;}

/* ---------- PÁGINAS LEGALES ---------- */
.legal-table-wrap{overflow-x:auto; margin:8px 0 24px;}
.legal-table{width:100%; border-collapse:collapse; font-size:14px; line-height:1.6;}
.legal-table th, .legal-table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.legal-table th{background:rgba(36,28,25,0.04); font-weight:800; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;}

@media (max-width:980px){
  .svc-row, .svc-row--reverse{grid-template-columns:1fr;}
  .svc-row--reverse .svc-photo, .svc-row--reverse .svc-card{order:initial;}
  .svc-rows{gap:48px;}
}
/* Menú compacto (hamburguesa) hasta 1140px: con el botón de sesión ya no cabe el menú completo a ambos lados del logo */
@media (max-width:1140px){
  .navlinks-side{display:none;}
  .nav-side{flex:none;}
  .nav-side-right{margin-left:auto; gap:8px;}
  .brand-center{margin:0;}
  #navlinks{display:flex;}
  .navlinks{position:fixed; top:0; right:0; height:100vh; width:78%; max-width:340px;
    background:var(--ink); color:#fff; flex-direction:column; justify-content:center; gap:30px;
    padding:40px; transform:translateX(100%); visibility:hidden; transition:transform .35s ease, visibility 0s linear .35s; z-index:90;}
  .navlinks.open{transform:translateX(0); visibility:visible; transition:transform .35s ease, visibility 0s;}
  .navlinks a{color:#fff; font-size:16px;}
  .navburger{display:flex;}
}
@media (max-width:860px){
  /* Móvil y tablet vertical: la foto llena el hero y se enfoca en Nerea (torso en el ~36% horizontal) */
  .hero{
    aspect-ratio:auto;
    min-height:560px; min-height:min(max(560px,82svh),920px);
    align-items:flex-end;
    background-image:
      linear-gradient(180deg, rgba(20,10,14,0.5) 0%, rgba(20,10,14,0.06) 28%, rgba(20,10,14,0.3) 52%, rgba(20,10,14,0.86) 100%),
      url('Nerea-hero.jpeg');
    background-position: center, 36% center;
    background-size: auto, cover;
  }
  .hero-content{margin:0 auto; padding:120px 24px 104px;}
  .hero h1{font-size:clamp(38px,10.5vw,56px);}
  .hero-ctas{margin-top:24px;}
}
@media (max-width:620px){
  .foot-grid{flex-direction:column; gap:32px;}
  .legal-table-wrap{overflow:visible;}
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{display:block; width:100%;}
  .legal-table thead{display:none;}
  .legal-table tr{padding:14px 0; border-bottom:1px solid var(--line);}
  .legal-table td{padding:5px 0; border:0;}
  .legal-table td::before{content:attr(data-label); display:block; font-size:11.5px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);}
  .foot-col-estudio{order:1; justify-content:flex-start;}
  .foot-logo-mid{order:2;}
  .foot-col-map{order:3;}
  /* Los widgets de bsport necesitan ~340px de ancho: en móvil ocupan casi todo el ancho de pantalla */
  #reservar .wrap, #tarifas .wrap{padding-left:4px; padding-right:4px;}
  #reservar h2, #tarifas h2, .reservar-note, .widget-slot{margin-left:24px; margin-right:24px;}
  .cookie-banner{left:10px; right:10px; bottom:10px; padding:18px;}
  .cookie-actions{width:100%;}
  .cookie-btn{flex:1;}
}
@media (max-width:400px){ .nav-login{width:128px;} }