/* Los Viajes de Darwin — CSS propio (sin frameworks). Fuentes autoalojadas. */

@font-face { font-family: "Young Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }

:root {
  --ink: #0a2a33;
  --ink-2: #47636d;
  --sea: #0e7c86;
  --sea-dark: #0a5f67;
  --lagoon: #35b6b4;
  --sun: #f2a93b;
  --coral: #c8431e;
  --coral-dark: #a53415;
  --wa: #1a7a4c;
  --foam: #f3f8f8;
  --line: #d3e2e4;
  --white: #ffffff;

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(10, 42, 51, 0.08), 0 8px 24px rgba(10, 42, 51, 0.08);
  --ease: cubic-bezier(0, 0, 0.2, 1);
  --z-flotante: 40; --z-cabecera: 50; --z-saltar: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-synthesis: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--sea-dark); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { margin: 0 0 var(--space-4); }
:focus-visible { outline: 3px solid var(--sea-dark); outline-offset: 3px; border-radius: 4px; }
.cab :focus-visible, .pie :focus-visible, .seccion--oscura :focus-visible, .cta-final :focus-visible, .hero :focus-visible, .tour-hero :focus-visible, .admin__cab :focus-visible, .saltar:focus-visible { outline-color: var(--sun); }

.contenedor { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.contenedor--estrecho { max-width: 48rem; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--space-4); top: -4rem; background: var(--sun); color: var(--ink); padding: var(--space-3) var(--space-4); border-radius: 8px; z-index: var(--z-saltar); font-weight: 700; }
.saltar:focus { top: var(--space-3); }
.texto-centro { text-align: center; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  font: 700 1rem/1 var(--font-body); text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn--cta { background: var(--coral); color: var(--white); }
.btn--cta:hover { background: var(--coral-dark); color: var(--white); }
.btn--claro { background: var(--white); color: var(--ink); }
.btn--claro:hover { background: var(--foam); color: var(--ink); }
.btn--borde { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--borde:hover { background: var(--ink); color: var(--white); }
.btn--bloque { display: flex; width: 100%; }
.btn--peq { min-height: 44px; padding: 0 var(--space-4); font-size: 0.9rem; }
.enlace-flecha { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--sun); padding-bottom: 2px; }
.enlace-flecha:hover { border-color: var(--coral); }

/* ---------- Cabecera ---------- */
.cab { position: sticky; top: 0; z-index: var(--z-cabecera); background: var(--ink); color: var(--white); }
.cab__in { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: var(--space-4); flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--white); text-decoration: none; }
.marca:hover { color: var(--white); }
.marca__ico { width: 2.25rem; height: 2.25rem; }
.mi-fondo { fill: #12404b; } .mi-sol { fill: var(--sun); } .mi-isla { fill: var(--lagoon); } .mi-ola { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; }
.marca__txt { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em; }
.cab__boton { display: none; min-height: 44px; padding: 0 var(--space-4); background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 10px; font: 700 0.95rem var(--font-body); cursor: pointer; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.menu a:not(.btn) { color: #e6f3f3; text-decoration: none; padding: var(--space-3) var(--space-2); min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; font-weight: 500; }
.menu a:not(.btn):hover { color: var(--white); border-color: var(--sun); }
.menu a[aria-current="page"] { color: var(--white); border-color: var(--sun); }
.menu__cta { min-height: 44px; padding: 0 var(--space-4); }

.cab__boton { align-items: center; }
@media (max-width: 55.99rem) {
  .js .cab__boton { display: inline-flex; }
  .js .menu { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--space-4); }
  .js .menu.menu--abierto { display: flex; }
  .js .menu a:not(.btn) { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .menu__cta { margin-top: var(--space-3); }
}

/* ---------- Ilustraciones ---------- */
.escena { display: block; width: 100%; height: 100%; --e-c1: #0b3c49; --e-c2: #f6c36b; --e-sol: #f2a93b; --e-mar: #14606b; --e-i1: #123a40; --e-i2: #1a4c52; --e-i3: #245a60; --e-veg: #2f6b3c; --e-playa: #d9c28f; --e-ave: #ffffff; --e-o1: #0e7c86; --e-o2: #0a6670; --e-o3: #084f58; }
.escena .cielo-1 { stop-color: var(--e-c1); }
.escena .cielo-2 { stop-color: var(--e-c2); }
.escena .sol { fill: var(--e-sol); opacity: 0.95; }
.escena .mar-lejano { fill: var(--e-mar); }
.escena .isla-a { fill: var(--e-i1); }
.escena .isla-b { fill: var(--e-i2); }
.escena .isla-c { fill: var(--e-i3); }
.escena .planta { fill: var(--e-veg); }
.escena .playa { fill: var(--e-playa); }
.escena .ave { fill: none; stroke: var(--e-ave); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.escena .niebla { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 10; stroke-linecap: round; }
.escena .ola-1 { fill: var(--e-o1); }
.escena .ola-2 { fill: var(--e-o2); }
.escena .ola-3 { fill: var(--e-o3); }

.escena--pinaculo { --e-c1: #17394a; --e-c2: #f08a4b; --e-sol: #ffd28a; --e-mar: #2a5a68; --e-i1: #1c2a30; --e-i2: #14202a; --e-i3: #2b3d45; }
.escena--acantilado { --e-c1: #2a7f98; --e-c2: #bfe3e6; --e-sol: #ffe7a8; --e-mar: #3d93a5; --e-i1: #a8783e; --e-i2: #7a5530; --e-veg: #5e7f3a; --e-o1: #1a8f9c; --e-o2: #0f7481; --e-o3: #0a5c68; }
.escena--aves { --e-c1: #1f4b63; --e-c2: #f5c57a; --e-mar: #2f6f80; --e-i1: #3a4b3e; --e-veg: #59703f; --e-ave: #10242b; }
.escena--bahia { --e-c1: #1b8aa6; --e-c2: #cbeff0; --e-sol: #fff1b8; --e-mar: #4aa5b5; --e-i1: #8b6b4a; --e-i2: #6f5238; --e-veg: #56763a; --e-o1: #22a0ac; --e-o2: #127d89; --e-o3: #0b616d; }
.escena--floreana { --e-c1: #0f5c73; --e-c2: #9ad9d6; --e-sol: #ffe9a6; --e-mar: #2c8391; --e-i1: #4b6237; --e-playa: #86b78d; --e-veg: #33502a; }
.escena--zona-alta { --e-c1: #5fa8a0; --e-c2: #dceee4; --e-sol: #fff6cc; --e-mar: #7fb9ae; --e-i1: #2f6b3c; --e-i2: #3e8a4b; --e-veg: #1f4d2b; --e-o1: #4c9a7d; --e-o2: #3a8368; --e-o3: #2b6b53; }
.escena--volcan { --e-c1: #2a2f45; --e-c2: #e9846a; --e-sol: #ffc48a; --e-mar: #39536a; --e-i1: #2b2a32; --e-i2: #4a3b3b; --e-o1: #21798a; --e-o2: #175f70; --e-o3: #0f4a58; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--ink); min-height: min(86svh, 44rem); display: flex; align-items: center; overflow: hidden; }
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 42, 51, 0.92) 0%, rgba(10, 42, 51, 0.7) 45%, rgba(10, 42, 51, 0.15) 100%); }
.hero__in { padding-block: var(--space-16); }
.hero h1 { max-width: 16ch; color: var(--white); }
.hero__sobre { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-sm); color: var(--sun); margin-bottom: var(--space-3); }
.hero__texto { max-width: 34rem; font-size: var(--text-lg); color: #e6f3f3; }
.hero__botones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__nota { margin-top: var(--space-6); font-size: var(--text-sm); color: #cfe6e8; }
.hero__nota a { color: var(--white); }

.tour-hero { position: relative; isolation: isolate; color: var(--white); background: var(--ink); overflow: hidden; }
.tour-hero__fondo { position: absolute; inset: 0; z-index: -2; }
.tour-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 42, 51, 0.9) 0%, rgba(10, 42, 51, 0.55) 60%, rgba(10, 42, 51, 0.2) 100%); }
.tour-hero__in { padding-block: var(--space-12) var(--space-16); min-height: 22rem; display: flex; flex-direction: column; justify-content: flex-end; }
.tour-hero h1 { color: var(--white); margin-bottom: var(--space-3); }
.tour-hero .hero__texto { margin-bottom: 0; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3rem, 7vw, 6rem); }
.seccion--suave { background: var(--foam); }
.seccion--oscura { background: var(--ink); color: var(--white); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--white); }
.seccion--oscura a { color: var(--sun); }
.seccion--centro { padding-block: clamp(4rem, 10vw, 8rem); }
.seccion__cab { max-width: 42rem; margin-bottom: var(--space-8); }
.seccion__cab p { color: var(--ink-2); font-size: var(--text-lg); }
.seccion--oscura .seccion__cab p { color: #cfe6e8; }
.seccion__pie { margin-top: var(--space-8); }

.cabecera-pagina { background: var(--foam); padding-block: var(--space-12) var(--space-8); border-bottom: 1px solid var(--line); }
.cabecera-pagina h1 { font-size: var(--text-2xl); max-width: 22ch; }
.cabecera-pagina__texto { max-width: 42rem; font-size: var(--text-lg); color: var(--ink-2); margin-bottom: 0; }
.migas { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--space-4); }
.migas a { color: inherit; }
.migas--claro { color: #cfe6e8; }
.migas--claro a { color: var(--white); }

/* ---------- Tarjetas de tours ---------- */
.rejilla-tours { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tarjeta { background: var(--white); border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden; transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.tarjeta:hover { box-shadow: var(--sombra); border-color: var(--lagoon); }
.tarjeta__enlace { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.tarjeta__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.tarjeta__img .escena { transition: transform 0.5s var(--ease); }
.tarjeta:hover .tarjeta__img .escena { transform: scale(1.05); }
.tarjeta__cuerpo { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.tarjeta__zona { font-size: var(--text-sm); font-weight: 700; color: var(--sea-dark); margin-bottom: var(--space-2); }
.tarjeta__titulo { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.tarjeta__texto { color: var(--ink-2); font-size: var(--text-base); flex: 1; }
.tarjeta__mas { font-weight: 700; color: var(--coral); }
.tarjeta:hover .tarjeta__mas { color: var(--coral-dark); }

.rejilla-tours--tres { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 52rem) { .rejilla-tours--tres { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 60rem) {
  .pagina-inicio .rejilla-tours { grid-template-columns: repeat(6, 1fr); }
  .pagina-inicio .rejilla-tours .tarjeta { grid-column: span 2; }
  .pagina-inicio .rejilla-tours .tarjeta--grande { grid-column: span 3; }
  .pagina-inicio .rejilla-tours .tarjeta:nth-last-child(-n + 2) { grid-column: span 3; }
  .tarjeta--grande .tarjeta__img { aspect-ratio: 16 / 9; }
  .tarjeta--grande .tarjeta__titulo { font-size: var(--text-2xl); }
  .rejilla-tours--lista { grid-template-columns: repeat(3, 1fr); }
  .rejilla-tours--lista .tarjeta:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .rejilla-tours--lista .tarjeta:last-child:nth-child(3n + 1) .tarjeta__enlace { flex-direction: row; }
  .rejilla-tours--lista .tarjeta:last-child:nth-child(3n + 1) .tarjeta__img { width: 50%; aspect-ratio: auto; min-height: 14rem; }
}

/* ---------- Bloques varios ---------- */
.caminos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 52rem) { .caminos { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.caminos li { border-top: 2px solid rgba(255, 255, 255, 0.25); padding-top: var(--space-4); }
.caminos__dato { font-family: var(--font-display); font-size: var(--text-lg); color: var(--sun); margin-bottom: var(--space-2); }
.caminos p { color: #cfe6e8; }
.caminos a { font-weight: 700; }

.dos-col { display: grid; gap: var(--space-12); }
@media (min-width: 52rem) { .dos-col { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

.lista-servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lista-servicios a { display: flex; flex-direction: column; padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 44px; transition: background-color 0.2s var(--ease); }
.lista-servicios a:hover { background: var(--foam); }
.lista-servicios strong { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.lista-servicios span { color: var(--ink-2); }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.pasos li { counter-increment: p; position: relative; padding: 0 0 var(--space-6) 3.25rem; }
.pasos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 1.1rem; top: 2.5rem; bottom: 0.25rem; width: 2px; background: var(--line); }

.categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 40rem) { .categorias { grid-template-columns: 1fr 1fr; } }
.categorias li { border: 1px solid var(--line); border-radius: var(--radio); padding: var(--space-6); background: var(--white); }
.categorias h3 { margin-bottom: var(--space-2); }
.categorias p { color: var(--ink-2); margin: 0; }

.lista-simple { margin: 0 0 var(--space-6); padding-left: 1.25rem; }
.lista-simple li { margin-bottom: var(--space-2); }
.nota, .nota-inline { color: var(--ink-2); }
.nota { margin-top: var(--space-8); padding: var(--space-6); background: var(--foam); border-radius: var(--radio); border: 1px solid var(--line); }
.nota p { margin: 0; }
.nota-inline { background: var(--foam); border: 1px solid var(--line); border-radius: 10px; padding: var(--space-4); }

.rutas { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.rutas li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.rutas [aria-hidden] { color: var(--coral); }

.prosa h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { max-width: 70ch; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-8) var(--space-4) 0; font-weight: 700; font-size: var(--text-lg); position: relative; min-height: 44px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: var(--space-2); top: 50%; translate: 0 -50%; font-size: 1.5rem; color: var(--coral); }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { color: var(--ink-2); padding-bottom: var(--space-4); margin: 0; max-width: 62ch; }

.tabla-scroll { overflow-x: auto; margin-bottom: var(--space-6); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 32rem; }
.tabla th, .tabla td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla thead th { background: var(--foam); border-bottom: 2px solid var(--ink); }
.tabla tbody th { font-weight: 700; }

/* ---------- Detalle de tour ---------- */
.tour-cuerpo { display: grid; gap: var(--space-12); }
@media (min-width: 60rem) { .tour-cuerpo { grid-template-columns: 1fr 22rem; align-items: start; } .tour-lateral { position: sticky; top: 6rem; } }
.tour-cuerpo__txt p { max-width: 65ch; }
.tour-lateral { border: 1px solid var(--line); border-radius: var(--radio); padding: var(--space-6); background: var(--white); box-shadow: var(--sombra); }
.tour-lateral__tit { font-size: var(--text-lg); }
.datos { margin: 0 0 var(--space-4); }
.datos dt { font-size: var(--text-sm); font-weight: 700; color: var(--sea-dark); margin-top: var(--space-4); }
.datos dd { margin: var(--space-1) 0 0; }
.tour-lateral__aviso { font-size: var(--text-sm); color: var(--ink-2); }
.tour-lateral .btn + .btn { margin-top: var(--space-3); }

/* ---------- CTA final ---------- */
.cta-final { background: var(--ink); color: var(--white); padding-block: clamp(3rem, 6vw, 5rem); border-top: 6px solid var(--sun); }
.cta-final__in { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 52rem) { .cta-final__in { grid-template-columns: 1fr auto; } }
.cta-final h2 { color: var(--white); margin-bottom: var(--space-2); }
.cta-final p { color: #cfe6e8; margin: 0; max-width: 40rem; }
.cta-final__botones { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: var(--space-6); }
.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo label { font-weight: 700; }
.opcional { font-weight: 400; color: var(--ink-2); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font: inherit; color: var(--ink); background: var(--white); border: 2px solid #9fb8bd; border-radius: 10px; }
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--sea-dark); outline-offset: 1px; border-color: var(--ink); }
.campo [aria-invalid="true"] { border-color: var(--coral); }
.campo__error { color: var(--coral-dark); font-size: var(--text-sm); font-weight: 700; margin: 0; }
.fila { display: grid; gap: var(--space-6); }
@media (min-width: 40rem) { .fila { grid-template-columns: 1fr 1fr; } .fila--3 { grid-template-columns: 1.4fr 1fr 1fr; } }
.campo--check { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-3); align-items: start; }
.campo--check input { width: 1.5rem; height: 1.5rem; min-height: 0; margin-top: 0.15rem; accent-color: var(--sea-dark); }
.campo--check label { font-weight: 400; }
.campo--check .campo__error { grid-column: 2; }
.aviso-legal { font-size: var(--text-sm); color: var(--ink-2); background: var(--foam); border-radius: 10px; padding: var(--space-4); margin: 0; }
.aviso { padding: var(--space-4); border-radius: 10px; font-weight: 500; margin-bottom: var(--space-6); }
.aviso--error { background: #fdeee9; color: #7a2410; border: 1px solid #e9b5a5; }
.aviso--ok { background: #e6f5ee; color: #0f5132; border: 1px solid #a9d8c0; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-flotante); display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); background: var(--wa); color: var(--white); border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(10, 42, 51, 0.3); transition: background-color 0.2s var(--ease); }
.wa-flotante:hover { background: #14603c; color: var(--white); }
.wa-flotante .ico { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 40rem) { .wa-flotante { width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; } .wa-flotante__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wa-flotante .ico { width: 1.75rem; height: 1.75rem; } }

/* ---------- Pie ---------- */
.pie { background: var(--ink); color: #cfe6e8; padding-top: var(--space-16); }
.pie a { color: var(--white); }
.pie__grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-12); }
@media (min-width: 52rem) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie__nombre { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); color: var(--white); margin-bottom: var(--space-2); }
.pie__tit { font-weight: 700; color: var(--sun); font-size: var(--text-base); margin-bottom: var(--space-3); }
.pie__col { display: flex; flex-direction: column; }
.pie__col a { padding-block: var(--space-2); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.pie__col a:hover { text-decoration: underline; }
.pie__base { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: var(--space-6) var(--space-24); font-size: var(--text-sm); }
@media (min-width: 52rem) { .pie__base { padding-bottom: var(--space-8); } }
.pie__legal { margin-bottom: var(--space-2); }
.footer-credito { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px dashed rgba(255, 255, 255, 0.2); }

/* ---------- Entrada al hacer scroll (mejora progresiva: el contenido siempre es visible) ---------- */
@keyframes aparecer { from { transform: translateY(16px); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tarjeta, .caminos li, .categorias li { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}

/* ---------- Admin ---------- */
.admin { background: var(--foam); min-height: 100vh; }
.admin__cab { background: var(--ink); color: var(--white); padding-block: var(--space-3); }
.admin__cab-in { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.admin__cab nav { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.admin__cab a { color: var(--white); min-height: 44px; display: inline-flex; align-items: center; }
.admin__cab .btn--borde { color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.admin__cab .btn--borde:hover { background: var(--white); color: var(--ink); }
.admin__salir { margin: 0; }
.admin__main { padding-block: var(--space-8) var(--space-16); }
.admin h1 { font-size: var(--text-2xl); }
.admin__login { max-width: 26rem; margin: var(--space-12) auto; background: var(--white); padding: var(--space-8); border-radius: var(--radio); border: 1px solid var(--line); }
.tabla--admin { background: var(--white); min-width: 60rem; }
.celda-msg { max-width: 22rem; white-space: normal; word-break: break-word; }
.en-linea { display: inline-block; margin: 0 var(--space-1) var(--space-1) 0; }
.admin__sesiones { margin-top: var(--space-8); }
.vencida { color: var(--coral-dark); }

/* ---------- Movimiento reducido (específico, sin comodín) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tarjeta__img .escena { transition: none; }
  .tarjeta:hover .tarjeta__img .escena { transform: none; }
  .btn, .tarjeta, .wa-flotante, .lista-servicios a { transition: none; }
}