/* Isa Nails — estilos principales */

:root {
  --color-fondo: #fdf8fa;
  --color-superficie: #ffffff;
  --color-texto: #2d2430;
  --color-texto-suave: #5c5360;
  --color-primario: #c45b7a;
  --color-primario-oscuro: #9e3d5c;
  --color-acento: #d4a574;
  /* Rojo Pasión — sección Servicios (tarjetas y cabecera) */
  --rojo-pasion: #c41e3a;
  --rojo-pasion-oscuro: #8b1528;
  --rojo-pasion-claro: #fff5f6;
  /* Degradado de todas las secciones y del bloque Servicios (misma línea) */
  --degradado-seccion-pasion: linear-gradient(
    165deg,
    hsl(352, 48%, 91%) 0%,
    hsl(355, 52%, 87%) 42%,
    hsl(348, 46%, 90%) 100%
  );
  --color-borde: #ead5dc;
  /* Superficies interiores (tarjetas, acordeón): matiz rojo pasión */
  --color-superficie-interior: hsl(350, 40%, 94%);
  --color-superficie-interior-suave: hsl(352, 38%, 96%);
  --sombra-suave: 0 8px 32px rgba(45, 36, 48, 0.08);
  --sombra-hover: 0 12px 40px rgba(45, 36, 48, 0.12);
  --radio: 14px;
  --radio-grande: 22px;
  /* Degradado suave rosa / blanco (reserva / otros usos) */
  --degradado-seccion: linear-gradient(
    180deg,
    #ebe3e9 0%,
    #f3ebef 38%,
    #faf5f8 72%,
    #fffcfe 100%
  );
  /* Fondo de página: la URL efectiva se define en index.html (html { --imagen-fondo-pagina }) para que la ruta sea relativa al HTML en el hosting */
  --imagen-fondo-pagina: url("perfil/fondo-scroll.png");
  /* Velo suave sobre esa foto en el body */
  --velo-fondo-pagina: linear-gradient(
    180deg,
    rgba(253, 248, 250, 0.82) 0%,
    rgba(253, 248, 250, 0.78) 100%
  );
  /* Primeras tres secciones (hero, sobre nosotros, servicios): más redondeado */
  --radio-seccion-destacada: 28px;
  /* Contenido ~20% más ancho que el diseño base (1100px → 1320px) */
  --max-ancho: 1320px;
  /* Barra de menú más estrecha que el contenido principal */
  --max-ancho-menu: 900px;
  /* Separación vertical entre secciones (píxeles explícitos) */
  --espacio-secciones: 24px;
  /* Hueco lateral respecto al borde de la ventana (izquierda y derecha) */
  --margen-lateral-main: 8%;
  --font-titulo: "Cormorant Garamond", Georgia, serif;
  --font-cuerpo: "Manrope", system-ui, sans-serif;
  --color-pie: #1e1e1e;
}

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

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

body {
  margin: 0;
  font-family: var(--font-cuerpo);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-texto);
  /* Capas: velo + foto (refuerzo en index.html <style> para el hosting). Color de reserva claro por si la imagen tarda en cargar */
  background-color: #e8dde3;
  background-image: var(--velo-fondo-pagina), var(--imagen-fondo-pagina);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 768px) {
  body {
    /* En muchos móviles fixed en body va mal; se evita el parpadeo */
    background-attachment: scroll, scroll;
    padding-bottom: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll, scroll;
  }
}

body.menu-movil-abierto {
  overflow: hidden;
  touch-action: none;
}

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

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

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

/* Cabecera y barra superior: columna más estrecha */
.barra-superior .contenedor,
.cabecera .contenedor {
  width: min(100% - 2rem, var(--max-ancho-menu));
}

@media (max-width: 480px) {
  .contenedor {
    width: min(100% - 1.25rem, var(--max-ancho));
  }

  .barra-superior .contenedor,
  .cabecera .contenedor {
    width: min(100% - 1.25rem, var(--max-ancho-menu));
  }
}

/* Contenido principal: 8% de margen a cada lado (la foto de fondo se ve en los laterales) */
main {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-secciones);
  padding-top: var(--espacio-secciones);
  padding-bottom: 2rem;
  margin-left: var(--margen-lateral-main);
  margin-right: var(--margen-lateral-main);
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

/* Secciones: mismo degradado Rojo Pasión en todo el main */
main > section {
  background-color: hsl(352, 46%, 90%);
  background-image: var(--degradado-seccion-pasion);
  border: 1px solid rgba(139, 21, 40, 0.32);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-suave);
}

/* Hero, Sobre nosotros y Servicios: esquinas más redondeadas */
main > section:nth-child(1),
main > section:nth-child(2),
main > section:nth-child(3) {
  border-radius: var(--radio-seccion-destacada);
  border-color: rgba(139, 21, 40, 0.35);
}

/* Barra superior (modelo centro de estética) */

.barra-superior {
  display: none;
  background: var(--color-pie);
  color: #e8e8e8;
  font-size: 0.85rem;
  padding: 0.45rem 0;
}

@media (min-width: 769px) {
  .barra-superior {
    display: block;
  }
}

.barra-superior__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.barra-superior__datos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.barra-superior__sep {
  opacity: 0.45;
}

.barra-superior__enlace {
  color: #fff;
  text-decoration: none;
}

.barra-superior__enlace:hover {
  text-decoration: underline;
}

.barra-superior__cta {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.barra-superior__cta:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.9rem 0;
  width: 100%;
}

.cabecera__marca {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.cabecera__titulo {
  font-family: var(--font-titulo);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--color-texto);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.cabecera__titulo:hover {
  color: var(--color-primario);
}

.cabecera__submarca {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.navegacion {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.navegacion a {
  color: var(--color-texto-suave);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.navegacion a:hover {
  color: var(--color-primario);
}

.cabecera__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.cabecera__menu-btn span {
  display: block;
  height: 2px;
  width: 22px;
  background: var(--color-texto);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s;
}

.cabecera__menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cabecera__menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.cabecera__menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .cabecera__fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0;
    padding: 0.75rem 0;
  }

  .cabecera__marca {
    grid-column: 1;
    grid-row: 1;
  }

  .cabecera__menu-btn {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-shrink: 0;
  }

  .navegacion {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-borde);
  }

  .navegacion.navegacion--abierta {
    display: flex;
  }

  .navegacion a {
    padding: 0.85rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    -webkit-tap-highlight-color: rgba(196, 91, 122, 0.12);
  }
}

/* Hero principal (estilo MC: titular + marca + CTAs) */

.hero-principal {
  position: relative;
  padding: 3rem max(1.25rem, env(safe-area-inset-left)) 3.5rem max(1.25rem, env(safe-area-inset-right));
  overflow: hidden;
}

.hero-principal::after {
  content: "";
  position: absolute;
  inset: auto -20% -30% auto;
  width: min(70vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 91, 122, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-principal__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.hero-principal__pretitulo {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primario);
}

.hero-principal__h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.85rem, 4.5vw, 2.65rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-texto);
}

.hero-principal__h2 {
  margin: 0 0 1rem;
  font-family: var(--font-titulo);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 600;
  color: var(--color-primario);
  line-height: 1.1;
}

.hero-principal__tagline {
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  line-height: 1.65;
  max-width: 52ch;
}

.hero-principal__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .hero-principal {
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }

  .hero-principal__tagline {
    font-size: 0.98rem;
  }

  .hero-principal__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-principal__acciones .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* Bloques editoriales (texto largo tipo landing profesional) */

.bloque-editorial {
  padding: 2.75rem 0;
}

.bloque-editorial--blanco {
  background: var(--color-superficie);
}

.bloque-editorial--gris {
  background: #f3f1f2;
}

.contenedor--lectura {
  max-width: 800px;
}

.bloque-editorial p {
  margin: 0 0 1rem;
  color: var(--color-texto-suave);
  font-weight: 400;
  line-height: 1.75;
  font-size: 1rem;
}

.bloque-editorial p:last-child {
  margin-bottom: 0;
}

.bloque-editorial__lead {
  font-size: 1.08rem !important;
  color: var(--color-texto) !important;
  line-height: 1.7 !important;
}

.titulo-bloque {
  margin: 0 0 1rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--color-texto);
  line-height: 1.25;
}

.subtitulo-bloque {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-texto);
}

.lista-check {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-texto-suave);
  line-height: 1.7;
}

.lista-check li {
  margin-bottom: 0.65rem;
}

.lista-check--dos {
  list-style: disc;
}

.lista-pasos {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-texto-suave);
  line-height: 1.75;
}

.lista-pasos li {
  margin-bottom: 0.85rem;
}

.detalle-leer-mas {
  margin-top: 1.25rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 0.5rem 1rem;
  background: var(--color-fondo);
}

.detalle-leer-mas__btn {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primario);
}

.detalle-leer-mas__contenido {
  padding-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  line-height: 1.65;
}

/* Servicios estilo rejilla MC */

.seccion--servicios-mc {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.cabecera-seccion-mc {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.25rem;
}

.cabecera-seccion-mc--centrada {
  text-align: center;
}

.cabecera-seccion-mc__titulo {
  margin: 0 0 0.65rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: var(--rojo-pasion-oscuro);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cabecera-seccion-mc__titulo--izq {
  text-align: left;
}

.cabecera-seccion-mc__texto {
  margin: 0;
  color: hsl(348, 24%, 36%);
  font-size: 1rem;
  line-height: 1.65;
}

.grid-servicios-mc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

.tarjeta-servicio-mc {
  margin: 0;
  padding: 1.35rem 1.25rem;
  background: linear-gradient(180deg, var(--rojo-pasion-claro) 0%, hsl(350, 55%, 96%) 100%);
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: var(--radio);
  box-shadow: 0 4px 18px rgba(139, 21, 40, 0.1);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.tarjeta-servicio-mc:hover {
  border-color: var(--rojo-pasion);
  box-shadow: 0 10px 32px rgba(139, 21, 40, 0.18);
}

.tarjeta-servicio-mc__titulo {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rojo-pasion);
  line-height: 1.3;
}

.tarjeta-servicio-mc__txt {
  margin: 0;
  font-size: 0.88rem;
  color: hsl(348, 22%, 34%);
  line-height: 1.5;
}

/* Contacto dos columnas */

.contacto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 920px;
  margin: 0 auto;
}

.contacto-layout__intro {
  padding-top: 0.25rem;
}

.contacto-layout__texto {
  margin: 0 0 1.25rem;
  color: var(--color-texto-suave);
  line-height: 1.65;
}

.contacto-layout__datos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contacto-layout__datos li {
  margin-bottom: 0.5rem;
}

.contacto-layout__datos a {
  color: var(--rojo-pasion);
  font-weight: 600;
  text-decoration: none;
}

.contacto-layout__datos a:hover {
  text-decoration: underline;
}

.contacto-layout__nota {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  margin-top: 0.75rem !important;
}

@media (max-width: 768px) {
  .contacto-layout {
    grid-template-columns: 1fr;
  }
}

/* Pie enriquecido */

.pie-rico {
  background: var(--color-pie);
  color: #c8c8c8;
  font-size: 0.9rem;
  padding-top: 2.75rem;
}

.pie-rico a {
  color: #e0e0e0;
  text-decoration: none;
}

.pie-rico a:hover {
  text-decoration: underline;
  color: #fff;
}

.pie-rico__configurar-cookies {
  padding: 0;
  border: none;
  background: transparent;
  color: #e0e0e0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.pie-rico__configurar-cookies:hover {
  text-decoration: underline;
  color: #fff;
}

.pie-rico__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2rem 2.5rem;
  padding-bottom: 2.5rem;
}

.pie-rico__marca {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1rem;
}

.pie-rico__titulo-bloque {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
}

.pie-rico__col p {
  margin: 0 0 0.45rem;
  line-height: 1.55;
}

.pie-rico__direccion {
  margin-top: 0.75rem !important;
  font-size: 0.88rem;
}

.pie-rico__mapa {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--color-primario) !important;
}

.pie-rico__mapa:hover {
  color: #f0a8bc !important;
}

.pie-rico__horarios {
  margin: 0;
}

.pie-rico__horarios div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.35rem 1rem;
  margin-bottom: 0.4rem;
}

.pie-rico__horarios dt {
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.pie-rico__horarios dd {
  margin: 0;
}

.pie-rico__aviso-horario {
  font-size: 0.82rem;
  opacity: 0.85;
  margin-top: 1rem !important;
}

.pie-rico__legal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-rico__legal li {
  margin-bottom: 0.45rem;
}

.pie-rico__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: #888;
}

.pie-rico__copy p {
  margin: 0;
}

/* WhatsApp flotante */

.whatsapp-flotante {
  position: fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  right: max(1.25rem, env(safe-area-inset-right));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.1rem;
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}

.whatsapp-flotante:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
  color: #fff !important;
}

/* ¿Quién soy yo? */

.quien-soy {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.quien-soy__foto {
  margin: 0;
  width: 100%;
  max-width: 340px;
}

.quien-soy__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radio-grande);
  border: 1px solid var(--color-borde);
  box-shadow: var(--sombra-suave);
  background: var(--color-fondo);
}

.quien-soy__pie-foto {
  margin: 0.65rem 0 0;
  text-align: center;
  font-family: var(--font-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-texto);
}

.quien-soy__texto {
  min-width: 0;
}

.quien-soy__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--font-titulo);
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 600;
  color: var(--rojo-pasion-oscuro);
}

.quien-soy__nombre {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rojo-pasion);
  letter-spacing: 0.02em;
}

.quien-soy__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-texto);
}

.quien-soy__texto p {
  margin: 0 0 1rem;
  color: var(--color-texto-suave);
  font-weight: 300;
  line-height: 1.7;
  max-width: 62ch;
}

.quien-soy__texto p:last-child {
  margin-bottom: 0;
}

.quien-soy__cierre {
  padding-top: 0.35rem;
  color: var(--color-texto) !important;
  font-weight: 400 !important;
}

@media (max-width: 768px) {
  .quien-soy {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .quien-soy__foto {
    max-width: min(280px, 85vw);
  }

  .quien-soy__texto {
    text-align: left;
  }

  .quien-soy__texto p {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .seccion--quien-soy {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .quien-soy__lead {
    font-size: 1rem;
  }
}

/* Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  font-family: var(--font-cuerpo);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: rgba(196, 91, 122, 0.15);
  touch-action: manipulation;
}

.btn--bloque {
  width: 100%;
}

.btn--oscuro {
  background: var(--color-pie);
  color: #fff;
  border-color: var(--color-pie);
}

.btn--oscuro:hover {
  background: #333;
  border-color: #333;
  box-shadow: var(--sombra-suave);
}

.btn--blanco-borde {
  background: #fff;
  color: var(--color-texto);
  border-color: rgba(0, 0, 0, 0.12);
}

.btn--blanco-borde:hover {
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.btn--blanco-solido {
  background: #fff;
  color: var(--color-primario-oscuro);
  border-color: #fff;
  font-weight: 600;
}

.btn--blanco-solido:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primario-oscuro);
}

/* Secciones */

.seccion {
  padding: 4rem 0;
}

@media (max-width: 480px) {
  .seccion {
    padding: 2.75rem 0;
  }
}

/* Galería */

.filtros-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.filtro-galeria {
  padding: 0.55rem 1.15rem;
  min-height: 44px;
  font-family: var(--font-cuerpo);
  font-size: 0.9rem;
  font-weight: 500;
  color: hsl(348, 22%, 34%);
  background: var(--rojo-pasion-claro);
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: rgba(196, 30, 58, 0.15);
  touch-action: manipulation;
}

.filtro-galeria:hover {
  border-color: var(--rojo-pasion);
  color: var(--rojo-pasion);
}

.filtro-galeria--activo {
  background: var(--rojo-pasion);
  color: #fff;
  border-color: var(--rojo-pasion);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}

/* 12 miniaturas: 4 columnas × 3 filas; ancho completo del contenedor de la sección */
.galeria--rejilla4x3 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: clamp(0.45rem, 1.5vw, 0.85rem);
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 560px) {
  .galeria--rejilla4x3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 480px) {
  .galeria--rejilla4x3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
  }

  .galeria:not(.galeria--rejilla4x3) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .filtros-galeria {
    justify-content: stretch;
    gap: 0.45rem;
  }

  .filtro-galeria {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 0.88rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

.galeria__item {
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: linear-gradient(180deg, var(--rojo-pasion-claro) 0%, hsl(350, 55%, 96%) 100%);
  border: 1px solid rgba(196, 30, 58, 0.35);
  box-shadow: 0 4px 18px rgba(139, 21, 40, 0.1);
  transition: opacity 0.25s, transform 0.25s, border-color 0.2s, box-shadow 0.2s;
}

.galeria__item:hover {
  border-color: var(--rojo-pasion);
  box-shadow: 0 10px 28px rgba(139, 21, 40, 0.16);
}

.galeria__item[data-oculta="true"] {
  display: none;
}

.galeria__abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: zoom-in;
  background: hsl(350, 42%, 92%);
  -webkit-tap-highlight-color: rgba(196, 30, 58, 0.15);
  touch-action: manipulation;
}

.galeria__abrir img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.galeria--rejilla4x3 .galeria__abrir img {
  aspect-ratio: 1;
  object-fit: cover;
}

.galeria__item:hover .galeria__abrir img {
  transform: scale(1.04);
}

.galeria__item figcaption {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  color: hsl(348, 22%, 34%);
  text-align: center;
}

/* Acordeón informativo (debajo de la galería) */

.seccion--acordeon-info {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.acordeon-editorial {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: linear-gradient(180deg, var(--rojo-pasion-claro) 0%, hsl(350, 55%, 96%) 100%);
  box-shadow: 0 4px 18px rgba(139, 21, 40, 0.1);
}

.acordeon-item {
  border-bottom: 1px solid rgba(196, 30, 58, 0.22);
}

.acordeon-item:last-child {
  border-bottom: none;
}

.acordeon-item__barra {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  margin: 0;
  border: none;
  background: var(--color-superficie-interior);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: rgba(196, 91, 122, 0.12);
}

.acordeon-item__barra:hover {
  background: hsl(352, 48%, 96%);
}

.acordeon-item--abierto .acordeon-item__barra {
  background: hsl(352, 48%, 96%);
  box-shadow: inset 0 3px 0 var(--rojo-pasion);
}

.acordeon-item__titulo {
  flex: 1;
  line-height: 1.35;
}

.acordeon-item__chevron {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  color: var(--rojo-pasion);
}

.acordeon-item__chevron::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.acordeon-item--abierto .acordeon-item__chevron::before {
  transform: translateY(2px) rotate(-135deg);
}

.acordeon-item__panel {
  border-top: 1px solid rgba(196, 30, 58, 0.18);
  background: hsl(352, 42%, 97%);
}

.acordeon-item__panel[hidden] {
  display: none !important;
}

.acordeon-item__contenido {
  padding: 1.25rem 1.15rem 1.5rem;
  color: var(--color-texto-suave);
  font-size: 0.98rem;
  line-height: 1.65;
}

.acordeon-item__contenido .subtitulo-bloque {
  margin-top: 0.5rem;
}

/* Modalidades */

.modalidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 480px) {
  .modalidad {
    padding: 1.5rem 1.25rem;
  }
}

.modalidad {
  padding: 2rem;
  border-radius: var(--radio-grande);
  background: linear-gradient(180deg, var(--rojo-pasion-claro) 0%, hsl(350, 55%, 96%) 100%);
  border: 1px solid rgba(196, 30, 58, 0.35);
  box-shadow: 0 4px 18px rgba(139, 21, 40, 0.08);
}

.modalidad--destacada {
  border-color: var(--rojo-pasion);
  box-shadow: 0 0 0 1px var(--rojo-pasion), 0 8px 28px rgba(139, 21, 40, 0.14);
  background: linear-gradient(
    180deg,
    hsl(352, 48%, 96%) 0%,
    hsl(355, 45%, 91%) 100%
  );
}

.modalidad__titulo {
  margin: 0 0 0.75rem;
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  color: var(--rojo-pasion);
}

.modalidad__texto {
  margin: 0 0 1rem;
  color: var(--color-texto-suave);
  font-size: 0.98rem;
}

.modalidad__lista {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-texto);
}

.modalidad__lista li {
  margin-bottom: 0.35rem;
}

/* Contacto */

.seccion--contacto {
  padding-bottom: 5rem;
}

.formulario-contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.formulario-contacto__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.formulario-contacto__campo span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-texto-suave);
}

.formulario-contacto__campo input,
.formulario-contacto__campo select,
.formulario-contacto__campo textarea {
  font-family: var(--font-cuerpo);
  /* 16px evita el zoom automático al enfocar en Safari iOS */
  font-size: max(1rem, 16px);
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  background: var(--color-superficie);
  color: var(--color-texto);
}

.formulario-contacto__campo textarea {
  min-height: 120px;
  resize: vertical;
}

.formulario-contacto__campo input:focus,
.formulario-contacto__campo select:focus,
.formulario-contacto__campo textarea:focus {
  outline: 2px solid rgba(196, 91, 122, 0.35);
  outline-offset: 2px;
  border-color: var(--color-primario);
}

.formulario-contacto__campo--ancho {
  grid-column: 1 / -1;
}

.formulario-contacto .btn--bloque {
  grid-column: 1 / -1;
  margin-top: 0.25rem;
}

.formulario-contacto__aviso {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.5rem;
  font-size: 0.9rem;
  color: var(--color-primario-oscuro);
}

@media (max-width: 520px) {
  .formulario-contacto {
    grid-template-columns: 1fr;
  }
}

/* Banner de cookies */

.cookies-banner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 180;
  padding: 1rem 1.1rem;
  border-radius: var(--radio-grande);
  border: 1px solid rgba(196, 30, 58, 0.4);
  background: linear-gradient(180deg, hsl(352, 48%, 96%) 0%, hsl(350, 55%, 93%) 100%);
  box-shadow: 0 14px 36px rgba(45, 36, 48, 0.16);
}

.cookies-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}

.cookies-banner__texto {
  margin: 0;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: hsl(348, 24%, 28%);
}

.cookies-banner__texto a {
  color: var(--rojo-pasion);
  font-weight: 700;
}

.cookies-banner__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cookies-banner__btn {
  min-width: 140px;
}

.cookies-banner__btn--aceptar {
  background: var(--rojo-pasion);
  color: #fff;
  border-color: var(--rojo-pasion);
}

.cookies-banner__btn--aceptar:hover {
  background: var(--rojo-pasion-oscuro);
  border-color: var(--rojo-pasion-oscuro);
}

.cookies-banner__btn--rechazar {
  background: #fff;
  color: var(--rojo-pasion-oscuro);
  border-color: rgba(196, 30, 58, 0.35);
}

.cookies-banner__btn--rechazar:hover {
  background: hsl(352, 48%, 97%);
  border-color: var(--rojo-pasion);
}

body.cookies-visible .whatsapp-flotante {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 8rem);
}

@media (max-width: 768px) {
  .cookies-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookies-banner__texto {
    max-width: none;
  }

  .cookies-banner__acciones {
    justify-content: stretch;
  }

  .cookies-banner__btn {
    width: 100%;
  }

  body.cookies-visible .whatsapp-flotante {
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 11.5rem);
  }
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  min-height: 100dvh;
  min-height: 100vh;
  background: rgba(20, 15, 25, 0.88);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__cerrar {
  grid-column: 1 / -1;
  justify-self: end;
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.lightbox__cerrar:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lightbox__figura {
  grid-column: 2;
  margin: 0;
  max-width: min(90vw, 900px);
  max-height: 80vh;
}

.lightbox__figura img {
  max-height: min(70vh, 70dvh);
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radio);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox__figura figcaption {
  margin-top: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

#lightboxCaption:empty {
  display: none;
  margin: 0;
}

.lightbox__nav {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  font-size: 1.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.lightbox__nav--prev {
  grid-column: 1;
  grid-row: 2;
}

.lightbox__nav--sig {
  grid-column: 3;
  grid-row: 2;
}

@media (max-width: 600px) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: start;
    row-gap: 0.5rem;
  }

  .lightbox__cerrar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .lightbox__figura {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: min(65dvh, 65vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .lightbox__figura img {
    max-height: min(58dvh, 58vh);
    width: auto;
    max-width: 100%;
  }

  .lightbox__nav--prev {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    margin-right: 0.35rem;
  }

  .lightbox__nav--sig {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-left: 0.35rem;
  }

  .lightbox__figura figcaption {
    margin-top: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.35;
  }
}