/* Ajustes propios de Capillas de Nazaret sobre la hoja de la plantilla.
   La hoja original no se toca: esto se carga después y corrige lo que
   dependía del framework retirado, más los cambios de identidad. */

/* ══════════════════════════════════════════════════════════════════
   CABECERA — fiel a la plantilla, con el logotipo agrandado
   La plantilla tiene dos estados y era el framework quien los alternaba
   al hacer scroll:
     .init      -> translúcida sobre la fotografía, texto blanco
     sin .init  -> crema sólida, texto en el azul de marca
   capillas.js repone ese comportamiento; aquí solo se define el aspecto
   y se agranda el logo, que es la única diferencia pedida.
   ══════════════════════════════════════════════════════════════════ */
header {
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* estado sólido (ya con scroll) */
header:not(.init) {
  box-shadow: 0 1px 14px rgba(11, 76, 130, .10);
}

header:not(.init) .gsso-header,
header:not(.init) .gsso-links,
header:not(.init) .gsso-links p,
header:not(.init) p {
  color: #0b4c82 !important;
}

header:not(.init) .icon-white svg path,
header:not(.init) mat-icon.icon-white svg path {
  fill: #0b4c82 !important;
}

header:not(.init) .mdc-button--outlined {
  border-color: #0b4c82 !important;
  color: #0b4c82 !important;
}

/* estado translúcido (arriba del todo, sobre la foto) */
header.init .gsso-header,
header.init .gsso-links,
header.init .gsso-links p,
header.init p {
  color: #fff !important;
}

header.init .icon-white svg path,
header.init mat-icon.icon-white svg path {
  fill: #fff !important;
}

header.init .mdc-button--outlined {
  border-color: #fff !important;
  color: #fff !important;
}

header.init .mdc-button--outlined:hover {
  background: rgba(255, 255, 255, .16) !important;
}

header:not(.init) .mdc-button--outlined:hover {
  background: #0b4c82 !important;
  color: #fff !important;
}

header:not(.init) .mdc-button--outlined:hover .icon-white svg path {
  fill: #fff !important;
}

/* ── Logotipo grande (la diferencia respecto al original) ──────────
   La plantilla lo centraba con `margin:0 auto` + `translate(-50%)`,
   que depende del ancho del propio logo: al agrandarlo se descentraba.
   Se centra respecto a la barra.                                     */
.logo-header {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  height: auto !important;
  display: flex;
  align-items: center;
  z-index: 2;
}

.gsso-header {
  position: relative;
}

header mat-icon.logo,
.logo-header mat-icon {
  width: auto !important;
  height: auto !important;
}

.logo-header img {
  max-height: 66px !important;
  height: 66px !important;
  width: auto !important;
}

/* sobre la foto el logo azul no contrasta: se aclara */
header.init .logo-header img {
  filter: brightness(0) invert(1);
}

/* el logo del pie también gana presencia */
footer img[alt*="Capillas"] {
  max-height: 96px !important;
}

/* ══════════════════════════════════════════════════════════════════
   MÓVIL: la barra de enlaces no cabe y desbordaba a lo ancho.
   Se pliega tras un botón de menú que inserta capillas.js.
   ══════════════════════════════════════════════════════════════════ */
.cn-boton-menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #0b4c82;
  border-radius: 10px;
  background: #fff;
  color: #0b4c82;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.cn-boton-menu span {
  display: block;
  width: 20px;
  height: 2px;
  background: #0b4c82;
  border-radius: 2px;
}

/* En escritorio el panel queda vacío y fuera del flujo: los enlaces
   vuelven a su posición original (capillas.js los devuelve al ensanchar). */
.cn-panel-movil {
  display: none;
}

@media (max-width: 1024px) {
  header,
  header.init {
    padding: 0 16px !important;
  }

  .cn-boton-menu {
    display: flex;
  }

  /* La barra conserva logo y botón; los enlaces viven en un panel que
     capillas.js arma envolviendo los dos grupos del escritorio. */
  .gsso-header {
    justify-content: space-between;
  }

  .cn-panel-movil {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    padding: 20px 20px 26px;
    border-top: 1px solid #e4ece7;
    box-shadow: 0 16px 30px rgba(3, 115, 94, .13);
    z-index: 40;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .gsso-header.cn-menu-abierto .cn-panel-movil {
    display: flex;
  }

  .cn-panel-movil > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    width: 100%;
  }

  /* en móvil el logo va a la derecha de la barra, no centrado */
  .logo-header {
    position: static !important;
    transform: none !important;
    margin: 0 0 0 auto !important;
  }

  header mat-icon.logo,
  .logo-header mat-icon {
    position: static !important;
    margin: 0 !important;
  }

  .logo-header img {
    max-height: 52px !important;
    height: 52px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ENCABEZADO DEL INICIO
   Texto blanco sobre fotografía: hace falta un velo para que se lea.
   ══════════════════════════════════════════════════════════════════ */
.gsso-main-home {
  position: relative;
}

.gsso-main-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, .34) 0%,
      rgba(0, 0, 0, .16) 42%,
      rgba(0, 0, 0, .30) 78%,
      rgba(248, 249, 250, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.gsso-main-home > *:not(swiper-container) {
  position: relative;
  z-index: 2;
}

#title,
#subtitle {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .38);
}

@media (max-width: 900px) {
  #title {
    font-size: 40px !important;
    line-height: 44px !important;
    width: 88% !important;
    top: 22% !important;
  }

  #subtitle {
    font-size: 24px !important;
    line-height: 29px !important;
    width: 88%;
    margin: 0 auto;
    top: 68% !important;
  }
}

@media (max-width: 560px) {
  #title {
    font-size: 31px !important;
    line-height: 35px !important;
    top: 19% !important;
  }

  #subtitle {
    font-size: 19px !important;
    line-height: 24px !important;
    top: 66% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CARRUSELES (sustituyen al componente que traía la plantilla)
   ══════════════════════════════════════════════════════════════════ */
.cn-carrusel-envoltura {
  position: relative;
  padding: 0 4px;
}

swiper-container.cn-carrusel {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
  height: auto !important;
  cursor: grab;
}

swiper-container.cn-carrusel.cn-arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

swiper-container.cn-carrusel::-webkit-scrollbar {
  display: none;
}

swiper-container.cn-carrusel > swiper-slide {
  display: block;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.cn-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #1a6fa8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
  transition: background .25s, color .25s, opacity .25s;
}

.cn-flecha:hover {
  background: #1a6fa8;
  color: #fff;
}

/* dentro del ancho: antes sobresalían y provocaban scroll horizontal */
.cn-flecha-izq { left: 6px; }
.cn-flecha-der { right: 6px; }

.cn-flecha[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .cn-flecha { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ESCALA TIPOGRÁFICA EN MÓVIL
   La plantilla fija tamaños grandes en píxeles (48/70/32/22 px). En
   pantallas estrechas una palabra larga como "Acompañamiento" no cabe
   y estira el contenedor por encima del ancho de la pantalla.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* que las cajas puedan encogerse por debajo de su ancho intrínseco */
  section > div,
  section > article,
  .flex.flex-col {
    min-width: 0;
  }

  /* solo los títulos de sección; el aviso fijo de contacto y las
     tarjetas tienen su propia escala y no deben crecer */
  section h2[class*="text-["],
  section h3[class*="text-["] {
    font-size: clamp(26px, 7.4vw, 44px) !important;
    line-height: 1.14 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .gsso-info-decesead h3,
  .gsso-info-decesead p,
  .gsso-card-blog h3,
  .gsso-card-blog p {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  p[class*="text-[22px]"],
  p[class*="text-[24px]"],
  p[class*="text-[32px]"] {
    font-size: clamp(15px, 4.2vw, 20px) !important;
    line-height: 1.5 !important;
  }

  /* márgenes laterales coherentes en todas las secciones */
  section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Ritmo vertical uniforme entre secciones ─────────────────────── */
app-locations > article,
app-history,
app-known-us,
app-banners {
  display: block;
}

@media (max-width: 1023px) {
  app-locations > article,
  app-history,
  app-known-us {
    margin-top: 34px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FOCO VISIBLE Y NADA DE DESBORDE LATERAL
   ══════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0b4c82;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Contener el desborde lateral SIN romper el scroll vertical.
   `overflow-x:hidden` en <html> lo convierte en contenedor de scroll y
   deja la página clavada; `clip` recorta sin crear ese contenedor. */
body {
  max-width: 100%;
  overflow-x: clip;
}

/* La retícula de instalaciones de la plantilla define columnas de 60% y
   40% MÁS un gap de 2 px: suma 100% + 2 px y saca barra horizontal en
   escritorio. Se descuenta el gap de las columnas. */
.gsso-grid-instalations {
  grid-template-columns: calc(60% - 1px) calc(40% - 1px) !important;
}

@media (max-width: 1024px) {
  .gsso-grid-instalations {
    grid-template-columns: 100% !important;
  }
}

/* Mismo caso: tres imágenes al 33,33% más dos gaps de 2 px suman
   100% + 4 px. Con flex se reparten el espacio ya descontado. */
.gsso-carrousel-locations > img {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Las tarjetas de "Conócenos" traen alto fijo (322 px). El texto de
   Capillas —la lista de municipios— es más largo que el original y se
   cortaba por abajo. Que crezcan con su contenido. */
.gsso-card-known {
  height: auto !important;
  min-height: 322px;
}

/* ══════════════════════════════════════════════════════════════════
   SLIDER DE FAMILIAS
   Sustituye a los tres banners de la plantilla, que traían la marca y
   los premios de la funeraria original impresos en el propio archivo.
   Las fotos de Capillas son verticales (360×715 y 720×1600), así que
   se muestran como tarjetas en fila, no como banda apaisada.
   ══════════════════════════════════════════════════════════════════ */
/* Las medidas van con !important: la hoja de la plantilla dimensiona
   estas imágenes con selectores de Angular del tipo
   `swiper-container[_ngcontent-x] img[_ngcontent-x]`, que tienen más
   especificidad que una clase suelta y dejaban la foto a su tamaño
   natural (361×1600), reventando la maquetación en móvil. */
swiper-container .cn-foto-familia,
.cn-foto-familia {
  width: 320px !important;
  height: 560px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(11, 76, 130, .16);
  display: block;
  background: #eef3f8;
}

@media (max-width: 1024px) {
  swiper-container .cn-foto-familia,
  .cn-foto-familia {
    width: 240px !important;
    height: 420px !important;
  }
}

@media (max-width: 560px) {
  swiper-container .cn-foto-familia,
  .cn-foto-familia {
    width: 200px !important;
    height: 350px !important;
  }
}

/* el propio carril tampoco debe heredar el alto fijo de la plantilla */
swiper-container.cn-carrusel:has(.cn-foto-familia) {
  height: auto !important;
  align-items: flex-start;
}

/* ══════════════════════════════════════════════════════════════════
   BARRA DE REDES SOCIALES, SUPERPUESTA A LA IZQUIERDA
   ══════════════════════════════════════════════════════════════════ */
.cn-redes {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.cn-red {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: width .18s ease, filter .18s ease;
}

.cn-red svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.cn-red:hover {
  width: 56px;
  filter: brightness(1.12);
}

.cn-red:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.cn-ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.cn-fb { background: #1877f2; }
.cn-yt { background: #ff0000; }
.cn-tt { background: #010101; }
.cn-wa { background: #25d366; }

/* en móvil la barra baja de tamaño para no tapar contenido */
@media (max-width: 640px) {
  .cn-redes {
    top: auto;
    bottom: 96px;
    transform: none;
    border-radius: 0 10px 10px 0;
  }

  .cn-red {
    width: 38px;
    height: 38px;
  }

  .cn-red svg {
    width: 18px;
    height: 18px;
  }

  .cn-red:hover {
    width: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ENCABEZADO DEL INICIO: CARRUSEL DE FONDO Y FLECHAS
   El componente de la plantilla rotaba cuatro fotografías con fundido
   cada 5 s (autoplay-delay="5000") y pintaba tres flechas animadas
   invitando a bajar. Al retirar el framework se quedó una imagen fija
   y las flechas vacías; esto lo repone.
   ══════════════════════════════════════════════════════════════════ */
.gsso-main-home swiper-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.gsso-main-home swiper-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}

.gsso-main-home swiper-slide.cn-visible {
  opacity: 1;
}

/* puntos de paginación, como en el original */
.cn-puntos {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}

.cn-punto {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}

.cn-punto.cn-activo {
  background: #fff;
  width: 26px;
}

/* ── Flechas animadas que invitan a bajar ───────────────────────── */
.cn-flechas-abajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: center;
}

.cn-flechas-abajo span {
  display: block;
  width: 26px;
  height: 26px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  opacity: 0;
  animation: cn-bajar 2s infinite;
}

.cn-flechas-abajo span:nth-child(2) { animation-delay: .22s; }
.cn-flechas-abajo span:nth-child(3) { animation-delay: .44s; }

@keyframes cn-bajar {
  0%   { opacity: 0; transform: rotate(45deg) translate(-6px, -6px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) translate(6px, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-flechas-abajo span { animation: none; opacity: .85; }
  .gsso-main-home swiper-slide { transition: none; }
}

/* ── Entrada suave del rótulo y el lema ─────────────────────────── */
#title,
#subtitle {
  animation: cn-entrar 1.1s ease-out both;
}

#subtitle { animation-delay: .3s; }

@keyframes cn-entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #title, #subtitle { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   BOTONES RECUPERADOS DEL MENÚ ANTERIOR
   La cabecera de la plantilla traía su propio juego de enlaces y al
   adoptarla se perdieron cuatro que Capillas ya publicaba: Inicio,
   Empleados, la línea de atención y el botón de asesoría.
   ══════════════════════════════════════════════════════════════════ */
.cn-linea-atencion {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}

.cn-linea-rotulo {
  font-size: 10.5px;
  opacity: .8;
  letter-spacing: .3px;
}

.cn-linea-numero {
  font-size: 14px;
  font-weight: 700;
}

.cn-asesoria {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  transition: filter .2s ease, transform .2s ease;
}

.cn-asesoria:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Con cuatro enlaces más la barra va justa: se aprieta el espaciado
   y se recortan los saltos por debajo de 1500 px. */
@media (min-width: 1025px) {
  .gsso-header > .flex.items-center.gap-\[40px\] {
    gap: 20px !important;
  }

  .gsso-header > .flex.gap-\[16px\] {
    gap: 14px !important;
  }
}

@media (min-width: 1025px) and (max-width: 1480px) {
  .cn-linea-atencion { display: none; }
}

@media (min-width: 1025px) and (max-width: 1330px) {
  header .gsso-links { font-size: 14px !important; }
  .cn-asesoria { padding: 8px 13px; font-size: 13px; }
}

/* en móvil van dentro del panel desplegable, en columna */
@media (max-width: 1024px) {
  .cn-linea-atencion { flex-direction: row; gap: 8px; align-items: baseline; }
  .cn-asesoria { align-self: flex-start; }
}