/* Fichas del Puerto — base: reset, design tokens, site chrome */

:root {
  /* palette: porcelana + azul marino + un único acento rojo cálido */
  --porcelana: #f6f3ed;
  --porcelana-tinte: #eee9e0;
  --superficie: #ffffff;
  --marino-900: #0c1d33;
  --marino-800: #102542;
  --marino-700: #1a3557;
  --marino-600: #27456c;
  --tinta: #16233a;
  --apagado: #55627a;
  --apagado-claro: #a9b4c6;
  --linea: #ddd6ca;
  --tinte-fuerte: #e4ddd1;
  --linea-marino: rgba(246, 243, 237, .18);
  --fuerte: var(--marino-900);
  --acento: #c4362c;
  --acento-oscuro: #a52b22;

  /* escala de espaciado 4/8 */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 80px;
  --e10: 96px;

  --ancho: 1160px;
  --ancho-texto: 68ch;
  --muesca: 16px;
  --tipo: "Helvetica Neue", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background-color: var(--porcelana);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--marino-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); }
h3 { font-size: 1.18rem; line-height: 1.3; }
h4 { font-size: 1rem; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.15em; }
li + li { margin-top: var(--e2); }
strong { font-weight: 700; color: var(--fuerte); }
/* sobre fondos oscuros el resalte se aclara en lugar de perderse */
.edad, .cabecera, .migas, .pie, .cookies, .marco--marino { --fuerte: #ffffff; }
table { border-collapse: collapse; width: 100%; }

.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e5); }
.prosa { max-width: var(--ancho-texto); }
.prosa > * + * { margin-top: var(--e4); }
.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- enlaces: subrayado animado que entra al pasar el cursor ---------- */
a { color: inherit; }
.lnk {
  position: relative;
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
}
.lnk::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.lnk:hover::after, .lnk:focus-visible::after { transform: scaleX(1); }
.lnk--claro { color: var(--porcelana); }
:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lnk::after { transition: none; }
}

/* ---------- superficie con esquinas cortadas y borde (forma característica) ---------- */
.marco {
  --m: var(--muesca);
  background: var(--linea);
  padding: 1px;
  clip-path: polygon(var(--m) 0, 100% 0, 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, 0 100%, 0 var(--m));
}
.marco > .marco__in {
  background: var(--superficie);
  height: 100%;
  clip-path: polygon(calc(var(--m) - 1px) 0, 100% 0, 100% calc(100% - var(--m) + 1px), calc(100% - var(--m) + 1px) 100%, 0 100%, 0 calc(var(--m) - 1px));
}
.marco--marino { background: var(--linea-marino); }
.marco--marino > .marco__in { background: var(--marino-800); color: var(--porcelana); }
.marco--acento { background: var(--acento); }

/* ---------- botones: relleno sólido en el acento, forma con muesca ---------- */
.btn {
  --m: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 13px 24px;
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--m) 0, 100% 0, 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, 0 100%, 0 var(--m));
}
.btn:hover { background: var(--acento-oscuro); }
.btn--ancho { width: 100%; }
.btn--chico { padding: 10px 18px; font-size: .875rem; }

/* ---------- etiquetas: minúsculas versalitas, muy compactas ---------- */
.etq {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  padding: 4px 8px;
  background: var(--tinte-fuerte);
  color: var(--marino-700);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.etq--acento { background: var(--acento); color: #fff; }
.etq--marino { background: var(--marino-800); color: var(--porcelana); }
.etq--jurisdiccion { background: #dde3ec; color: var(--marino-800); }
.etq-fila { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ---------- puntuación: cinco estrellas con medias ---------- */
.estrellas {
  position: relative;
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--linea);
  white-space: nowrap;
}
.estrellas::before { content: "★★★★★"; }
.estrellas > i {
  position: absolute;
  inset: 0;
  width: var(--relleno, 100%);
  overflow: hidden;
  color: var(--acento);
  font-style: normal;
}
.estrellas > i::before { content: "★★★★★"; }
.nota {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--marino-900);
}

/* ---------- aviso de edad: barra fina fijada arriba en todas las páginas ---------- */
.edad {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--marino-900);
  color: var(--porcelana);
  font-size: .78rem;
  line-height: 1.4;
}
.edad__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e4);
  padding: 7px var(--e5);
}
.edad__mas { font-weight: 800; color: #fff; letter-spacing: .02em; }
.edad p { color: var(--apagado-claro); }

/* ---------- cabecera enmarcada con regla inferior y línea de migas ---------- */
.cabecera { background: var(--marino-900); color: var(--porcelana); }
.cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linea-marino);
}
.marca { display: inline-flex; align-items: center; gap: var(--e3); text-decoration: none; }
.marca svg { width: 34px; height: 34px; flex: none; }
.marca__txt { display: flex; flex-direction: column; }
.marca__nombre {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.marca__sub {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado-claro);
}
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); }
.menu a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--porcelana);
  text-decoration: none;
  padding: 4px 0;
}
.menu a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--acento); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--acento); }
.migas {
  padding: 9px var(--e5);
  font-size: .74rem;
  color: var(--apagado-claro);
  background: var(--marino-800);
}
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: var(--e2); color: rgba(246,243,237,.4); }
.migas li + li { margin-top: 0; }
.migas a { text-decoration: none; color: var(--porcelana); }
.migas a:hover { text-decoration: underline; }
.migas [aria-current="page"] { color: var(--apagado-claro); }

/* ---------- recursos oficiales: tarjetas lado a lado al final del contenido ---------- */
.recursos { padding: var(--e9) 0; }
.recursos__cab { max-width: 64ch; margin-bottom: var(--e6); }
.recursos__cab p { margin-top: var(--e3); color: var(--apagado); }
.recursos__grid { display: grid; gap: var(--e5); grid-template-columns: repeat(3, 1fr); }
.recurso { height: 100%; }
.recurso__in { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); }
.recurso h3 { font-size: 1.05rem; }
.recurso p { font-size: .92rem; color: var(--apagado); }
.recurso__pie { margin-top: auto; padding-top: var(--e3); }
.recurso__tel {
  font-size: 1.32rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--marino-900);
  letter-spacing: -.01em;
}

/* ---------- pie de página ---------- */
.pie { background: var(--marino-900); color: var(--apagado-claro); padding-top: var(--e8); }
.pie__grid {
  display: grid;
  gap: var(--e6) var(--e5);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-bottom: var(--e7);
}
.pie h4 {
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--e4);
}
.pie ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.pie li + li { margin-top: var(--e3); }
.pie a { text-decoration: none; color: var(--apagado-claro); }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__sobre { max-width: 42ch; font-size: .9rem; }
.pie__sobre .marca { margin-bottom: var(--e4); }
.pie__legal {
  border-top: 1px solid var(--linea-marino);
  padding: var(--e5) 0 var(--e7);
  font-size: .8rem;
  line-height: 1.6;
}
.pie__legal p + p { margin-top: var(--e3); }
.pie__legal strong { color: #fff; }

/* ---------- banner de cookies ---------- */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--marino-800);
  color: var(--porcelana);
  border-top: 2px solid var(--acento);
}
.cookies[hidden] { display: none; }
.cookies__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e5);
  padding: var(--e4) var(--e5);
}
.cookies p { flex: 1 1 420px; font-size: .85rem; }
.cookies__btns { display: flex; flex-wrap: wrap; gap: var(--e3); }
.cookies__no {
  padding: 13px 20px;
  background: transparent;
  color: var(--porcelana);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- info del sitio (bloques legales anclados) ---------- */
.info { padding: var(--e9) 0; }
.info__cab { max-width: 64ch; margin-bottom: var(--e6); }
.info__cab p { margin-top: var(--e3); color: var(--apagado); }
.info__lista { display: grid; gap: var(--e3); }
.info details { background: var(--superficie); }
.info summary {
  padding: var(--e4) var(--e5);
  font-weight: 700;
  color: var(--marino-900);
  cursor: pointer;
  list-style: none;
}
.info summary::-webkit-details-marker { display: none; }
.info summary::after { content: "+"; float: right; color: var(--acento); font-weight: 800; }
.info details[open] summary::after { content: "–"; }
.info__cuerpo { padding: 0 var(--e5) var(--e5); max-width: var(--ancho-texto); }
.info__cuerpo > * + * { margin-top: var(--e3); }
.info__cuerpo p, .info__cuerpo li { font-size: .95rem; color: var(--tinta); }

@media (max-width: 900px) {
  .recursos__grid { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr 1fr; }
  .cabecera__caja { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .menu { gap: var(--e4); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 var(--e4); }
  .pie__grid { grid-template-columns: 1fr; }
  .edad__in, .cabecera__caja, .migas, .cookies__in { padding-left: var(--e4); padding-right: var(--e4); }
  .btn { width: 100%; }
  .cookies__btns { width: 100%; }
  .cookies__btns .btn { flex: 1 1 auto; }
}