/* =========================================================================
   Ortopedia Torrevieja 24H — hoja de estilos
   ========================================================================= */

/* ------------------------------------------------------------- 1. TOKENS */

:root {
  /* Color */
  --verde:          #3e974b;
  --verde-osc:      #2f7739;
  --verde-claro:    #eaf4ea;
  --bosque:         #0f2c22;
  --bosque-2:       #17402f;
  --teal:           #0e6e62;
  --arena:          #f6f4ef;
  --arena-2:        #efece3;
  --blanco:         #ffffff;
  --tinta:          #16231d;
  --tinta-suave:    #55625b;
  --borde:          #e2ddd2;
  --borde-fuerte:   #cfc9bb;
  --ambar:          #c07f2c;

  /* Tipografía fluida */
  --f-display: clamp(2.4rem, 1.35rem + 3.4vw, 4.2rem);
  --f-h1:      clamp(2.1rem, 1.35rem + 2.4vw, 3.3rem);
  --f-h2:      clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem);
  --f-h3:      clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --f-base:    clamp(1.03rem, 0.99rem + 0.18vw, 1.14rem);
  --f-lead:    clamp(1.12rem, 1.02rem + 0.45vw, 1.35rem);
  --f-peq:     0.92rem;

  /* Espaciado */
  --sec:       clamp(3.5rem, 2rem + 5vw, 7rem);
  --gap:       clamp(1.2rem, 0.8rem + 1.2vw, 2.2rem);
  --contenedor: 1220px;

  /* Formas */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 34px;
  --sombra-s: 0 1px 2px rgba(16, 38, 28, .06), 0 4px 14px rgba(16, 38, 28, .05);
  --sombra-m: 0 2px 6px rgba(16, 38, 28, .07), 0 18px 40px -18px rgba(16, 38, 28, .22);
  --sombra-l: 0 30px 70px -30px rgba(16, 38, 28, .38);

  --trans: 240ms cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- 2. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--f-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); font-weight: 700; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-osc); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--bosque); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 999; background: var(--bosque); color: #fff; padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-s) var(--r-s); font-weight: 700; text-decoration: none;
  transition: transform var(--trans);
}
.salto-contenido:focus { transform: translate(-50%, 0); color: #fff; }

.contenedor {
  width: min(100% - 2.4rem, var(--contenedor));
  margin-inline: auto;
}

.icono { width: 1.5rem; height: 1.5rem; flex: none; }
.icono--sm { width: 1.15rem; height: 1.15rem; }
.icono--xs { width: .95rem; height: .95rem; }

/* ------------------------------------------------------- 3. BARRA ÚTIL */

.barra-util {
  background: var(--bosque);
  color: #d7e3da;
  font-size: .84rem;
  letter-spacing: .01em;
}

.barra-util__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 2.6rem;
  padding-block: .35rem;
  flex-wrap: wrap;
}

.barra-util p { margin: 0; }

.barra-util__estado,
.barra-util__24h,
.barra-util__tel { display: flex; align-items: center; gap: .5rem; }

.barra-util__24h { color: #a7d7b3; font-weight: 600; }

.barra-util a { color: #fff; font-weight: 700; text-decoration: none; }
.barra-util a:hover { color: var(--verde); }

.barra-util__sep { opacity: .4; }

.punto {
  width: .55rem; height: .55rem; border-radius: 50%; display: inline-block;
}
.punto--on  { background: #58cf74; box-shadow: 0 0 0 3px rgba(88, 207, 116, .22); }
.punto--off { background: #d98c5a; box-shadow: 0 0 0 3px rgba(217, 140, 90, .2); }

@media (max-width: 900px) {
  .barra-util__horario, .barra-util__24h { display: none; }
  .barra-util__int { justify-content: center; }
}

/* --------------------------------------------------------- 4. CABECERA */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--trans);
}
.cabecera.esta-fija { box-shadow: 0 10px 30px -20px rgba(16, 38, 28, .45); }

.cabecera__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.6rem;
}

.marca { display: flex; align-items: center; text-decoration: none; }
.marca__logo { width: auto; height: 2.8rem; object-fit: contain; }
@media (max-width: 420px) { .marca__logo { height: 2.1rem; } }
.marca__texto { display: flex; align-items: center; gap: .55rem; }

.marca__nombre {
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.1;
}
.marca__nombre span { display: block; font-size: .72rem; letter-spacing: .3em; color: var(--tinta-suave); font-weight: 700; }

.marca__badge {
  background: var(--verde);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  padding: .22rem .45rem;
  border-radius: 5px;
}

/* Navegación */
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav__lista { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }

.nav__enlace {
  display: flex; align-items: center; gap: .25rem;
  padding: .55rem .7rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.nav__enlace:hover { background: var(--verde-claro); color: var(--verde-osc); }
.nav__enlace.es-activo { color: var(--verde-osc); }
.nav__enlace.es-activo::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .1rem;
  height: 2px; background: var(--verde); border-radius: 2px;
}
.nav__chevron { transition: transform var(--trans); }
.nav__item--desplegable:hover .nav__chevron,
.nav__item--desplegable:focus-within .nav__chevron { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 17rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-m);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}
.nav__item--desplegable:hover .submenu,
.nav__item--desplegable:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu__lista { list-style: none; margin: 0; padding: 0; }
.submenu__lista li { margin: 0; }
.submenu__lista a {
  display: block; padding: .6rem .75rem; border-radius: 9px;
  font-size: .92rem; font-weight: 600; color: var(--tinta); text-decoration: none;
}
.submenu__lista a:hover, .submenu__lista a.es-activo { background: var(--verde-claro); color: var(--verde-osc); }

.hamburguesa {
  display: none;
  background: var(--arena);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: .5rem;
  color: var(--tinta);
  cursor: pointer;
}
.hamburguesa__cerrar { display: none; }
.hamburguesa[aria-expanded="true"] .hamburguesa__abrir { display: none; }
.hamburguesa[aria-expanded="true"] .hamburguesa__cerrar { display: block; }

@media (max-width: 1080px) {
  .nav__cta { display: none; }
  .nav__enlace { padding: .5rem .5rem; font-size: .88rem; }
}

@media (max-width: 960px) {
  .hamburguesa { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 24rem);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.4rem 1.3rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--trans);
    box-shadow: var(--sombra-l);
    z-index: 90;
  }
  .nav.esta-abierto { transform: translateX(0); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__enlace { justify-content: space-between; padding: .85rem .6rem; font-size: 1.05rem; }
  .nav__enlace.es-activo::after { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 .5rem .6rem; min-width: 0;
    display: none;
  }
  .nav__item--desplegable.esta-abierto .submenu { display: block; }
  .nav__cta { display: flex; margin-top: 1.2rem; justify-content: center; }
}

body.menu-abierto { overflow: hidden; }
.velo {
  position: fixed; inset: 0; background: rgba(15, 44, 34, .45);
  opacity: 0; visibility: hidden; transition: opacity var(--trans), visibility var(--trans); z-index: 80;
}
.velo.esta-visible { opacity: 1; visibility: visible; }

/* ----------------------------------------------------------- 5. BOTONES */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--trans), background var(--trans), color var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--primario { background: var(--verde); color: #fff; box-shadow: 0 10px 24px -12px rgba(62, 151, 75, .9); }
.boton--primario:hover { background: var(--verde-osc); color: #fff; }

.boton--oscuro { background: var(--bosque); color: #fff; }
.boton--oscuro:hover { background: var(--bosque-2); color: #fff; }

.boton--claro { background: #fff; color: var(--bosque); }
.boton--claro:hover { background: var(--arena); color: var(--bosque); }

.boton--contorno { border-color: var(--borde-fuerte); color: var(--tinta); background: transparent; }
.boton--contorno:hover { border-color: var(--verde); color: var(--verde-osc); background: var(--verde-claro); }

.boton--fantasma { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.boton--fantasma:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.boton--pequeno { padding: .55rem 1.05rem; font-size: .88rem; }

/* ------------------------------------------------- 6. PIEZAS DE SECCIÓN */

.seccion { padding-block: var(--sec); }
.seccion--arena { background: var(--arena); }
.seccion--oscura { background: var(--bosque); color: #dfe9e2; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--compacta { padding-block: calc(var(--sec) * .62); }

.antetitulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-osc); margin: 0 0 .9rem;
}
.antetitulo::before {
  content: ""; width: 1.6rem; height: 2px; background: var(--verde); border-radius: 2px;
}
.antetitulo--claro { color: #9fd8ad; }
.antetitulo--claro::before { background: #9fd8ad; }

.cabecera-seccion { max-width: 46rem; margin-bottom: clamp(2rem, 1rem + 2.5vw, 3.4rem); }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
.cabecera-seccion--centro .antetitulo::before { display: none; }
.cabecera-seccion p { color: var(--tinta-suave); font-size: var(--f-lead); }
.seccion--oscura .cabecera-seccion p { color: #b6c8bd; }

.lead { font-size: var(--f-lead); color: var(--tinta-suave); }

/* ---------------------------------------------------------------- 7. HERO */

.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--bosque);
  padding-block: clamp(4rem, 2rem + 8vw, 8.5rem);
  overflow: hidden;
}
.hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(9, 30, 22, .93) 0%, rgba(9, 30, 22, .78) 42%, rgba(9, 30, 22, .35) 100%),
    linear-gradient(to top, rgba(9, 30, 22, .8), transparent 55%);
}

.hero__int { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.hero__texto { max-width: 40rem; }

.hero h1 { font-size: var(--f-display); color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: #8fd3a0; }

.hero__lead { font-size: var(--f-lead); color: #d5e3d9; max-width: 34rem; }

.hero__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.hero__marcas {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; padding: 0; list-style: none;
}
.hero__marcas li {
  margin: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .42rem .95rem;
  font-size: .84rem; font-weight: 600; color: #e2ede6;
  backdrop-filter: blur(6px);
}
.hero__marcas svg { color: #8fd3a0; }

/* Tarjeta de contacto rápida dentro del hero */
.hero__tarjeta {
  background: rgba(255, 255, 255, .96);
  color: var(--tinta);
  border-radius: var(--r-l);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  box-shadow: var(--sombra-l);
  max-width: 24rem;
}
.hero__tarjeta h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.hero__tarjeta ul { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.hero__tarjeta li { display: flex; gap: .65rem; align-items: flex-start; font-size: .94rem; margin-bottom: .7rem; }
.hero__tarjeta svg { color: var(--verde); margin-top: .15rem; }

@media (min-width: 1000px) {
  .hero__int { grid-template-columns: 1.5fr .9fr; align-items: center; }
}

/* Hero secundario (páginas internas) */
.hero-pag {
  position: relative; isolation: isolate; color: #fff; background: var(--bosque);
  padding-block: clamp(3rem, 1.6rem + 5vw, 5.6rem);
  overflow: hidden;
}
.hero-pag__fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-pag::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(9, 30, 22, .94) 12%, rgba(9, 30, 22, .72) 62%, rgba(9, 30, 22, .42) 100%);
}
.hero-pag h1 { color: #fff; max-width: 20ch; }
.hero-pag__lead { font-size: var(--f-lead); color: #d5e3d9; max-width: 46rem; }
.hero-pag__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Migas */
.migas { font-size: .84rem; margin-bottom: 1.4rem; color: #a8bdb0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.migas li { margin: 0; display: flex; gap: .45rem; align-items: center; }
.migas li + li::before { content: "/"; opacity: .5; }
.migas a { color: #cfe0d5; text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas [aria-current] { color: #fff; font-weight: 600; }

/* ----------------------------------------------------------- 8. CONFIANZA */

.confianza { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.confianza__lista {
  display: grid; gap: var(--gap); list-style: none; margin: 0; padding: clamp(2rem, 1rem + 2vw, 3rem) 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.confianza__lista li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.confianza__lista svg { color: var(--verde); width: 1.7rem; height: 1.7rem; }
.confianza__lista strong { display: block; font-size: 1.02rem; }
.confianza__lista span { color: var(--tinta-suave); font-size: .93rem; }

/* -------------------------------------------------------- 9. REJILLAS */

.rejilla { display: grid; gap: var(--gap); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.dos-columnas {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; }
  .dos-columnas--ancha-izq { grid-template-columns: 1.15fr .85fr; }
  .dos-columnas--invertida > :first-child { order: 2; }
}

.figura { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sombra-m); }
.figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figura--alta img { aspect-ratio: 3 / 4; }
.figura figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem .95rem;
  background: linear-gradient(to top, rgba(9, 30, 22, .85), transparent);
  color: #fff; font-size: .88rem; font-weight: 600;
}

/* --------------------------------------------------- 10. TARJETA CATEGORÍA */

.tarjeta-cat {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.tarjeta-cat:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); border-color: var(--borde-fuerte); color: inherit; }
.tarjeta-cat__img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--arena-2); }
.tarjeta-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.22,.61,.36,1); }
.tarjeta-cat:hover .tarjeta-cat__img img { transform: scale(1.06); }
.tarjeta-cat__cuerpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-cat__claim { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-osc); margin-bottom: .5rem; }
.tarjeta-cat h3 { margin-bottom: .45rem; }
.tarjeta-cat p { color: var(--tinta-suave); font-size: .95rem; }
.tarjeta-cat__mas {
  margin-top: auto; padding-top: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .92rem; color: var(--verde-osc);
}
.tarjeta-cat__mas svg { transition: transform var(--trans); }
.tarjeta-cat:hover .tarjeta-cat__mas svg { transform: translateX(4px); }

/* ---------------------------------------------------- 11. TARJETA SERVICIO */

.tarjeta-serv {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  padding: 1.6rem 1.5rem;
  transition: transform var(--trans), box-shadow var(--trans);
}
.tarjeta-serv:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }
.tarjeta-serv__icono {
  width: 3rem; height: 3rem; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-osc);
  margin-bottom: 1rem;
}
.tarjeta-serv h3 { margin-bottom: .5rem; }
.tarjeta-serv p { color: var(--tinta-suave); font-size: .96rem; margin: 0; }

/* Variante numerada (razones) */
.razon {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-m);
  padding: 1.8rem 1.6rem;
}
.razon__num {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: rgba(143, 211, 160, .55); margin-bottom: .8rem; display: block;
}
.razon h3 { font-size: 1.15rem; }
.razon p { color: #b6c8bd; font-size: .96rem; margin: 0; }

/* --------------------------------------------------------- 12. LISTA CHECK */

.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.lista-check li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.lista-check svg { color: var(--verde); width: 1.25rem; height: 1.25rem; margin-top: .22rem; }
.lista-check--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .6rem 1.6rem; }
.seccion--oscura .lista-check svg { color: #8fd3a0; }

.caja {
  background: var(--arena);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
}
.caja--verde { background: var(--verde-claro); border-color: #cfe6d3; }
.caja--destacada { border-left: 4px solid var(--verde); }

/* ----------------------------------------------------------- 13. GALERÍA */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .9rem;
}
.galeria figure { margin: 0; border-radius: var(--r-m); overflow: hidden; background: var(--arena-2); }
.galeria img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.galeria figure:hover img { transform: scale(1.05); }
.galeria figure:nth-child(1), .galeria figure:nth-child(6) { grid-column: span 2; }
@media (max-width: 640px) {
  .galeria figure:nth-child(1), .galeria figure:nth-child(6) { grid-column: span 1; }
}

/* Variante de dos columnas iguales, sin destacados */
.galeria--par { grid-template-columns: 1fr 1fr; }
.galeria--par figure:nth-child(1), .galeria--par figure:nth-child(6) { grid-column: span 1; }

/* --------------------------------------------------------------- 14. FAQ */

.faq { display: grid; gap: .8rem; max-width: 52rem; }
.faq details {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-m);
  padding: 0 1.3rem; transition: border-color var(--trans), box-shadow var(--trans);
}
.faq details[open] { border-color: var(--borde-fuerte); box-shadow: var(--sombra-s); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0;
  font-weight: 700; font-size: 1.03rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .2rem; top: 1.45rem;
  width: .7rem; height: .7rem; border-right: 2px solid var(--verde-osc); border-bottom: 2px solid var(--verde-osc);
  transform: rotate(45deg); transition: transform var(--trans);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__respuesta { padding-bottom: 1.3rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------- 14b. TARIFAS */

.tarifas { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m); }
.tarifas table {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  background: #fff; font-size: .98rem;
}
.tarifas caption { text-align: left; padding-bottom: .8rem; color: var(--tinta-suave); font-size: var(--f-peq); }
.tarifas th, .tarifas td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--borde); }
.tarifas thead th {
  background: var(--bosque); color: #fff; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; border-bottom: none;
}
.tarifas thead th:first-child { border-top-left-radius: var(--r-m); }
.tarifas thead th:last-child  { border-top-right-radius: var(--r-m); }
.tarifas tbody th { text-align: left; font-weight: 700; color: var(--tinta); }
.tarifas tbody tr:last-child th, .tarifas tbody tr:last-child td { border-bottom: none; }
.tarifas tbody tr:hover td, .tarifas tbody tr:hover th { background: var(--verde-claro); }
.tarifas__nota { display: block; font-weight: 400; font-size: var(--f-peq); color: var(--tinta-suave); }
.tarifas__no { color: var(--tinta-suave); }
.tarifas__pie { margin: 1rem 0 0; font-size: var(--f-peq); color: var(--tinta-suave); }
.tarifas__pie li + li { margin-top: .35rem; }

/* -------------------------------------------------------------- 15. BLOG */

.tarjeta-post {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--borde); border-radius: var(--r-l); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform var(--trans), box-shadow var(--trans);
}
.tarjeta-post:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); color: inherit; }
.tarjeta-post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tarjeta-post__cuerpo { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-post__meta { font-size: .8rem; color: var(--tinta-suave); letter-spacing: .04em; margin-bottom: .55rem; }
.tarjeta-post h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.tarjeta-post p { color: var(--tinta-suave); font-size: .94rem; }
.tarjeta-post__mas { margin-top: auto; padding-top: .9rem; font-weight: 700; font-size: .9rem; color: var(--verde-osc); display: inline-flex; gap: .4rem; align-items: center; }

.articulo { max-width: 46rem; }
.articulo h2 { margin-top: 2.2rem; }
.articulo h3 { margin-top: 1.6rem; }
.articulo ul { padding-left: 1.2rem; }
.articulo li::marker { color: var(--verde); }

/* ------------------------------------------------------------ 16. TEXTO LEGAL */

.legal { max-width: 52rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.legal p, .legal li { color: var(--tinta-suave); font-size: .98rem; }
.legal__indice {
  background: var(--arena); border-radius: var(--r-m); padding: 1.2rem 1.4rem; margin-bottom: 2rem;
}
.legal__indice ul { columns: 2; column-gap: 2rem; margin: 0; }
@media (max-width: 640px) { .legal__indice ul { columns: 1; } }

/* --------------------------------------------------------- 17. FORMULARIO */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-weight: 700; font-size: .92rem; }
.campo label span { color: #b0483a; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: 1rem;
  padding: .8rem .95rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--tinta);
  transition: border-color var(--trans), box-shadow var(--trans);
  width: 100%;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(62, 151, 75, .16);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo--error input, .campo--error textarea { border-color: #c0503f; }
.campo__error { color: #a83f30; font-size: .86rem; font-weight: 600; }
.campo-doble { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .campo-doble { grid-template-columns: 1fr 1fr; } }
.campo--trampa { position: absolute; left: -9999px; }

.consentimiento { display: flex; gap: .7rem; align-items: flex-start; font-size: .89rem; color: var(--tinta-suave); }
.consentimiento input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--verde); }

.aviso {
  border-radius: var(--r-m); padding: 1rem 1.2rem; font-weight: 600; display: flex; gap: .7rem; align-items: flex-start;
}
.aviso--ok  { background: var(--verde-claro); color: #235c2c; border: 1px solid #bfdfc5; }
.aviso--mal { background: #fdeeeb; color: #8f3627; border: 1px solid #f0c9c1; }

/* ---------------------------------------------------------- 18. CTA FINAL */

.cta-final {
  background: linear-gradient(135deg, var(--bosque) 0%, var(--bosque-2) 100%);
  color: #dfe9e2;
  padding-block: var(--sec);
}
.cta-final__int { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 940px) { .cta-final__int { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.cta-final h2 { color: #fff; max-width: 18ch; }
.cta-final__parrafo { color: #b6c8bd; max-width: 44ch; }
.cta-final__botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.cta-final__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.cta-final__datos li {
  display: flex; gap: .9rem; align-items: flex-start; margin: 0;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-m); padding: 1rem 1.15rem; font-size: .94rem;
}
.cta-final__datos svg { color: #8fd3a0; }
.cta-final__datos a { color: #fff; }

/* ---------------------------------------------------------------- 19. PIE */

.pie { background: #0b2119; color: #a9bfb2; font-size: .94rem; }
.pie__int {
  display: grid; gap: clamp(2rem, 1rem + 2.5vw, 3rem);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pie__col--marca { grid-column: span 1; max-width: 26rem; }
@media (min-width: 1000px) { .pie__col--marca { grid-column: span 1; } }
.pie__logo { width: auto; height: 2.9rem; object-fit: contain; margin-bottom: 1rem; }
.pie__claim { font-size: .92rem; }
.pie__24h { display: flex; gap: .5rem; align-items: flex-start; color: #8fd3a0; font-weight: 600; font-size: .88rem; margin-top: 1rem; }
.pie__titulo { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; font-weight: 800; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie__lista li { margin: 0; }
.pie__lista a { color: #a9bfb2; text-decoration: none; }
.pie__lista a:hover { color: #fff; text-decoration: underline; }
.pie__lista--contacto li { display: flex; gap: .55rem; align-items: flex-start; }
.pie__lista--contacto svg { color: var(--verde); margin-top: .18rem; }
.pie__zona { font-size: .84rem; color: #7d9488; margin-top: 1.1rem; }

.pie__legal { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; }
.pie__legal-int {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
  padding-block: 1.3rem;
}
.pie__legal p { margin: 0; color: #7d9488; }
.pie__legal-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }
.pie__legal-lista li { margin: 0; }
.pie__legal-lista a { color: #a9bfb2; text-decoration: none; }
.pie__legal-lista a:hover { color: #fff; text-decoration: underline; }

/* ----------------------------------------------------- 20. FLOTANTES */

.acciones-flotantes {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  display: flex; flex-direction: column; gap: .6rem;
}
.flotante {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.1rem; border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem;
  box-shadow: var(--sombra-m);
  transition: transform var(--trans);
}
.flotante:hover { transform: translateY(-3px); color: #fff; }
.flotante--tel { background: var(--bosque); }
.flotante--wa  { background: #25a95a; }
@media (max-width: 560px) {
  .flotante span { display: none; }
  .flotante { padding: .95rem; }
  .acciones-flotantes { flex-direction: row; }
}

/* -------------------------------------------------------- 21. COOKIES */

.cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  max-width: 46rem; margin-inline: auto;
  background: #fff; border: 1px solid var(--borde-fuerte); border-radius: var(--r-m);
  box-shadow: var(--sombra-l);
  padding: 1.1rem 1.3rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.cookies[hidden] { display: none; }   /* si no, el display:flex de arriba pisa al atributo hidden */
.cookies__texto { margin: 0; font-size: .89rem; color: var(--tinta-suave); flex: 1 1 20rem; }
.cookies__botones { display: flex; gap: .6rem; }
.cookies .boton--fantasma { border-color: var(--borde-fuerte); color: var(--tinta); }
.cookies .boton--fantasma:hover { background: var(--arena); color: var(--tinta); }

/* ------------------------------------------------------- 22. ANIMACIÓN */

.con-js .aparece { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
.con-js .aparece.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .con-js .aparece { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- 23. UTILIDADES */

.centro { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.max-46 { max-width: 46rem; }
.max-52 { max-width: 52rem; }

.mapa {
  border: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-l);
  box-shadow: var(--sombra-m); background: var(--arena-2);
}
@media (max-width: 700px) { .mapa { aspect-ratio: 4 / 3; } }

.pastilla {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--verde-claro); color: var(--verde-osc);
  border-radius: 999px; padding: .3rem .8rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
}