/* =========================================================
   INICIO.CSS - DEPURADO
   Parroquia San Francisco de Asís - Dapa

   Estilos exclusivos de la página de Inicio.
   Mantiene el diseño y responsive actual.
========================================================= */

.home2 {
  overflow: hidden;
}
.home2-parish-life {
  position: relative;
  padding: 110px 0;
  background: linear-gradient( 180deg, #ffffff 0%, #fbf8f2 100% );
}
.home2-life-heading {
  max-width: 840px;
  margin: 0 auto 58px;
  text-align: center;
}
.home2-life-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--vino);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
}
.home2-life-kicker::before,
.home2-life-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--dorado);
}
.home2-life-heading h2 {
  margin-bottom: 18px;
  font-family: var(--titulo);
  color: var(--vino-oscuro);
  font-size: clamp( 2.5rem, 4.6vw, 4.2rem );
  line-height: 1.05;
}
.home2-life-heading h2 span {
  color: var(--vino);
}
.home2-life-heading p {
  max-width: 670px;
  margin: auto;
  color: var(--gris);
  line-height: 1.8;
}
.home2-life-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.home2-life-card {
  position: relative;
  min-height: 350px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(111, 29, 46, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(61, 38, 30, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.home2-life-card::after {
  content: "";
  position: absolute;
  right: -65px;
  bottom: -65px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(198, 161, 91, 0.18);
  border-radius: 50%;
  transition: transform 0.45s ease;
}
.home2-life-card:hover {
  transform: translateY(-7px);
  border-color: rgba(198, 161, 91, 0.35);
  box-shadow: 0 24px 55px rgba(61, 38, 30, 0.10);
}
.home2-life-card:hover::after {
  transform: scale(1.24);
}
.home2-life-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 55px;
}
.home2-life-number {
  color: var(--dorado);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.home2-life-emoji {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(111, 29, 46, 0.065);
  font-size: 1.25rem;
}
.home2-life-card h3 {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
  color: var(--vino-oscuro);
  font-family: var(--titulo);
  font-size: 1.8rem;
}
.home2-life-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--gris);
  font-size: 0.9rem;
  line-height: 1.8;
}
.parroquia-360 {
  position: relative;
  padding: 110px 0;
  overflow: hidden;
  background: radial-gradient( circle at 88% 18%, rgba(198, 161, 91, 0.18), transparent 30% ), linear-gradient( 145deg, #351018, #611a2a );
  color: white;
}
.parroquia-360::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -170px;
  bottom: -190px;
  border: 1px solid rgba(224, 201, 146, 0.13);
  border-radius: 50%;
}
.parroquia-360-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 75px;
  align-items: center;
}
.parroquia-360-contenido {
  max-width: 580px;
}
.parroquia-360-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--dorado-claro);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.parroquia-360-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--dorado);
}
.parroquia-360 h2 {
  margin-bottom: 22px;
  font-family: var(--titulo);
  font-size: clamp( 2.7rem, 5vw, 4.8rem );
  line-height: 1;
  letter-spacing: -0.02em;
}
.parroquia-360 h2 span {
  display: block;
  color: var(--dorado-claro);
}
.parroquia-360-descripcion {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.85;
}
.parroquia-360-valores {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.parroquia-360-valor {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
}
.parroquia-360-valor span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dorado-claro);
}
.parroquia-360-visual {
  position: relative;
  min-height: 480px;
}
.parroquia-360-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(224, 201, 146, 0.28);
  border-radius: 26px 80px 26px 26px;
  box-shadow: 0 28px 65px rgba(21, 5, 10, 0.32);
  background: #2a1820;
}
.parroquia-360-marco iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.parroquia-360-badge {
  position: absolute;
  z-index: 3;
  left: -24px;
  bottom: 34px;
  min-width: 220px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(224, 201, 146, 0.30);
  border-radius: 18px;
  background: rgba(57, 17, 27, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 35px rgba(15, 4, 8, 0.25);
}
.parroquia-360-badge-icono {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(224, 201, 146, 0.42);
  border-radius: 50%;
  color: var(--dorado-claro);
  font-family: var(--titulo);
  font-size: 1rem;
}
.parroquia-360-badge strong {
  display: block;
  margin-bottom: 2px;
  color: white;
  font-size: 0.82rem;
}
.parroquia-360-badge small {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.67rem;
}
.home-slider {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  background: #211015;
}
.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}
.home-slide.active {
  opacity: 1;
  visibility: visible;
}
.home-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 7s ease;
}
.home-slide.active img {
  transform: scale(1.065);
}
.home-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient( 90deg, rgba(42, 10, 18, 0.78) 0%, rgba(56, 12, 24, 0.52) 46%, rgba(0, 0, 0, 0.10) 100% );
}
.home-slide-content {
  position: relative;
  z-index: 3;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 60px 0 90px;
}
.home-slide-title {
  max-width: 780px;
  color: white;
  font-family: var(--titulo);
  font-size: clamp( 3rem, 6vw, 5.7rem );
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-shadow: 0 5px 25px rgba(0, 0, 0, 0.18);
}
.home-slide-title span {
  display: block;
  margin-top: 7px;
  color: var(--dorado-claro);
}
.home-slider-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  background: rgba(31, 12, 18, 0.34);
  color: white;
  font-size: 2rem;
  cursor: pointer;
  backdrop-filter: blur(7px);
  transform: translateY(-50%);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.home-slider-arrow:hover {
  background: rgba(111, 29, 46, 0.82);
  border-color: rgba(224, 201, 146, 0.55);
}
.home-slider-prev {
  left: 24px;
}
.home-slider-next {
  right: 24px;
}
.home-slider-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
}
.home-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.50);
  cursor: pointer;
  transition: width 0.25s ease, border-radius 0.25s ease, background 0.25s ease;
}
.home-slider-dot.active {
  width: 28px;
  border-radius: 999px;
  background: var(--dorado-claro);
}
.home-slider-corner {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  min-height: 48px;
  padding: 0 27px;
  display: flex;
  align-items: center;
  background: rgba(77, 18, 31, 0.93);
  border-top-left-radius: 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.parroquia-360-visual {
  position: relative;
  padding: 13px;
  border: 1px solid rgba(111, 29, 46, 0.08);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 62px rgba(59, 38, 31, 0.12);
  animation: recorridoEntrada 0.7s ease both;
}
.parroquia-360-marco {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp( 350px, 32vw, 485px );
  border-radius: 18px;
  background: #ded7cc;
}
.parroquia-360-marco iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.parroquia-360-badge {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 4;
  min-height: 46px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  background: rgba(43, 24, 29, 0.82);
  color: white;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.parroquia-360-badge-icono {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--vino-oscuro);
  font-size: 0.75rem;
}
.parroquia-360-badge strong {
  font-size: 0.72rem;
}
.parroquia-360-badge small {
  display: block;
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.57rem;
}
.parroquia-360-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -14px;
  bottom: -14px;
  width: 70%;
  height: 65%;
  border: 1px solid rgba(198, 161, 91, 0.48);
  border-radius: 24px;
}
@keyframes recorridoEntrada {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 900px) {
  .parroquia-360 {
    padding: 72px 0 76px;
  }
  .parroquia-360-grid {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
    gap: 34px;
  }
  .parroquia-360-contenido h2 {
    font-size: clamp( 2.35rem, 5.4vw, 3.35rem );
  }
}
@media (max-width: 720px) {
  .parroquia-360-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .parroquia-360-contenido {
    max-width: 660px;
  }
  .parroquia-360-visual {
    width: 100%;
  }
  .parroquia-360-marco {
    height: 420px;
  }
}
@media (max-width: 600px) {
  .parroquia-360 {
    padding: 60px 0 66px;
  }
  .parroquia-360-contenido h2 {
    font-size: clamp( 2.25rem, 10vw, 3rem );
  }
  .parroquia-360-descripcion {
    font-size: 0.88rem;
  }
  .parroquia-360-marco {
    height: 360px;
  }
  .parroquia-360-badge {
    left: 22px;
    bottom: 22px;
  }
}
@media (max-width: 390px) {
  .parroquia-360-marco {
    height: 330px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .parroquia-360::before,
  .parroquia-360::after,
  .parroquia-360-visual {
    animation: none;
  }
}
@media (max-width: 850px) {
  .home2-life-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .home2-life-card {
    min-height: 195px;
    padding: 20px 18px;
  }
}
.home-slider {
  position: relative;
  width: 100%;
  height: clamp( 520px, 39.58vw, 760px );
  min-height: 520px;
  max-height: 760px;
  overflow: hidden;
  background: #16090d;
  isolation: isolate;
}
.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 6.5s ease;
}
.home-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.home-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.home-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( 90deg, rgba(20, 5, 9, 0.57) 0%, rgba(20, 5, 9, 0.20) 48%, rgba(0, 0, 0, 0.08) 100% ), linear-gradient( to top, rgba(0, 0, 0, 0.27), transparent 45% );
}
.home-slide-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}
.home-slide-title {
  max-width: 780px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp( 3rem, 5vw, 5rem );
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fffaf0;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.60), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.home-slide-title span {
  display: block;
  margin-top: 6px;
  color: var(--dorado-claro);
  font-style: italic;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.65), 0 10px 30px rgba(0, 0, 0, 0.38);
}
.home-slider-arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.14);
  color: white;
  backdrop-filter: blur(6px);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.home-slider-arrow:hover {
  background: rgba(111, 29, 46, 0.88);
  border-color: rgba(223, 197, 143, 0.6);
}
.home-slider-prev {
  left: 24px;
}
.home-slider-next {
  right: 24px;
}
.home-slider-dots {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.home-slider-dot.active {
  width: 31px;
  background: var(--dorado-claro);
}
.home-slider-corner {
  position: absolute;
  z-index: 8;
  right: 34px;
  bottom: 25px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(6px);
}
.home-slider-corner span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .home-slider {
    height: 570px;
    min-height: 570px;
  }
  .home-slide-title {
    max-width: 650px;
    font-size: clamp( 2.7rem, 7vw, 4rem );
  }
  .home-slide-overlay {
    background: linear-gradient( 90deg, rgba(20, 5, 9, 0.62) 0%, rgba(20, 5, 9, 0.28) 60%, rgba(0, 0, 0, 0.10) 100% ), linear-gradient( to top, rgba(0, 0, 0, 0.27), transparent 45% );
  }
  .home-slider-arrow {
    width: 45px;
    height: 45px;
  }
  .home-slider-prev {
    left: 13px;
  }
  .home-slider-next {
    right: 13px;
  }
  .home-slider-corner {
    display: none;
  }
}
@media (max-width: 600px) {
  .home-slider {
    height: 520px;
    min-height: 520px;
  }
  .home-slide > img {
    object-position: center center;
  }
  .home-slide-overlay {
    background: linear-gradient( 90deg, rgba(30, 7, 14, 0.64) 0%, rgba(30, 7, 14, 0.22) 100% ), linear-gradient( to top, rgba(0, 0, 0, 0.32), transparent 50% );
  }
  .home-slide-content {
    align-items: flex-end;
    padding-bottom: 90px;
  }
  .home-slide-title {
    max-width: 92%;
    font-size: clamp( 2.4rem, 10vw, 3.2rem );
    line-height: 1.03;
  }
  .home-slider-arrow {
    top: auto;
    bottom: 18px;
    width: 40px;
    height: 40px;
    transform: none;
    font-size: 1.5rem;
  }
  .home-slider-prev {
    left: 17px;
  }
  .home-slider-next {
    right: 17px;
  }
  .home-slider-dots {
    bottom: 31px;
  }
}
.inicio-bienvenida-v3 {
  position: relative;
  padding: 105px 0;
  overflow: hidden;
  background: radial-gradient( circle at 12% 18%, rgba(198, 161, 91, 0.13), transparent 24% ), radial-gradient( circle at 88% 82%, rgba(111, 29, 46, 0.07), transparent 27% ), linear-gradient( 135deg, #fffdf9 0%, #f8f3e9 52%, #fcfaf5 100% );
}
.bienvenida-v3-decoracion {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.bienvenida-v3-decoracion-1 {
  width: 360px;
  height: 360px;
  left: -190px;
  bottom: -200px;
  border: 1px solid rgba(198, 161, 91, 0.17);
}
.bienvenida-v3-decoracion-1::before {
  content: "";
  position: absolute;
  inset: 45px;
  border: 1px solid rgba(198, 161, 91, 0.10);
  border-radius: 50%;
}
.bienvenida-v3-decoracion-2 {
  width: 230px;
  height: 230px;
  right: -120px;
  top: 50px;
  background: rgba(111, 29, 46, 0.025);
  border: 1px solid rgba(111, 29, 46, 0.06);
}
.bienvenida-v3-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp( 55px, 7vw, 100px );
}
.bienvenida-v3-contenido {
  max-width: 690px;
}
.bienvenida-v3-etiqueta {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--vino);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.bienvenida-v3-linea {
  width: 38px;
  height: 1px;
  background: var(--dorado);
}
.bienvenida-v3-contenido h2 {
  max-width: 680px;
  margin: 0 0 25px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp( 2.7rem, 4.6vw, 4.45rem );
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--vino-oscuro);
}
.bienvenida-v3-contenido h2 span {
  display: block;
  color: var(--vino);
  font-style: italic;
}
.bienvenida-v3-destacado {
  max-width: 620px;
  margin-bottom: 18px;
  color: #423b38;
  font-size: clamp( 1rem, 1.4vw, 1.12rem );
  font-weight: 500;
  line-height: 1.8;
}
.bienvenida-v3-descripcion {
  max-width: 620px;
  margin-bottom: 34px;
  color: #68615d;
  font-size: 0.95rem;
  line-height: 1.85;
}
.bienvenida-v3-valores {
  padding-top: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid rgba(111, 29, 46, 0.10);
}
.bienvenida-v3-valor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bienvenida-v3-punto {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 0 0 4px rgba(198, 161, 91, 0.10);
}
.bienvenida-v3-valor div {
  display: flex;
  flex-direction: column;
}
.bienvenida-v3-valor strong {
  margin-bottom: 2px;
  color: var(--vino-oscuro);
  font-family: var(--titulo);
  font-size: 1rem;
}
.bienvenida-v3-valor small {
  color: #837a74;
  font-size: 0.68rem;
  line-height: 1.4;
}
.bienvenida-v3-visual {
  position: relative;
  min-height: 540px;
}
.bienvenida-v3-marco {
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: 140px 24px 24px 24px;
}
.bienvenida-v3-imagen {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: hidden;
  border-radius: 140px 24px 24px 24px;
  box-shadow: 0 28px 65px rgba(56, 35, 29, 0.15);
}
.bienvenida-v3-imagen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 7s ease;
}
.inicio-bienvenida-v3:hover
.bienvenida-v3-imagen img {
  transform: scale(1.025);
}
.bienvenida-v3-imagen-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( to top, rgba(64, 16, 28, 0.22), transparent 45% );
}
.bienvenida-v3-simbolo {
  position: absolute;
  z-index: 4;
  right: -25px;
  top: 70px;
  width: 100px;
  height: 100px;
  padding: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vino);
  color: var(--dorado-claro);
  border: 5px solid #f9f5ed;
  box-shadow: 0 15px 35px rgba(76, 18, 31, 0.20);
  animation: bienvenidaFlotar 5s ease-in-out infinite;
}
.bienvenida-v3-simbolo svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes bienvenidaFlotar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.emisora-v4 {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: radial-gradient( circle at 7% 15%, rgba(198, 161, 91, 0.14), transparent 23% ), radial-gradient( circle at 93% 82%, rgba(111, 29, 46, 0.055), transparent 26% ), linear-gradient( 135deg, #f9f5ec 0%, #f1e8d8 52%, #faf7f1 100% );
}
.emisora-v4::before {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -150px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(198, 161, 91, 0.15);
  border-radius: 50%;
  pointer-events: none;
}
.emisora-v4::after {
  content: "";
  position: absolute;
  right: -95px;
  top: -110px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(111, 29, 46, 0.035);
  pointer-events: none;
}
.emisora-v4-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp( 52px, 6vw, 84px );
}
.emisora-v4-identidad {
  width: 100%;
  max-width: 410px;
  margin: 0 auto;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid rgba(111, 29, 46, 0.075);
  border-radius: 105px 24px 24px 24px;
  background: linear-gradient( 160deg, rgba(255, 255, 255, 0.93), rgba(255, 252, 246, 0.74) );
  box-shadow: 0 24px 60px rgba(69, 42, 32, 0.08);
}
.emisora-v4-logo-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.emisora-v4-logo-titulo {
  color: var(--vino-oscuro);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.emisora-v4-logo-bloque {
  width: min( 100%, 235px );
  aspect-ratio: 1 / 1;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(111, 29, 46, 0.07);
  box-shadow: 0 12px 32px rgba(55, 30, 25, 0.07);
}
.emisora-v4-logo-bloque--emisora {
  background: linear-gradient( 145deg, #ffffff, #fcfaf5 );
}
.emisora-v4-logo-bloque img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.emisora-v4-separador {
  height: 32px;
  display: grid;
  place-items: center;
}
.emisora-v4-separador span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--dorado);
  background: rgba(198, 161, 91, 0.09);
  font-family: var(--titulo);
  font-size: 1.15rem;
}
.emisora-v4-info {
  width: 100%;
  max-width: 760px;
}
.emisora-v4-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--vino);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.emisora-v4-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--dorado);
}
.emisora-v4-info h2 {
  margin: 0 0 18px;
  color: var(--vino-oscuro);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp( 2.9rem, 4.4vw, 4.2rem );
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.emisora-v4-info h2 span {
  color: var(--vino);
  font-style: italic;
}
.emisora-v4-descripcion {
  max-width: 680px;
  margin: 0 0 26px;
  color: #675f5b;
  font-size: 0.95rem;
  line-height: 1.75;
}
.emisora-v4-player {
  position: relative;
  padding: 22px 25px 18px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient( circle at 92% 10%, rgba(198, 161, 91, 0.08), transparent 31% ), linear-gradient( 145deg, #17171a, #25252a );
  box-shadow: 0 22px 50px rgba(45, 31, 28, 0.17);
}
.emisora-v4-player-top {
  margin-bottom: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.emisora-v4-estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.emisora-v4-estado-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #df5260;
  box-shadow: 0 0 0 4px rgba(223, 82, 96, 0.09);
}
.emisora-v4-player-marca {
  color: rgba(224, 201, 146, 0.58);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.emisora-v4-player-principal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 19px;
}
.emisora-v4-play {
  width: 62px;
  height: 62px;
  padding-left: 4px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: linear-gradient( 145deg, #7a2136, var(--vino) );
  color: white;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(111, 29, 46, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.emisora-v4-play:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 32px rgba(111, 29, 46, 0.40);
}
.emisora-v4-player-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.emisora-v4-player-info > span {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.59rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.emisora-v4-player-info strong {
  margin-bottom: 3px;
  color: white;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}
.emisora-v4-player-info small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.66rem;
}
.emisora-v4-volumen {
  display: flex;
  align-items: center;
  gap: 8px;
}
.emisora-v4-volumen span {
  font-size: 0.88rem;
}
.emisora-v4-volumen input {
  width: 95px;
  cursor: pointer;
  accent-color: var(--dorado);
}
.emisora-v4-onda {
  height: 28px;
  margin: 17px auto 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0.28;
}
.emisora-v4-onda span {
  width: 3px;
  height: 8px;
  border-radius: 10px;
  background: var(--dorado-claro);
}
.emisora-v4-onda span:nth-child(2),
.emisora-v4-onda span:nth-child(6),
.emisora-v4-onda span:nth-child(10),
.emisora-v4-onda span:nth-child(14) {
  height: 21px;
}
.emisora-v4-onda span:nth-child(3),
.emisora-v4-onda span:nth-child(5),
.emisora-v4-onda span:nth-child(8),
.emisora-v4-onda span:nth-child(12) {
  height: 14px;
}
.emisora-v4-onda span:nth-child(4),
.emisora-v4-onda span:nth-child(9) {
  height: 25px;
}
.emisora-v4-mensaje {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.30);
  font-size: 0.61rem;
}
.emisora-v4-plataforma {
  margin-top: 22px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 0.85fr);
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(111, 29, 46, 0.10);
  border-left: 4px solid var(--dorado);
  border-radius: 18px;
  background: linear-gradient( 145deg, rgba(255, 255, 255, 0.78), rgba(255, 251, 244, 0.58) );
  box-shadow: 0 12px 30px rgba(64, 39, 31, 0.055);
}
.emisora-v4-plataforma-texto {
  margin: 0;
  color: #625752;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.65;
}
.emisora-v4-enlace {
  min-height: 72px;
  padding: 12px 16px 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(111, 29, 46, 0.16);
  border-radius: 15px;
  background: linear-gradient( 135deg, var(--vino), var(--vino-oscuro) );
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(111, 29, 46, 0.20);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.emisora-v4-enlace:hover {
  transform: translateY(-3px);
  border-color: rgba(198, 161, 91, 0.55);
  box-shadow: 0 16px 36px rgba(111, 29, 46, 0.28);
}
.emisora-v4-enlace-contenido {
  display: flex;
  flex-direction: column;
}
.emisora-v4-enlace-contenido > span {
  margin-bottom: 2px;
  color: var(--dorado-claro);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.emisora-v4-enlace-contenido strong {
  margin-top: 2px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
}
.emisora-v4-enlace-icono {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--vino-oscuro);
  font-size: 1.08rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
@media (max-width: 950px) {
  .emisora-v4 {
    padding: 78px 0;
  }
  .emisora-v4-grid {
    grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
    gap: 38px;
  }
  .emisora-v4-identidad {
    max-width: 360px;
    padding: 28px 22px;
  }
  .emisora-v4-logo-bloque {
    width: min( 100%, 210px );
  }
  .emisora-v4-plataforma {
    grid-template-columns: 1fr;
  }
  .emisora-v4-enlace {
    width: 100%;
  }
}
@media (max-width: 720px) {
  .emisora-v4-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .emisora-v4-identidad {
    max-width: 520px;
    width: 100%;
  }
  .emisora-v4-info {
    max-width: 680px;
    width: 100%;
    margin: auto;
  }
}
@media (max-width: 600px) {
  .emisora-v4 {
    padding: 65px 0;
  }
  .emisora-v4-identidad {
    padding: 26px 20px;
    border-radius: 75px 20px 20px 20px;
  }
  .emisora-v4-logo-titulo {
    font-size: 1rem;
  }
  .emisora-v4-logo-bloque {
    width: min( 100%, 205px );
    padding: 7px;
  }
  .emisora-v4-info h2 {
    font-size: clamp( 2.5rem, 11vw, 3.35rem );
  }
  .emisora-v4-player {
    padding: 20px 18px 17px;
  }
  .emisora-v4-player-principal {
    grid-template-columns: auto 1fr;
    gap: 14px;
  }
  .emisora-v4-volumen {
    grid-column: 1 / 3;
    padding-top: 10px;
    justify-content: flex-end;
  }
  .emisora-v4-volumen input {
    width: 125px;
  }
  .emisora-v4-plataforma {
    padding: 16px;
    gap: 14px;
  }
  .emisora-v4-plataforma-texto {
    font-size: 0.80rem;
  }
  .emisora-v4-enlace {
    min-height: 68px;
  }
}
@media (max-width: 390px) {
  .emisora-v4-identidad {
    padding: 22px 16px;
  }
  .emisora-v4-logo-bloque {
    width: min(100%, 190px);
  }
  .emisora-v4-player-marca {
    display: none;
  }
  .emisora-v4-play {
    width: 54px;
    height: 54px;
  }
  .emisora-v4-player-info strong {
    font-size: 1.03rem;
  }
}
@media (max-width: 850px) {
  .home2-parish-life {
    padding: 64px 0 68px;
  }
  .home2-life-heading {
    margin-bottom: 28px;
  }
  .home2-life-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .home2-life-card {
    min-height: 190px;
    padding: 18px 16px;
  }
  .home2-life-card h3 {
    font-size: 1.30rem;
  }
  .home2-life-card p {
    font-size: 0.76rem;
  }
}
@media (max-width: 700px) {
  .home2-life-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .home2-life-card {
    min-height: auto;
  }
}
@media (max-width: 600px) {
  .home2-parish-life {
    padding: 56px 0 60px;
  }
  .home2-life-heading h2 {
    font-size: clamp( 2.15rem, 10vw, 2.9rem );
  }
  .home2-life-heading p {
    font-size: 0.85rem;
  }
  .home2-life-card {
    padding: 19px 18px 18px;
    border-radius: 18px;
  }
  .home2-life-card-top {
    margin-bottom: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home2-parish-life::before,
  .home2-parish-life::after,
  .home2-life-card {
    animation: none;
  }
  .home2-life-card {
    transition: none;
  }
}
@media (max-width: 950px) {
  .inicio-bienvenida-v3 {
    padding: 86px 0;
  }
  .bienvenida-v3-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .bienvenida-v3-contenido {
    width: 100%;
    max-width: 760px;
  }
  .bienvenida-v3-visual {
    width: min( 100%, 720px );
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .inicio-bienvenida-v3 {
    padding: 68px 0;
  }
  .bienvenida-v3-grid {
    gap: 42px;
  }
  .bienvenida-v3-contenido h2 {
    font-size: clamp( 2.35rem, 11vw, 3.2rem );
  }
  .bienvenida-v3-valores {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bienvenida-v3-visual {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .bienvenida-v3-imagen,
  .bienvenida-v3-marco {
    width: calc( 100% - 14px );
    height: calc( 100% - 14px );
    border-radius: 82px 20px 20px 20px;
  }
  .bienvenida-v3-marco {
    top: 14px;
  }
  .bienvenida-v3-simbolo {
    right: 2px;
    top: 34px;
    width: 76px;
    height: 76px;
    padding: 14px;
    border-width: 4px;
  }
}
@media (max-width: 420px) {
  .bienvenida-v3-visual {
    aspect-ratio: 5 / 4;
  }
  .bienvenida-v3-imagen,
  .bienvenida-v3-marco {
    border-radius: 64px 18px 18px 18px;
  }
  .bienvenida-v3-simbolo {
    width: 68px;
    height: 68px;
    top: 28px;
    padding: 12px;
  }
}
@media (max-width: 600px) {
  .bienvenida-v3-visual {
    position: relative;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    margin: 0 auto;
    padding-bottom: 14px;
  }
  .bienvenida-v3-imagen {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    width: calc(100% - 14px);
    height: auto;
    overflow: hidden;
    border-radius: 82px 20px 20px 20px;
    box-shadow: 0 22px 50px rgba(56, 35, 29, 0.15);
  }
  .bienvenida-v3-imagen img {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .inicio-bienvenida-v3:hover
    .bienvenida-v3-imagen img {
    transform: none;
  }
  .bienvenida-v3-imagen-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient( to top, rgba(64, 16, 28, 0.16), transparent 42% );
  }
  .bienvenida-v3-marco {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    right: auto;
    bottom: 0;
    width: calc(100% - 14px);
    height: auto;
    border: 1px solid rgba(198, 161, 91, 0.55);
    border-radius: 82px 20px 20px 20px;
    pointer-events: none;
  }
  .bienvenida-v3-simbolo {
    z-index: 4;
    right: 0;
    top: 30px;
    width: 74px;
    height: 74px;
    padding: 13px;
    border-width: 4px;
  }
}
@media (max-width: 420px) {
  .bienvenida-v3-visual {
    aspect-ratio: auto;
    padding-bottom: 12px;
  }
  .bienvenida-v3-imagen {
    width: calc(100% - 12px);
    border-radius: 64px 18px 18px 18px;
  }
  .bienvenida-v3-marco {
    top: 12px;
    left: 12px;
    width: calc(100% - 12px);
    border-radius: 64px 18px 18px 18px;
  }
  .bienvenida-v3-simbolo {
    right: 0;
    top: 25px;
    width: 66px;
    height: 66px;
    padding: 11px;
  }
}
.home-slide-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.home-slide-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 600px) {
  .home-slider {
    height: 520px;
    min-height: 520px;
  }
  .home-slide-picture {
    width: 100%;
    height: 100%;
  }
  .home-slide-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}
.parroquia-360-visual {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(198, 161, 91, 0.42);
  border-radius: 28px;
  background: linear-gradient( 145deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 239, 0.88) );
  box-shadow: 0 28px 70px rgba(59, 38, 31, 0.17), 0 8px 22px rgba(111, 29, 46, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.parroquia-360-visual::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(198, 161, 91, 0.20);
  border-radius: 22px;
}
.parroquia-360-visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 34%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: linear-gradient( 90deg, transparent, #c6a15b, #e0c992, #c6a15b, transparent );
  box-shadow: 0 3px 12px rgba(198, 161, 91, 0.32);
}
.parroquia-360-marco {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #1d1512;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(31, 20, 16, 0.16);
}
.parroquia-360-marco iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 20px;
}
.parroquia-360-valores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.parroquia-360-valor {
  position: relative;
  min-height: 42px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(198, 161, 91, 0.48);
  border-radius: 999px;
  background: linear-gradient( 135deg, #6f1d2e, #4d121f );
  color: #ffffff;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  box-shadow: 0 8px 20px rgba(77, 18, 31, 0.13);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.parroquia-360-valor::after {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 75%;
  height: 100%;
  background: linear-gradient( 110deg, transparent, rgba(255, 255, 255, 0.15), transparent );
  transform: skewX(-18deg);
  transition: left 0.65s ease;
}
.parroquia-360-valor:hover {
  transform: translateY(-3px);
  border-color: rgba(224, 201, 146, 0.90);
  box-shadow: 0 13px 28px rgba(77, 18, 31, 0.20);
}
.parroquia-360-valor:hover::after {
  left: 140%;
}
.parroquia-360-valor > span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #e0c992;
  box-shadow: 0 0 0 4px rgba(224, 201, 146, 0.14), 0 0 12px rgba(224, 201, 146, 0.55);
}
.parroquia-360-badge {
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 10;
}
@media (max-width: 600px) {
  .parroquia-360-visual {
    padding: 10px;
    border-radius: 22px;
  }
  .parroquia-360-visual::before {
    inset: 4px;
    border-radius: 18px;
  }
  .parroquia-360-marco,
  .parroquia-360-marco iframe {
    border-radius: 16px;
  }
  .parroquia-360-valores {
    gap: 8px;
  }
  .parroquia-360-valor {
    padding: 9px 14px;
    font-size: 0.73rem;
  }
  .parroquia-360-badge {
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    max-width: calc(100% - 32px);
  }
}

/* =========================================================
   COMPATIBILIDAD MULTIDISPOSITIVO
   EMISORA + RECORRIDO 360°
   PC / iOS / Android / Tablet / Smart TV
========================================================= */


/* =========================================================
   CONTROLES DE VOLUMEN
========================================================= */

.emisora-v4-volumen-btn {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(224, 201, 146, 0.30);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    /*
     * Mejora respuesta táctil en:
     * iOS
     * Android
     * navegadores táctiles
     */
    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   BOTÓN MUTE
========================================================= */

.emisora-v4-volumen-btn--mute {
    font-size: 0.82rem;
}


/* =========================================================
   HOVER / FOCO
========================================================= */

.emisora-v4-volumen-btn:hover,
.emisora-v4-volumen-btn:focus-visible {
    border-color: rgba(224, 201, 146, 0.78);

    background: rgba(111, 29, 46, 0.72);

    outline: none;
}


.emisora-v4-volumen-btn:focus-visible {
    box-shadow:
        0 0 0 3px
        rgba(224, 201, 146, 0.25);
}


/* =========================================================
   SLIDER DE VOLUMEN
========================================================= */

.emisora-v4-volumen input[type="range"] {
    min-height: 34px;

    /*
     * Permite mover horizontalmente el volumen
     * sin generar conflictos táctiles.
     */
    touch-action: pan-x;
}


/* =========================================================
   OVERLAY DEL TOUR 360°
========================================================= */

.tour360-overlay-documento,
.tour360-overlay-body {
    overflow: hidden !important;

    overscroll-behavior: none;
}


/*
 * Cuando Safari/iOS no permite utilizar Fullscreen API
 * directamente sobre el iframe, el contenedor completo
 * se convierte en un overlay que ocupa toda la pantalla.
 */

.parroquia-360-visual.tour360-overlay-activo {
    position: fixed !important;

    inset: 0 !important;

    z-index: 2147483000 !important;

    width: 100vw !important;
    max-width: none !important;

    /*
     * --tour360-vh se actualiza mediante JavaScript
     * utilizando visualViewport cuando está disponible.
     */

    height: var(
        --tour360-vh,
        100dvh
    ) !important;

    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #1a1210 !important;

    box-shadow: none !important;
}


/* =========================================================
   ELIMINAR DECORACIONES EXTERNAS EN FULLSCREEN
========================================================= */

.parroquia-360-visual.tour360-overlay-activo::before,
.parroquia-360-visual.tour360-overlay-activo::after {
    display: none !important;
}

/* =========================================================
   VISOR 360° AL 100%
========================================================= */

.parroquia-360-visual.tour360-overlay-activo
.parroquia-360-marco,
.parroquia-360-visual.tour360-overlay-activo
.parroquia-360-marco iframe {

    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    border-radius: 0 !important;
}


/* =========================================================
   NAVEGADORES QUE NO SOPORTAN DVH
========================================================= */

@supports not (height: 100dvh) {

    .parroquia-360-visual.tour360-overlay-activo {

        height: var(
            --tour360-vh,
            100vh
        ) !important;

    }

}


/* =========================================================
   CELULARES
========================================================= */

@media (max-width: 600px) {

    .emisora-v4-volumen {

        width: 100%;

        justify-content: center;

        gap: 7px;

    }


    .emisora-v4-volumen
    input[type="range"] {

        width: min(
            34vw,
            145px
        );

    }


    .emisora-v4-volumen-btn {

        width: 38px;
        height: 38px;

        flex-basis: 38px;

    }

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
========================================================= */

@media (pointer: coarse) {

    /*
     * Apple y Google recomiendan áreas táctiles
     * suficientemente grandes.
     *
     * Esto también beneficia tablets,
     * Android TV táctil y otros dispositivos.
     */

    .emisora-v4-play,
    .emisora-v4-volumen-btn {

        min-width: 44px;
        min-height: 44px;

    }

}


/* =========================================================
   SAFARI / iOS
========================================================= */

@supports (-webkit-touch-callout: none) {

    .emisora-v4-volumen-btn {

        -webkit-appearance: none;

        appearance: none;

    }


    .parroquia-360-visual.tour360-overlay-activo {

        /*
         * Previene desplazamientos extraños de Safari
         * cuando aparecen/desaparecen sus barras.
         */

        max-height:
            var(
                --tour360-vh,
                100vh
            ) !important;

    }

}


/* =========================================================
   ORIENTACIÓN HORIZONTAL
   ESPECIALMENTE TELÉFONOS Y TABLETS
========================================================= */

@media (
    orientation: landscape
)
and
(max-height: 600px) {

    .parroquia-360-visual.tour360-overlay-activo {

        width: 100vw !important;

        height:
            var(
                --tour360-vh,
                100vh
            ) !important;

    }

}


/* =========================================================
   SMART TV / PANTALLAS GRANDES
========================================================= */

@media (min-width: 1600px) {

    .emisora-v4-volumen-btn {

        width: 40px;
        height: 40px;

        flex-basis: 40px;

    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .emisora-v4-volumen-btn {

        transition: none !important;

    }


    .parroquia-360-visual.tour360-overlay-activo {

        transition: none !important;

    }

}

/* =========================================================
   RECORRIDO 360 - AJUSTE FINAL RESPONSIVE

   Mantiene ambas etiquetas en la misma franja inferior:

   IZQUIERDA:
   Nombre de la escena + autor
   (controlado dentro de tour360.html)

   DERECHA:
   360° Vista inmersiva
   (controlado desde index.html)

   No se sacrifica espacio vertical de la fotografía.
========================================================= */


/* =========================================================
   CONTENEDOR
========================================================= */

/*
 * El visor determina su propia altura.
 *
 * Esto evita la antigua franja vacía debajo
 * de la fotografía.
 */

.parroquia-360-visual {

    min-height:
        0 !important;

}


/*
 * El marco deja de depender de posicionamiento
 * absoluto heredado de versiones anteriores.
 */

.parroquia-360-marco {

    position:
        relative !important;

    inset:
        auto !important;

}


/* =========================================================
   BADGE "360° VISTA INMERSIVA"
   PC / ESCRITORIO
========================================================= */

.parroquia-360-badge {

    position:
        absolute !important;

    z-index:
        20 !important;


    /*
     * Siempre abajo a la derecha.
     */

    left:
        auto !important;

    right:
        24px !important;

    bottom:
        24px !important;


    /*
     * Nunca puede invadir más de aproximadamente
     * el 42% de la imagen.
     *
     * El lado izquierdo queda reservado para
     * nombre + autor.
     */

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        42% !important;


    min-height:
        40px !important;


    margin:
        0 !important;


    padding:
        0
        13px !important;


    display:
        inline-flex !important;

    align-items:
        center !important;


    gap:
        8px !important;


    border-radius:
        999px !important;


    /*
     * El badge es informativo.
     * No debe interceptar gestos del recorrido.
     */

    pointer-events:
        none;

}


/* =========================================================
   ICONO 360°
========================================================= */

.parroquia-360-badge-icono {

    width:
        26px !important;

    height:
        26px !important;

    min-width:
        26px !important;


    flex:
        0 0 26px !important;


    font-size:
        0.70rem !important;

}


/* =========================================================
   TÍTULO
========================================================= */

.parroquia-360-badge strong {

    font-size:
        0.72rem !important;

    line-height:
        1.08 !important;


    white-space:
        nowrap;

}


/* =========================================================
   SUBTÍTULO
========================================================= */

.parroquia-360-badge small {

    margin-top:
        1px !important;


    font-size:
        0.55rem !important;

    line-height:
        1.08 !important;


    white-space:
        nowrap;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    /*
     * Conservamos exactamente la misma estructura
     * de PC, únicamente se compacta.
     */

    .parroquia-360-badge {

        right:
            18px !important;

        bottom:
            18px !important;


        max-width:
            43% !important;


        min-height:
            36px !important;


        padding:
            0
            10px !important;


        gap:
            7px !important;

    }


    .parroquia-360-badge-icono {

        width:
            24px !important;

        height:
            24px !important;

        min-width:
            24px !important;


        flex-basis:
            24px !important;


        font-size:
            0.64rem !important;

    }


    .parroquia-360-badge strong {

        font-size:
            0.66rem !important;

    }


    .parroquia-360-badge small {

        font-size:
            0.50rem !important;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 600px) {

    /*
     * En móvil seguimos conservando:
     *
     * 360° Vista inmersiva
     *
     * pero ocultamos solamente:
     *
     * "Muévete dentro de la imagen"
     *
     * De esta manera la fotografía queda mucho
     * más despejada y ambas etiquetas entran
     * en la misma franja inferior.
     */

    .parroquia-360-badge {

        right:
            14px !important;

        bottom:
            14px !important;


        max-width:
            42% !important;


        min-height:
            32px !important;


        padding:
            0
            9px !important;


        gap:
            6px !important;

    }


    .parroquia-360-badge-icono {

        width:
            22px !important;

        height:
            22px !important;

        min-width:
            22px !important;


        flex-basis:
            22px !important;


        font-size:
            0.58rem !important;

    }


    .parroquia-360-badge strong {

        font-size:
            0.60rem !important;

    }


    .parroquia-360-badge small {

        display:
            none !important;

    }

}


/* =========================================================
   CELULARES MUY PEQUEÑOS
========================================================= */

@media (max-width: 390px) {

    .parroquia-360-badge {

        right:
            12px !important;

        bottom:
            12px !important;


        max-width:
            41% !important;


        min-height:
            30px !important;


        padding:
            0
            8px !important;


        gap:
            5px !important;

    }


    .parroquia-360-badge-icono {

        width:
            20px !important;

        height:
            20px !important;

        min-width:
            20px !important;


        flex-basis:
            20px !important;


        font-size:
            0.54rem !important;

    }


    .parroquia-360-badge strong {

        font-size:
            0.56rem !important;

    }

}


/* =========================================================
   FULLSCREEN SIMULADO
   SAFARI / iPHONE / iPAD
========================================================= */

/*
 * Cuando iOS no permite Fullscreen API real,
 * inicio.js transforma todo el componente
 * en un overlay.
 *
 * El badge sigue permaneciendo abajo
 * a la derecha.
 */

.parroquia-360-visual.tour360-overlay-activo
.parroquia-360-badge {

    display:
        inline-flex !important;


    position:
        absolute !important;


    z-index:
        2147483001 !important;


    left:
        auto !important;

    right:
        14px !important;

    bottom:
        14px !important;

}


/* =========================================================
   MARCO EN FULLSCREEN SIMULADO
========================================================= */

.parroquia-360-visual.tour360-overlay-activo
.parroquia-360-marco {

    position:
        absolute !important;


    inset:
        0 !important;


    width:
        100% !important;

    height:
        100% !important;


    border-radius:
        0 !important;

}

/* =========================================================
   EMISORA - COMPATIBILIDAD iPHONE / iPAD

   En iOS / iPadOS WebKit no garantiza el control
   programático del volumen multimedia por página.

   Por eso:
   - Play / pausa se conserva.
   - Mute se conserva.
   - Se ocultan −, slider y + SOLO en iPhone/iPad.
   - Se informa al usuario que utilice los botones físicos.

   Android, PC, Mac, Smart TV y tablets no iOS
   conservan los controles completos.
========================================================= */

.emisora-v4-volumen-aviso {
    display: none;
}

html.es-ios #emisoraVolumenMenos,
html.es-ios #emisoraVolumenMas,
html.es-ios #emisoraVolumen {
    display: none !important;
}

html.es-ios .emisora-v4-volumen {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

html.es-ios .emisora-v4-volumen-btn--mute {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

html.es-ios .emisora-v4-volumen-aviso {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(224, 201, 146, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.61rem;
    font-weight: 600;
    line-height: 1.25;
}

@media (max-width: 600px) {

    html.es-ios .emisora-v4-volumen {
        grid-column: 1 / 3;
        padding-top: 10px;
        justify-content: flex-start;
    }

    html.es-ios .emisora-v4-volumen-aviso {
        max-width: calc(100% - 58px);
        white-space: normal;
    }

}

@media (max-width: 390px) {

    html.es-ios .emisora-v4-volumen {
        gap: 8px;
    }

    html.es-ios .emisora-v4-volumen-aviso {
        max-width: calc(100% - 56px);
        padding: 6px 9px;
        font-size: 0.57rem;
    }

}