/* Páginas de centro (/sant-joan-despi/, /sant-feliu-de-llobregat/)
   Índice: cabecera con placa (.chead) · bienvenida (.cwel) · cifras (.cfacts) · instalaciones (.cfac, .cpano, .cgal) ·
   espacios SF (.cspaces) · horario (.chours + parrilla .tt) · cómo llegar (.carrive, .cmap, .csteps) ·
   enlace al otro centro (.csib) */

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sec-pad { padding-block: clamp(48px, 10vw, 150px); }

/* ============ CABECERA DEL CENTRO ============ */
.chead { padding-bottom: clamp(36px, 6vw, 80px); }
.chead .phead__shade { background: linear-gradient(180deg, rgba(9, 9, 8, .9), rgba(9, 9, 8, .74) 45%, rgba(9, 9, 8, .96)); }
.chead__in { display: grid; gap: 26px; }
.chead__main { min-width: 0; }
.chead .phead__title { font-size: clamp(3.1rem, 13.5vw, 9.4rem); }
.chead .phead__intro { margin-top: 0; }
.chead__plate { display: grid; grid-template-columns: auto auto 1fr; align-items: end; column-gap: 8px; }
.chead__no { align-self: start; padding-top: .5em; font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; color: var(--copper-hi); }
.chead__num {
  font: 800 clamp(6.5rem, 30vw, 19rem)/.76 var(--f-display);
  letter-spacing: -.035em;
  background: var(--gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .04em;
}
.chead__street { align-self: end; padding: 0 0 .4em 10px; font: 700 .84rem/1.35 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(228, 225, 223, .86); }
.chead__foot { display: grid; gap: 22px; }
.chead__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.chead__ctas .btn--ghost .ico { color: var(--copper-hi); }

@media (min-width: 1000px) {
  /* Sant Joan Despí: título a la izquierda, placa monumental en columna derecha */
  .chead--sjd .chead__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main plate" "foot plate"; column-gap: clamp(40px, 6vw, 110px); row-gap: 34px; }
  .chead--sjd .chead__main { grid-area: main; }
  .chead--sjd .chead__plate { grid-area: plate; align-self: end; grid-template-columns: auto auto; grid-template-rows: auto auto; }
  .chead--sjd .chead__street { grid-column: 1 / -1; padding: 18px 0 0; border-top: 1px solid var(--line-dark); margin-top: 14px; }
  .chead--sjd .chead__foot { grid-area: foot; grid-template-columns: minmax(0, 46ch) auto; align-items: end; justify-content: space-between; }
  /* Sant Feliu: título a todo el ancho, banda inferior con placa a la izquierda */
  .chead--sf .chead__in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "main main" "plate foot"; column-gap: clamp(40px, 6vw, 96px); row-gap: 40px; }
  .chead--sf .chead__main { grid-area: main; }
  .chead--sf .chead__plate { grid-area: plate; padding-top: 28px; border-top: 1px solid var(--line-dark); }
  .chead--sf .chead__num { font-size: clamp(8rem, 13vw, 13rem); }
  .chead--sf .chead__plate { align-self: end; }
  .chead--sf .chead__street { max-width: 24ch; }
  .chead--sf .chead__foot { grid-area: foot; align-self: stretch; align-content: space-between; padding-top: 28px; border-top: 1px solid var(--line-dark); gap: 26px; }
  .chead--sf .phead__intro { max-width: 44ch; }
  .chead--sf .phead__roof, .chead--sf .phead__floor { width: min(100%, 980px); }
}
@media (max-width: 699px) {
  .chead { padding-bottom: 32px; }
  .chead__in { gap: 20px; }
  .chead__num { font-size: clamp(5.4rem, 30vw, 8rem); }
  .chead__street { font-size: .74rem; }
  .chead__ctas .btn { flex: 1 1 100%; justify-content: space-between; }
  .chead__ctas .btn--ghost { display: none; }   /* la barra inferior ya ofrece «Truca» */
}

/* ============ BIENVENIDA (SJD) ============ */
.cwel { padding-block: clamp(48px, 10vw, 150px) clamp(40px, 7vw, 100px); background: var(--paper); }
.cwel__in { display: grid; gap: 36px; }
.cwel__lead { margin-top: 24px; max-width: 34ch; font: 500 clamp(1.15rem, 2vw, 1.5rem)/1.42 var(--f-body); color: var(--ink); }
.cwel__aside { margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--copper); font: italic 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--f-serif); color: var(--copper-deep); }
.cwel__photo .house__frame { aspect-ratio: 16 / 11; box-shadow: var(--shadow-deep); }
.cwel__photo figcaption, .cpano figcaption, .cspaces__photo figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font: 700 .78rem/1.3 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cpano figcaption b, .cspaces__photo figcaption b { flex: none; white-space: nowrap; color: var(--copper-deep); letter-spacing: .08em; }
@media (min-width: 1000px) {
  .cwel__in { grid-template-columns: 1fr minmax(0, .95fr); gap: clamp(48px, 6vw, 110px); align-items: end; }
  .cwel__photo .house__frame { aspect-ratio: 4 / 3.4; }
}

/* Cifras del centro */
.cfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.cfacts div { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line); }
.cfacts div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
.cfacts dt { font: 800 clamp(1.7rem, 4.4vw, 3.4rem)/.95 var(--f-display); text-transform: uppercase; color: var(--ink); }
.cfacts dd { margin-top: 8px; font-size: .86rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 1000px) {
  .cfacts { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .cfacts div, .cfacts div:nth-child(2n) { padding: 24px 22px 24px 0; border-left: 0; }
  .cfacts > div:nth-child(n+2) { padding-left: 22px; border-left: 1px solid var(--line); }
  .cfacts dt { font-size: clamp(2rem, 3.2vw, 2.9rem); white-space: nowrap; }
}

/* ============ INSTALACIONES (SJD, oscuro) ============ */
.cfac { padding-block: clamp(48px, 10vw, 150px); }
.cfac--dark { background: var(--carbon); color: var(--bone); }
.cfac--dark .sec-head__intro { color: rgba(228, 225, 223, .78); }
.cpano { margin-top: clamp(36px, 5vw, 64px); }
.cpano .house__frame { aspect-ratio: 16 / 10; }
@media (min-width: 1000px) { .cpano .house__frame { aspect-ratio: 21 / 9; } }
.cfac--dark .cpano figcaption { color: var(--muted-dark); }
.cfac--dark .cpano figcaption b { color: var(--copper-hi); }
.cgal { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 4vw, 56px); }
.cgal__item { min-width: 0; }
.cgal__img { overflow: hidden; aspect-ratio: 4 / 5; background: var(--carbon-2); }
.cgal__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cgal__item:hover .cgal__img img { transform: scale(1.04); }
.cgal figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: .88rem; line-height: 1.35; color: var(--muted-dark); }
.cgal figcaption b { font: 700 .78rem/1 var(--f-display); letter-spacing: .14em; color: var(--copper-hi); }
@media (min-width: 1000px) {
  .cgal--sjd { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .cgal--sjd .cgal__item--a { grid-column: 1 / span 5; }
  .cgal--sjd .cgal__item--b { grid-column: 6 / span 7; margin-top: clamp(40px, 6vw, 96px); }
  .cgal--sjd .cgal__item--b .cgal__img { aspect-ratio: 16 / 12; }
  .cgal--sjd .cgal__item--c, .cgal--sjd .cgal__item--d, .cgal--sjd .cgal__item--e { grid-column: span 4; }
  .cgal--sjd .cgal__item--c .cgal__img, .cgal--sjd .cgal__item--d .cgal__img, .cgal--sjd .cgal__item--e .cgal__img { aspect-ratio: 1; }
  .cgal--sjd .cgal__item--d { margin-top: clamp(24px, 3vw, 48px); }
}
/* Móvil/tableta: tira deslizable para que la página no sea kilométrica */
@media (max-width: 999px) {
  .cgal { grid-auto-flow: column; grid-auto-columns: min(74vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--copper) transparent; }
  .cgal__item { scroll-snap-align: start; }
}

/* ============ ESPACIOS (SF) ============ */
.cspaces { padding-block: clamp(48px, 10vw, 150px); background: var(--paper); }
.cspaces__grid { display: grid; gap: 36px; margin-top: clamp(32px, 5vw, 64px); }
.cspaces__photo .house__frame { aspect-ratio: 16 / 11; box-shadow: var(--shadow-deep); }
.cspaces__list { border-top: 1px solid var(--line); }
.cspace { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cspace__n { padding-top: 6px; font: 700 .82rem/1 var(--f-display); letter-spacing: .12em; color: var(--copper-deep); }
.cspace h3 { font: 800 clamp(1.5rem, 3.4vw, 2.3rem)/.95 var(--f-display); text-transform: uppercase; }
.cspace p { margin-top: 8px; font-size: .95rem; color: var(--muted); }
.cspace .cspace__note { font-size: .8rem; }
.cspace__img { aspect-ratio: 1; overflow: hidden; }
.cspace__img img { width: 100%; height: 100%; object-fit: cover; }
.cspace__img--none { display: grid; place-items: center; padding: 6px; border: 1px dashed rgba(29, 28, 26, .35); font-size: .72rem; text-align: center; color: var(--muted); }
.cspace__img--none .pending small { display: block; margin: 4px 0 0; }
@media (min-width: 1000px) {
  .cspaces__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 110px); align-items: start; }
  .cspaces__photo { position: sticky; top: calc(var(--header-h) + 28px); }
  .cspaces__photo .house__frame { aspect-ratio: 4 / 4.6; }
  .cspace { grid-template-columns: 44px minmax(0, 1fr) 150px; gap: 24px; padding: 28px 0; }
}

/* ============ HORARIO DEL CENTRO ============ */
.chours { padding-block: clamp(48px, 10vw, 150px); background: var(--bone); }
.chours .h2 { font-size: clamp(2.9rem, 10vw, 6.4rem); }
.chours .sec-head__intro { display: grid; gap: 16px; max-width: 48ch; }
.chours__sum { border-top: 1px solid var(--line); }
.chours__sum div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.chours__sum dt { font-size: .88rem; }
.chours__sum dd { font: 800 1.12rem/1 var(--f-display); letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
.chours__foot { display: grid; gap: 18px; margin-top: 28px; align-items: center; }
.chours__rate { display: grid; gap: 6px; max-width: 58ch; padding: 16px 18px; background: var(--paper); border-left: 3px solid var(--copper); font-size: .92rem; color: var(--muted); }
.chours__ratecap { font: 700 .76rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.chours__rate .pending { margin-right: 6px; color: var(--ink); font-weight: 600; }
.chours__src { font-size: .82rem; color: var(--muted); }
.chours__foot .chip { justify-self: start; }
@media (min-width: 1000px) { .chours__foot { grid-template-columns: minmax(0, 1fr) auto auto; gap: 28px; } }

/* --- Parrilla: tabla (escritorio) + días plegables (móvil) --- */
.tt { margin-top: clamp(32px, 5vw, 60px); }
.tt__c { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 9px 4px; font: 700 .8rem/1.05 var(--f-display); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.tt__c sup { margin-left: 2px; font-size: .9em; }
.tt__c--wod { background: var(--copper-btn); color: #fff; }
.tt__c--min { background: var(--ink); color: var(--bone); }
.tt__c--open { box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .32); color: var(--muted); }
.tt__c--spec { background: #fff; box-shadow: inset 3px 0 0 var(--copper); padding-left: 12px; color: var(--ink); }
.tt__none { color: rgba(29, 28, 26, .3); }
.tt__desk { display: none; }
@media (min-width: 900px) {
  .tt__desk { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 17vw, 240px); gap: clamp(16px, 2vw, 28px); align-items: start; }
  .tt__mob { display: none; }
}
.tt__table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(20, 20, 18, .45); }
.tt__table th, .tt__table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tt__table thead th { padding-block: 14px 12px; font: 800 1rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); }
.tt__table thead th:first-child { width: 72px; font-size: .74rem; letter-spacing: .16em; color: var(--muted); }
.tt__table thead abbr { display: none; text-decoration: none; }
.tt__table tbody th { font: 800 .98rem/1 var(--f-display); letter-spacing: .04em; color: var(--copper-deep); white-space: nowrap; }
.tt__table td { font-size: 0; }
.tt__table td > * { margin: 2px 4px 2px 0; }
.tt__table tbody tr:hover { background: rgba(177, 99, 22, .06); }
@media (max-width: 1199px) {
  .tt__table thead abbr { display: inline; }
  .tt__table thead th span { display: none; }
  .tt__table th, .tt__table td { padding: 6px 5px; }
  .tt__c { padding: 4px 5px 3px; font-size: .66rem; letter-spacing: .04em; }
  .tt__c--spec { padding-left: 7px; }
}
.tt__side { display: grid; gap: 16px; }
.tt__sidecap { font: 700 .76rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--copper-deep); }
.tt__we { padding: 16px; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(20, 20, 18, .45); }
.tt__we h4 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 800 1rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.tt__we li, .tt__day li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tt__we li:last-child { border-bottom: 0; }
.tt__we b, .tt__day li b { min-width: 46px; font: 800 .95rem/1 var(--f-display); letter-spacing: .04em; color: var(--copper-deep); }
.tt__off { font-size: .88rem; color: var(--muted); }
/* Móvil: un día por desplegable */
.tt__mob { border-top: 2px solid var(--ink); }
.tt__day { border-bottom: 1px solid var(--line); }
.tt__day summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 52px; padding: 14px 34px 12px 0; list-style: none; cursor: pointer; position: relative; }
.tt__day summary::-webkit-details-marker { display: none; }
.tt__day summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: translateY(-75%) rotate(45deg); transition: transform .3s var(--ease); }
.tt__day[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.tt__day summary span { font: 800 1.4rem/1 var(--f-display); text-transform: uppercase; }
.tt__day summary small { font-size: .8rem; color: var(--muted); }
.tt__day ul { padding: 0 0 14px; }
.tt__day li > span { display: flex; flex-wrap: wrap; gap: 4px; }
.tt__day li:last-child { border-bottom: 0; }
.tt__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: .84rem; color: var(--muted); }
.tt__legend li { display: flex; align-items: center; gap: 8px; }
.tt__legend .tt__c { width: 22px; min-height: 14px; padding: 0; }
.tt__extra { margin-top: 12px; font-size: .9rem; color: var(--ink); }
.tt__note { margin-top: 8px; font-size: .84rem; color: var(--muted); }

/* ============ CÓMO LLEGAR ============ */
.carrive { padding-block: clamp(48px, 10vw, 150px); background: var(--paper); }
.carrive__in { display: grid; gap: 36px; }
.carrive__h { font-size: clamp(2.6rem, 9vw, 5.6rem); }
.cmap__frame { aspect-ratio: 4 / 3.4; background: var(--stone); box-shadow: var(--shadow-deep); }
.cmap__roof { width: 100%; margin-bottom: 10px; }
.cmap__roof path { stroke-width: 2px; }
.cmap__frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.02); }
.cmap__note { margin-top: 12px; font-size: .78rem; color: var(--muted); }
.cmap__note a { display: inline-flex; align-items: center; min-height: 44px; }
.csteps { margin-top: 28px; border-top: 1px solid var(--line); }
.csteps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.csteps__n { padding-top: 3px; font: 800 1.1rem/1 var(--f-display); letter-spacing: .06em; color: var(--copper-deep); }
.csteps h3 { font: 800 1.35rem/1 var(--f-display); text-transform: uppercase; }
.csteps p { margin-top: 6px; color: var(--muted); }
.csteps .tlink { min-height: 44px; margin-top: 2px; color: var(--copper-deep); }
.csteps .tlink .ico { width: 18px; }
.cchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cchips .chip .pending-tag { margin-left: 2px; }
@media (min-width: 1000px) {
  .carrive__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: center; }
  .cmap__frame { aspect-ratio: 4 / 4.2; }
  .carrive--flip .carrive__map { order: 2; }
}
@media (max-width: 999px) { .carrive__map { order: 2; } }
/* Variante oscura (Sant Feliu) */
.carrive--flip { background: var(--carbon); color: var(--bone); }
.carrive--flip .eyebrow { color: var(--muted-dark); }
.carrive--flip .eyebrow b { color: var(--copper-hi); }
.carrive--flip .h2 { color: var(--bone); }
.carrive--flip .h2 em { color: var(--copper-hi); }
.carrive--flip .csteps, .carrive--flip .csteps li { border-color: var(--line-dark); }
.carrive--flip .csteps__n, .carrive--flip .csteps .tlink { color: var(--copper-hi); }
.carrive--flip .csteps p, .carrive--flip .cmap__note { color: rgba(228, 225, 223, .74); }
.carrive--flip .cmap__note a { color: var(--bone); }
.carrive--flip .chip { border-color: rgba(228, 225, 223, .32); color: var(--bone); }
.carrive--flip .chip .ico { color: var(--copper-hi); }
.carrive--flip .chip--solid { background: var(--copper-btn); border-color: var(--copper-btn); }
.carrive--flip .chip:hover { background: var(--bone); color: var(--ink); }
.carrive--flip .cmap__frame { background: var(--carbon-2); }

/* ============ EL OTRO CENTRO ============ */
.csib { background: var(--bone); border-top: 1px solid var(--line); }
.csib__link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 3vw, 40px); row-gap: 6px; padding-block: clamp(28px, 5vw, 56px); text-decoration: none; }
.csib__num { grid-row: 1 / span 2; font: 800 clamp(4.6rem, 14vw, 10rem)/.8 var(--f-display); letter-spacing: -.03em; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csib__txt { font: 800 clamp(1.7rem, 5vw, 3.6rem)/.95 var(--f-display); text-transform: uppercase; }
.csib__txt small { display: block; margin-bottom: 10px; font: 700 .78rem/1.2 var(--f-display); letter-spacing: .16em; color: var(--copper-deep); }
.csib__go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 .9rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-deep); }
.csib__go .ico { transition: transform .45s var(--ease); }
.csib__link:hover .csib__go .ico { transform: translateX(6px); }
.csib__link:hover .csib__txt { color: var(--copper-deep); }
@media (min-width: 1000px) {
  .csib__link { grid-template-columns: auto minmax(0, 1fr) auto; }
  .csib__num { grid-row: auto; }
}

/* ============ Compactación móvil ============ */
@media (max-width: 699px) {
  .cwel, .cfac, .cspaces, .chours, .carrive { padding-block: 48px; }
  .cwel__in { gap: 28px; }
  .cwel__lead { margin-top: 18px; }
  .cfacts dt { font-size: 1.6rem; }
  .cfacts dd { font-size: .78rem; }
  .cspace { grid-template-columns: 28px minmax(0, 1fr) 76px; gap: 10px; padding: 16px 0; }
  .cspace p { font-size: .88rem; }
  .csteps li { grid-template-columns: 34px minmax(0, 1fr); padding: 14px 0; }
  .csteps h3 { font-size: 1.2rem; }
  .csteps p { font-size: .92rem; }
  .cchips .chip { flex: 1 1 auto; justify-content: center; }
  .chours__sum dd { font-size: 1rem; }
}
@media (max-width: 999px) { .cfacts:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cfacts:has(> div:nth-child(3):last-child) > div:nth-child(n+2) { padding-left: 12px; border-left: 1px solid var(--line); } }