/* =========================================================
   CAP Maragall — micrositio informativo independiente
   CSS ligero, sin frameworks, mobile-first.
   ========================================================= */

:root{
  /* Color: papel cálido + verde clínico (evita el terracota/crema genérico) */
  --bg:        #F5F4F0;
  --paper:     #FFFFFF;
  --ink:       #1E2024;
  --ink-soft:  #4A525C;
  --navy-900:  #1B3A5C;
  --navy-700:  #2C5480;
  --navy-100:  #E3E9F0;
  --amber:     #C87F2A;
  --amber-dark:#9C611E;
  --red:       #A13B2B;
  --red-100:   #F5E4DF;
  --line:      #D9D5CA;

  /* Tipografía: pila de sistema, cero peticiones externas */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 10px;
  --maxw: 960px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--navy-900); text-decoration-thickness: 1px; }
a:hover{ color: var(--amber-dark); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
h1,h2,h3{ font-family: var(--font-display); color: var(--navy-900); line-height:1.2; margin: 0 0 .5em; }
h1{ font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2{ font-size: clamp(1.25rem, 3vw, 1.5rem); margin-top: 2em; }
h3{ font-size: 1.1rem; margin-top: 1.4em; }
p{ margin: 0 0 1em; }
ul,ol{ padding-left: 1.3em; }
li{ margin-bottom: .4em; }
strong{ color: var(--navy-900); }

/* ---------- Barra superior de contacto rápido ---------- */
.quickbar{
  background: var(--navy-900);
  color: #fff;
  font-size: .85rem;
}
.quickbar .wrap{
  padding: 7px 20px;
}
.quickbar a{ color:#fff; text-decoration:none; }
.quickbar a:hover{ color: #FDE7CE; text-decoration: underline; }
.quickbar strong{ color:#fff; }

/* ---------- Cabecera y navegación ---------- */
header.site{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
header.site .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  font-family: var(--font-display);
  font-weight:bold; font-size: 1.25rem;
  color: var(--navy-900); text-decoration:none;
}
.brand small{ display:block; font-family: var(--font-body); font-size:.68rem; color: var(--ink-soft); font-weight: normal; letter-spacing:.03em; }

nav.primary{ display:none; }
nav.primary ul{ list-style:none; margin:0; padding:0; display:flex; gap: 1.1em; flex-wrap:wrap; }
nav.primary a{
  text-decoration:none; color: var(--ink); font-size:.95rem; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  color: var(--navy-900); border-bottom-color: var(--amber);
}

/* Menú móvil con <details>, sin JavaScript */
details.mobile-nav{ }
details.mobile-nav summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.5em;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; font-size:.95rem; color: var(--navy-900); font-weight:bold;
}
details.mobile-nav summary::-webkit-details-marker{ display:none; }
details.mobile-nav summary::after{ content:"☰"; margin-left:auto; }
details.mobile-nav[open] summary::after{ content:"✕"; }
details.mobile-nav .menu-panel{
  list-style:none; margin: 8px 0 0; padding: 6px;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
}
details.mobile-nav .menu-panel li a{
  display:block; padding: 10px 8px; text-decoration:none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
details.mobile-nav .menu-panel li:last-child a{ border-bottom:none; }
details.mobile-nav .menu-panel a[aria-current="page"]{ color: var(--navy-900); font-weight:bold; }

@media (min-width: 760px){
  nav.primary{ display:block; }
  details.mobile-nav{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding: 34px 0 10px; }
.hero .lead{ font-size: 1.08rem; color: var(--ink-soft); max-width: 62ch; }
.breadcrumbs{ font-size:.82rem; color: var(--ink-soft); margin-bottom: .8em; }
.breadcrumbs a{ color: var(--ink-soft); }
.breadcrumbs [aria-current]{ color: var(--navy-900); }

/* ---------- Ficha técnica / tarjetas de datos ---------- */
.factbox{
  background: var(--navy-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 1.4em 0;
}
.factbox h2{ margin-top:0; font-size:1.05rem; }
.factbox dl{ margin:0; display:grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.factbox dt{ color: var(--ink-soft); font-size:.85rem; }
.factbox dd{ margin:0; font-weight:bold; }

.card-grid{
  display:grid; gap: 14px;
  grid-template-columns: 1fr;
  margin: 1.4em 0;
}
@media (min-width: 620px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
.card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; text-decoration:none; color: var(--ink); display:block;
}
.card:hover{ border-color: var(--navy-700); }
.card .eyebrow{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--amber-dark); margin-bottom:.3em; }
.card h3{ margin: 0 0 .3em; font-size:1.02rem; }
.card p{ margin:0; font-size:.92rem; color: var(--ink-soft); }

/* ---------- Panel de planta (directorio del edificio) ---------- */
.floor-panel{
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; margin: 1.4em 0; background: var(--paper);
}
.floor-panel .floor{
  display:grid; grid-template-columns: 64px 1fr auto;
  align-items:center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.floor-panel .floor:last-child{ border-bottom:none; }
.floor-panel .floor .num{
  font-family: var(--font-display); font-weight:bold; font-size:1.3rem;
  color: var(--navy-900); text-align:center;
  background: var(--navy-100); border-radius: 6px; padding: 6px 0;
}
.floor-panel .floor .name{ font-weight:bold; }
.floor-panel .floor .sub{ display:block; font-size:.85rem; color: var(--ink-soft); font-weight:normal; }
.floor-panel .floor .tel{ font-weight:bold; white-space:nowrap; color: var(--navy-900); text-decoration:none; }
.floor-panel .floor .tel:hover{ color: var(--amber-dark); }

/* ---------- Mapa embebido ---------- */
.map-embed{
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-top: 1em;
}
.map-embed iframe{ display:block; }
.map-caption{ font-size:.88rem; color: var(--ink-soft); margin-top: .5em; }

/* ---------- Fotos del edificio ---------- */
.photo-grid{
  display:grid; gap: 14px; grid-template-columns: 1fr;
  margin: 1.2em 0 1.6em;
}
@media (min-width: 620px){ .photo-grid{ grid-template-columns: 1fr 1fr; } }
.photo-grid figure{ margin:0; }
.photo-grid img{
  width:100%; height:auto; display:block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.photo-grid figcaption{
  font-size:.82rem; color: var(--ink-soft); margin-top:.4em;
}

/* ---------- Comparativa INSS vs TGSS (elemento de firma) ---------- */
.compare-grid{
  display:grid; gap: 16px; grid-template-columns: 1fr;
  margin: 1.4em 0;
}
@media (min-width: 680px){ .compare-grid{ grid-template-columns: 1fr 1fr; } }
.compare-card{
  border-radius: var(--radius); padding: 18px 20px;
  border: 1px solid var(--line); background: var(--paper);
}
.compare-card.yes{ border-top: 5px solid var(--navy-900); }
.compare-card.no{ border-top: 5px solid var(--amber); }
.compare-card h3{ margin-top:0; font-size: 1.05rem; }
.compare-card .place{ display:block; font-size:.82rem; color: var(--ink-soft); font-weight:normal; margin-top:2px; }
.compare-card ul{ margin: .6em 0 0; padding-left: 1.2em; }
.compare-card li{ margin-bottom: .35em; }

/* ---------- Tablas ---------- */
table{ width:100%; border-collapse: collapse; margin: 1.2em 0; font-size:.95rem; }
caption{ text-align:left; font-weight:bold; color: var(--navy-900); margin-bottom:.4em; }
th,td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
thead th{ background: var(--navy-100); color: var(--navy-900); }
tbody tr:hover{ background: #FBFAF6; }

/* ---------- Cajas de aviso ---------- */
.callout{ border-radius: var(--radius); padding: 16px 18px; margin: 1.4em 0; border:1px solid var(--line); }
.callout.tip{ background: var(--navy-100); border-color: var(--navy-700); }
.callout.urgent{ background: var(--red-100); border-color: var(--red); }
.callout.urgent h2, .callout.urgent h3{ color: var(--red); }
.callout h2, .callout h3{ margin-top:0; }
.callout.note{
  background: #FCF3E7; border-color: var(--amber); border-width: 1px 1px 1px 4px;
  padding: 14px 18px;
}
.callout.note p{ margin:0; }
.callout + .callout.note,
.callout .callout.note{ margin-top: 0; margin-bottom: 1.2em; }

/* ---------- Botones / CTA ---------- */
.btn{
  display:inline-block; background: var(--navy-900); color:#fff !important;
  padding: 12px 20px; border-radius: 8px; text-decoration:none; font-weight:bold;
  font-size:.95rem;
}
.btn:hover{ background: var(--amber-dark); }
.btn.secondary{ background: transparent; color: var(--navy-900) !important; border: 2px solid var(--navy-900); }
.btn.secondary:hover{ border-color: var(--amber-dark); color: var(--amber-dark) !important; }
.cta-row{ display:flex; gap: 10px; flex-wrap:wrap; margin: 1.2em 0; }

/* ---------- Botones de teléfono (clic-para-llamar) ---------- */
/* Todo número de teléfono del sitio se muestra como botón táctil, pensado para móvil */
.tel-btn{
  display:inline-flex; align-items:center; gap:7px;
  background: var(--navy-900); color:#fff !important;
  padding: 8px 15px; border-radius: 999px;
  font-weight:bold; font-size:.92rem; line-height:1.2;
  text-decoration:none; white-space:nowrap;
}
.tel-btn::before{ content:"📞"; font-size:.9em; }
.tel-btn:hover{ background: var(--amber-dark); }

.tel-btn.on-dark{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.45);
  color:#fff !important;
}
.tel-btn.on-dark:hover{ background:#fff; color: var(--navy-900) !important; }

.tel-btn.on-light{
  background: var(--paper);
  border: 1px solid var(--navy-700);
  color: var(--navy-900) !important;
}
.tel-btn.on-light:hover{ background: var(--navy-900); color:#fff !important; }

/* Botones grandes de emergencia (061 / 112): objetivo táctil amplio para móvil */
.emergency-row{
  display:grid; gap: 12px; grid-template-columns: 1fr;
  margin: 1.2em 0;
}
@media (min-width: 520px){ .emergency-row{ grid-template-columns: 1fr 1fr; } }
.tel-btn.emergency{
  flex-direction: column;
  justify-content:center;
  border-radius: 14px;
  padding: 18px 18px 16px;
  font-size: 1.7rem;
  gap: 2px;
}
.tel-btn.emergency::before{ font-size: 1.15rem; margin-bottom: 2px; }
.tel-btn.emergency.e061{ background: var(--navy-900); }
.tel-btn.emergency.e061::before{ content: "📞"; }
.tel-btn.emergency.e061:hover{ background: var(--amber-dark); }
.tel-btn.emergency.e112{ background: var(--red); }
.tel-btn.emergency.e112::before{ content: "🚨"; }
.tel-btn.emergency.e112:hover{ background: #7E2E22; }
.tel-btn.emergency .sub{ display:block; font-size:.68rem; font-weight:normal; letter-spacing:.04em; text-transform:uppercase; opacity:.9; }

/* ---------- Enlaces contextuales ---------- */
.context-links{
  background: var(--paper); border:1px dashed var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 2.2em 0 1em;
}
.context-links h2{ margin-top:0; font-size: 1rem; }
.context-links ul{ margin:0; padding-left: 1.1em; }

/* ---------- Pie de página ---------- */
footer.site{
  background: var(--navy-900); color: #DCEAE6; margin-top: 3em;
  padding: 32px 0 20px; font-size:.88rem;
}
footer.site a{ color:#fff; }
footer.site .foot-grid{
  display:grid; gap: 20px; grid-template-columns: 1fr;
  margin-bottom: 20px;
}
@media (min-width: 620px){ footer.site .foot-grid{ grid-template-columns: repeat(3,1fr); } }
footer.site h2{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin: 0 0 .6em; }
footer.site ul{ list-style:none; padding:0; margin:0; }
footer.site li{ margin-bottom:.4em; }
.disclaimer{
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 16px; color:#B9CFC9; font-size:.8rem;
}
.disclaimer strong{ color:#FFD9A8; }

/* Utilidad para lectores de pantalla */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}