@font-face {
  font-family: "Xunta Sans";
  src: url("../fonts/xuntasans-regular.woff2");
}
@font-face {
  font-family: "Xunta Sans";
  src: url("../fonts/xuntasans-bold.woff2");
  font-weight: bold;
}
@font-face {
  font-family: "Xunta Sans";
  src: url("../fonts/xuntasans-italic.woff2");
  font-style: italic;
}
@font-face {
  font-family: "Xunta Sans";
  src: url("../fonts/xuntasans-bolditalic.woff2");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Monument Extended";
  src: url("../fonts/monumentextended-regular.otf") format("opentype"),
       url("../fonts/monumentextended-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Monument Extended";
  src: url("../fonts/monumentextended-bold.otf") format("opentype"),
       url("../fonts/monumentextended-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Monument Extended";
  src: url("../fonts/monumentextended-light.otf") format("opentype"),
       url("../fonts/monumentextended-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Monument Extended";
  src: url("../fonts/monumentextended-ultrabold.otf") format("opentype"),
       url("../fonts/monumentextended-ultrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Monument Extended";
  src: url("../fonts/monumentextended-ultralight.otf") format("opentype"),
       url("../fonts/monumentextended-ultralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}


@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1170px;
    }
}

@media (min-width: 1200px) {
    .display-5 {
        font-size: 2.72rem;
    }
}

body {
  font-family: "Xunta Sans";
  font-size: 14px;
  overflow-x: hidden;
}

.font2{
  font-family: "Monument Extended";
  font-weight: 700;
  letter-spacing: 3px;
}

:root{
  --azul:#007bc4;           /* azul Xunta aproximado del cartel */
  --azul-osc:#005b96;
  --negro:#0e1b2b;
  --gris:#f3f5f7;
}

p{
  text-align: justify;
}

/* Utilidades */
.object-fit-cover{object-fit:cover}
.py-lg-6{padding-top:5rem;padding-bottom:5rem}
.mega-title{line-height:1.05}
.section-intro{font-size:1.25rem}

/* HERO */
.hero-banner{min-height:68vh; color:#fff;}
.hero-banner-top{
  background-image: url("../files/hero-soidade.jpg");
  background-size: cover;        /* cubre todo el ancho/alto */
  background-position: top;   /* centra la foto */
  background-repeat: no-repeat;
}

.hero-copy{padding:2rem 0 3rem}
.hero-copy-top{text-align: center;}
.hero-title{line-height:1.05}
.hero-lead{max-width:48ch; text-transform: uppercase;font-weight: bold; text-align: center;}


/* Texto normal dentro de su columna */
.seccion-azul-diagonal{
  position: relative;
  z-index: 0;                  /* el fondo va por detrás */
  color:#fff;
  line-height:1.4;
  padding:2.1rem 1.25rem 3.1rem 1.25rem;        /* alto de la banda */
}

/* Banda azul: empieza en el borde IZQ del <p> y sangra a la DERECHA hasta el viewport */
.seccion-azul-diagonal::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;                                /* arranca donde empieza la columna */
  right: calc(50% - 50vw);               /* se estira hasta el borde derecho de la ventana */
  background: rgba(0,120,200,.82);       /* azul con transparencia */
  z-index:-1;                            /* detrás del texto */
  clip-path: polygon(                    /* diagonal: izq más alta, dcha más baja */
    0 0,
    100% 14%,
    100% 100%,
    0 86%
  );
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Ajuste fino en md+ (si quieres variar la inclinación/alto) */
@media (min-width:768px){
  .seccion-azul-diagonal{
    padding:2.1rem 1.5rem 3.1rem 1.25rem;
  }
  .seccion-azul-diagonal::before{
    clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);
  }
}

/* Panel azul de teléfono (superpuesto bajo el hero) */
.hero-phone{
  background:var(--azul);
  color:#fff;
  padding:4.5rem 0;
  position:relative;
  z-index:2;
}
.hero-phone .phone-card .phone-card-top{
  text-align: center;
  max-width: 200px;
  margin: 0 auto;
}
.hero-phone .phone-label{
  display:inline-block;
  width: 100%;
  font-weight:900;
  font-size: 28px;
  background:#fff;
  padding:.3rem 0 0 0;
  color:  var(--azul);
  line-height: 28px;
}
.hero-phone .phone-sub{
  font-weight:800;
  margin:.25rem 0 1rem;
  text-transform:uppercase;
}
.hero-phone .phone-number{
  font-weight:900;
  font-size:clamp(2.8rem,7vw,6rem);
  line-height:.9;
  margin-bottom:.75rem;
}
.hero-phone .phone-card .phone-card-bottom{
  margin-top: 30px;
}
.hero-phone .phone-card .telefono{
  font-size: 100px;
  text-align: center;
  line-height: 0.9;
}
.hero-phone2{
  background:var(--azul);
  color:#fff;
  padding:2.5rem 0;
  position:relative;
  z-index:2;
  margin-top: 50px;
}
.hero-phone2 .phone-card .phone-card-bottom .unha-chamada{margin-top: 80px; font-size: 14px; text-align: center;}
.hero-phone2 .phone-card .phone-card-bottom .todos-podemos{
  background-color: #fff;
  color: #007bc4;
  text-align: center;
  font-size: 24px;
  margin-top: 5px;
}
.phone-duo{
  position:relative; /* necesario para que ::before se posicione */
  display:inline-block;
  width:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.phone-duo img.frame-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* Marco interior a 10px */
.phone-duo::before{
  content:"";
  position:absolute;
  top:15px; left:15px; right:15px; bottom:15px;
  border:6px solid var(--azul);
  pointer-events:none;
  z-index: 1;
}

/* BLOQUE BRANCO */
.white-block{background:#fff}
.img-frame-lg{
  border:8px solid transparent; outline:6px solid var(--azul);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.img-frame-lg img{width:100%; display:block}
.white-block .mega-title{color:var(--azul);}

/* Tarxetas de “Detectamos/…” */
.bloque-detectamos-previmos .info-card{
  padding:0;
}

/* Faja azul do título */
.bloque-detectamos-previmos .info-card h3{
  display:block;                            /* ocupa todo o ancho */
  background:var(--azul);
  color:#fff;
  text-transform:uppercase;
  margin:0 0 .75rem 0;
  padding:.35rem .75rem 0 .75rem;
  line-height:1.1;
}

/* Texto */
.bloque-detectamos-previmos .info-card p{
  color:#0e1b2b;
}

/* Ajustes de logos */
.index-logo img{max-height:42px}

/* Play */
.hero-banner-top .ic-play-link{position: absolute;top: 50%; left:20%; transform: translate(0, -50%); width: 200px; height: 200px; display: flex; justify-content: center;align-items: center;}
.hero-banner-top .ic-play-link img{width: 71px; height: 71px;}

.hero-phone2-rotulo-inferior{text-align: center; font-size: 26px; letter-spacing: 1px; padding-top: 100px;}
.hero-phone2-rotulo-inferior2{text-align: center; font-weight: bold; text-transform: uppercase; font-size: 23px;padding-bottom:30px;}
.block-detectar{padding: 100px 0 60px;}

/* Footer */
footer{background-color: #404040; padding: 21px 15px 19px;}
footer .logo-container--xunta{text-align: center;}
footer .logo-container--xunta a img{height: 30px;width: auto;}

/* Responsive fino */
@media (min-width:992px){
  .hero-copy{padding:4rem 0 6rem}
}

@media(max-width:1699px){
  .seccion-azul-diagonal::before{clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 88%);}
}
@media(max-width:1199px){
  .hero-banner-top .ic-play-link{left: 0;}
  .display-2{font-size: calc(1.575rem + 2.5vw);}
  .display-3{font-size: calc(1.525rem + 2.2vw);}
  .display-4{font-size: calc(1.475rem + 1.9vw);}
  .display-5{font-size: calc(1.425rem + 1.5vw);}
}
@media(max-width:991px){
  .hero-phone .phone-card .telefono{font-size: 70px;}
}
@media(max-width:767px){
  .hero-copy{padding-bottom: 150px;}
  .hero-banner-top .ic-play-link{transform: translate(-50%, 0); top: initial; left: 50%; bottom: 35px; width: 100px; height: 100px;}
  .hero-phone2 {margin-top: 0;}
  .hero-phone2 .phone-card .phone-card-bottom .unha-chamada{margin-top: 30px;}
  .hero-phone .phone-card .telefono{font-size: 60px;}
  .block-detectar{padding: 0;}
  .hero-phone2-rotulo-inferior{padding-top: 0;}
  .hero-phone2-rotulo-inferior2{padding-bottom: 0;}
}
@media(max-width:340px){
  .hero-phone .phone-card .telefono{font-size: 27px;}
}