/* ==========================================
   HERO - SELLO EHR (SVG 784x577)
========================================== */

.ehr-hero{
  background: #000;
  padding-top: 116px; /* header fijo */
  padding-bottom: 56px;
}

.ehr-hero__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Desktop: 2 columnas */
.ehr-hero__grid{
  min-height: 580px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  gap: 24px;
}

/* Copy */
.ehr-hero__copy{
  color: #fff;
  display: grid;
  gap: 8px; /* ✅ gap 8 entre kicker, title y sponsor */
}

.ehr-hero__kicker{
  color: var(--ehr-3);
  margin: 0;
  opacity: .95;
}

.ehr-hero__title{
  margin: 0;
  line-height: 1.05;
  color: var(--ehr-1); /* ajusta a tu token dorado si lo tienes */
}

/* Sponsor */
.ehr-hero__sponsor{
  display: grid;
  gap: 8px; /* ✅ gap 8 label/logo */
  margin-top: 8px;
}

.ehr-hero__sponsor-label{
  margin: 0;
  opacity: .85;
}

.ehr-hero__sponsor-logo{
  width: 240px;
  height: auto;
  display: block;
}

/* Visual */
.ehr-hero__visual{
  display: grid;
  justify-items: center;
}

.ehr-hero__trophy{
  width: min(784px, 100%); /* ✅ respeta 784 máximo */
  height: auto;
  display: block;
}

/* ==========================
   Mobile: orden como imagen
   (Título -> Sponsor -> Trofeo)
========================== */
@media (max-width: 980px){
  .ehr-hero{
    padding-top: 116px;
    padding-bottom: 40px;
  }

  .ehr-hero__grid{
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
    justify-items: center;
  }

  .ehr-hero__copy{
    order: 1;
    justify-items: center;
  }

  .ehr-hero__sponsor{
    order: 2;
    justify-items: center;
    margin-top: 8px;
  }

  .ehr-hero__visual{
    order: 3;
    width: 100%;
  }

  .ehr-hero__sponsor-logo{
    width: min(280px, 85vw);
  }

  .ehr-hero__trophy{
    width: min(784px, 92vw);
  }
}

/* ==========================================
   SELLO EHR - Sección 2 (texto + imagen)
========================================== */

.ehr-sec2{
  background: #000000;   /* ✅ fondo negro */
  padding: 64px 0;
}

.ehr-sec2__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-sec2__grid{
  min-height: 445px;
  display: grid;
  grid-template-columns: 1fr 526px; /* ✅ texto | imagen */
  gap: 24px;
  align-items: center;
}

/* Texto */
.ehr-sec2__content{
  max-width: 631px;
}

.ehr-sec2__title{
  margin: 0 0 12px;
  color: var(--ehr-1);       /* texto blanco */
}

.ehr-sec2__text{
  margin: 10;
  color: var(--ehr-3);
}

/* Imagen */
.ehr-sec2__media{
  height: 445px;
  display: flex;
  justify-content: flex-end;
}

.ehr-sec2__img{
  width: 526px;
  height: 445px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 980px){
  .ehr-sec2{
    padding: 40px 0;
  }

  .ehr-sec2__grid{
    min-height: auto;
    grid-template-columns: 1fr; /* apilado */
    gap: 18px;
  }

  /* móvil: texto arriba, imagen abajo */
  .ehr-sec2__media{
    justify-content: center;
    height: auto;
  }

  .ehr-sec2__img{
    width: min(526px, 100%);
    height: auto;
  }

  .ehr-sec2__content{
    max-width: 100%;
  }
}

/* ==========================================
   SELLO EHR - Video Premiación
   container 1284 | video 1284x643
========================================== */

.ehr-video{
  background: #000;
  padding: 64px 0 80px;
}

.ehr-video__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-video__title{
  margin: 0 0 24px;
  text-align: center;
  color: var(--ehr-1);
}

/* Frame */
.ehr-video__frame{
  position: relative;
  width: 100%;
  height: 643px; /* ✅ */
  border-radius: 22px;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* Poster */
.ehr-video__poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  opacity: 1;
  transition: opacity .25s ease;
}

/* Play button */
.ehr-video__play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(184,155,75,.95);
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform .15s ease, opacity .2s ease;
}

.ehr-video__play img{
  width: 26px;
  height: 26px;
  display: block;
}

.ehr-video__play:hover{
  transform: translate(-50%, -50%) scale(1.04);
}

/* Video local */
.ehr-video__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 0;              /* inicia oculto, se muestra al play */
  transition: opacity .25s ease;
}

/* YouTube wrapper */
.ehr-video__yt{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Estados activos */
.ehr-video__frame.is-playing .ehr-video__poster{
  opacity: 0;
}

.ehr-video__frame.is-playing .ehr-video__play{
  opacity: 0;
  pointer-events: none;
}

.ehr-video__frame.is-playing .ehr-video__media,
.ehr-video__frame.is-playing .ehr-video__yt{
  opacity: 1;
}

/* Mobile */
@media (max-width: 980px){
  .ehr-video{
    padding: 44px 0 56px;
  }

  .ehr-video__frame{
    height: 360px; /* ajustable móvil */
    border-radius: 18px;
  }
}


.desc-general {
    padding: 80px 0;
    background: var(--bg-black);
}
.desc-general-container {
    max-width: 1284px;
    margin: 0 auto;
}
.desc-general-title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--ehr-1);
}
.wrap-desc-aquagol {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.desc-general-grid {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.desc-card {
    width: 412px;
    height: 334px;
    background: var(--ehr-1);
    border-radius: 24px;
    padding: 32px 32px 40px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.desc-card-title{
  color: #fff;
  margin: 1px;
}
.desc-card-icon {
    margin-bottom: 24px;
    position: relative;
}
.desc-card-text {
    margin: 0;
    color: #fff;
}
.desc-icon-circle {
    width: 110px;
    height: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
}

.desc-icon-circle img {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

/* ==========================================
   SELLO EHR - Niveles de Beneficios
   container: 1198
   SVG: responsive (desktop/tablet/mobile)
========================================== */

.ehr-levels{
  background: #000;
  padding: 72px 0 88px;
}

.ehr-levels__container{
  max-width: 1198px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-levels__title{
  margin: 0 0 14px;
  text-align: center;
  color: #b89b4b; /* dorado */
}

.ehr-levels__lead{
  max-width: 920px;
  margin: 0 auto 28px;
  text-align: center;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}

/* Área del SVG */
.ehr-levels__art{
  width: 100%;
  display: block;
}

/* Por defecto: solo desktop visible */
.ehr-levels__svg{
  width: 100%;
  height: auto;
  display: none;
}

.ehr-levels__svg--desk{ display: block; }

/* Tablet */
@media (max-width: 1024px){
  .ehr-levels{
    padding: 60px 0 72px;
  }

  .ehr-levels__lead{
    margin-bottom: 22px;
  }

  .ehr-levels__svg--desk{ display: none; }
  .ehr-levels__svg--tab{ display: block; }
}

/* Mobile */
@media (max-width: 640px){
  .ehr-levels{
    padding: 48px 0 60px;
  }

  .ehr-levels__container{
    padding: 0 18px;
  }

  .ehr-levels__lead{
    margin-bottom: 18px;
  }

  .ehr-levels__svg--tab{ display: none; }
  .ehr-levels__svg--mob{ display: block; }
}


/* ================================
   CÓMO PARTICIPAR (Sello EHR)
   Container: 1270 (max)
   Orb: 490x490
   Number: 64x64
   BG: #000
================================ */

.cp-participar{
  background: #000;
  padding: 72px 0;
}

.cp-participar__container{
  max-width: 1330px;
  margin: 0 auto;
  padding: 0 24px;
}

/* GRID principal: izquierda | orbe | derecha */
.cp-participar__grid{
  --orb: 490px;
  --gap-col: 56px;     /* separación entre columnas y orbe */
  --gap-step: 28px;    /* separación vertical entre pasos */

  display: grid;
  grid-template-columns: 1fr var(--orb) 1fr;
  align-items: center;
  column-gap: var(--gap-col);
}

/* Orbe */
.cp-participar__orb{
  width: var(--orb);
  height: var(--orb);
  display: grid;
  place-items: center;
}

.cp-participar__orb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Columnas */
.cp-participar__col{
  display: flex;
  flex-direction: column;
  gap: var(--gap-step);
}

.cp-participar__col--left{
  align-items: flex-end; /* pega contenido hacia la orbe */
}

.cp-participar__col--right{
  align-items: flex-start;
}

/* Step */
.cp-step{
  max-width: 370px;        /* similar a tu caja 370 aprox */
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
}

/* en left: número más cerca a la orbe (a la derecha del texto) */
.cp-participar__col--left .cp-step{
  grid-template-columns: 1fr 64px;
}

.cp-step__n{
  width: 64px;
  height: 64px;
  display: block;
}

/* texto */
.cp-step__txt{
  color: #bfa25a; /* dorado suave, ajusta a tu variable si tienes */
}

.cp-step__p{
  margin: 0;
  color: var(--ehr-1);
  
}

/* link descargar */
.cp-step__link{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
 
  text-decoration: none;
}

/* icono descarga (puedes cambiar a tu svg real si ya lo tienes) */
.cp-step__dl-ic{
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("../images/iconos/sello-ehr/download.svg") center/contain no-repeat;
          mask: url("../images/iconos/sello-ehr/download.svg") center/contain no-repeat;
  opacity: .9;
}

/* Hover */
.cp-step__link:hover{
  text-decoration: underline;
}

/* ================================
   Responsive
================================ */

/* Tablet: reduce orbe */
@media (max-width: 1200px){
  .cp-participar__grid{
    --orb: 420px;
    --gap-col: 40px;
  }
  .cp-step{ max-width: 340px; }
}

/* Mobile: apilar */
@media (max-width: 980px){
  .cp-participar{
    padding: 56px 0;
  }

  .cp-participar__grid{
    grid-template-columns: 1fr;
    row-gap: 28px;
    justify-items: center;
  }

  .cp-participar__orb{
    order: 1;
  }

  .cp-participar__col--left{
    order: 2;
    align-items: center;
  }

  .cp-participar__col--right{
    order: 3;
    align-items: center;
  }

  .cp-step{
    grid-template-columns: 64px 1fr;
    max-width: 520px;
  }

  .cp-participar__col--left .cp-step{
    grid-template-columns: 64px 1fr; /* en móvil normal */
  }
}


/* ==========================================
   SELLO EHR — Niveles de reconocimiento
   Container: 1198
   SVG: desktop/tablet/mobile
   Fondo: #000 (como todo el landing)
   ========================================== */

.ehr-nr{
  padding: 64px 0 80px;
  background: #000;
}

.ehr-nr__container{
  max-width: 1198px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-nr__title{
  margin: 0 0 28px;
  text-align: center;
  color: var(--ehr-1); /* ajusta a tu variable real */
}

/* Figura */
.ehr-nr__figure{
  width: 100%;
}

/* Imagen base */
.ehr-nr__img{
  width: 100%;
  height: auto;
  display: block;
}

/* Por defecto: desktop visible */
.ehr-nr__img--tablet,
.ehr-nr__img--mobile{
  display: none;
}

/* Tablet */
@media (max-width: 1024px){
  .ehr-nr{
    padding: 56px 0 72px;
  }

  .ehr-nr__img--desktop{ display: none; }
  .ehr-nr__img--tablet{ display: block; }
}

/* Mobile */
@media (max-width: 640px){
  .ehr-nr{
    padding: 48px 0 64px;
  }

  .ehr-nr__title{
    margin-bottom: 22px;
  }

  .ehr-nr__img--tablet{ display: none; }
  .ehr-nr__img--mobile{ display: block; }
}

/* ==========================================
   SELLO EHR — Criterios de evaluación (SVG)
   Container: 1284
   Fondo: #000
   ========================================== */

.ehr-ce{
  padding: 64px 0 80px;
  background: #000;
}

.ehr-ce__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-ce__title{
  margin: 0 0 28px;
  text-align: center;
  color: var(--ehr-1); /* ajusta a tu variable real */
}

.ehr-ce__figure{
  width: 100%;
}

.ehr-ce__img{
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile spacing */
@media (max-width: 640px){
  .ehr-ce{
    padding: 48px 0 64px;
  }

  .ehr-ce__title{
    margin-bottom: 22px;
  }
}

/* ==========================================
   SELLO EHR — Cronograma
   Desktop / Tablet / Mobile (SVG)
   ========================================== */

.ehr-crono{
  background: #000;
  padding: 64px 0 80px;
}

.ehr-crono__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-crono__title{
  text-align: center;
  margin-bottom: 32px;
  color: var(--ehr-1);
}

.ehr-crono__media{
  width: 100%;
}

/* Base */
.ehr-crono__img{
  width: 100%;
  height: auto;
  display: none;
}

/* Desktop */
.ehr-crono__img--desktop{
  display: block;
}

/* Tablet */
@media (max-width: 1024px){
  .ehr-crono__img--desktop{ display: none; }
  .ehr-crono__img--tablet{ display: block; }
}

/* Mobile */
@media (max-width: 640px){
  .ehr-crono{
    padding: 48px 0 64px;
  }

  .ehr-crono__title{
    margin-bottom: 24px;
  }

  .ehr-crono__img--tablet{ display: none; }
  .ehr-crono__img--mobile{ display: block; }
}

/* ==========================================
   SELLO EHR — Ganadores (Tabs + Logos)
   container: 1224
   tabs: 304x48 gap 10
   ========================================== */

.ehrw{
  background: #000;
  padding: 70px 0 90px;
}

.ehrw__container{
  max-width: 1224px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehrw__title{
  text-align: center;
  margin: 0 0 26px;
  color: var(--ehr-1);
}

/* Tabs */
.ehrw__tabs{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 44px;
  flex-wrap: nowrap;
}

.ehrw__tab{
  width: 304px;
  height: auto;
  border: 0;
  border-radius: 999px;
  cursor: pointer;

  background: rgba(183,154,87,.18);
  color:var(--ehr-1);

  

  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.ehrw__tab:hover{
  transform: translateY(-1px);
}

.ehrw__tab.is-active{
  background: var(--ehr-1);
  color: #fff;
  font-weight: 700;
}

/* Panels / Logos */
.ehrw__panel{
  width: 100%;
}

.ehrw__logos{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 54px;
  align-items: center;
  justify-items: center;
  padding: 14px 0 0;
}

.ehrw__logo{
  max-width: 220px;     /* controla tamaño visual */
  max-height: 64px;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: brightness(1); /* por si usas png */
  opacity: .92;
}

/* Responsive */
@media (max-width: 1024px){
  .ehrw__logos{
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 40px;
  }

  .ehrw__tab{
    width: 260px;
  }
}

@media (max-width: 768px){
  .ehrw__tabs{
    flex-wrap: wrap;
    justify-content: center;
  }

  .ehrw__tab{
    width: min(304px, 100%);
  }

  .ehrw__logos{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 26px;
  }

  .ehrw__logo{
    max-width: 190px;
    max-height: 58px;
  }
}

@media (max-width: 420px){
  .ehrw__logos{
    grid-template-columns: 1fr;
  }

  .ehrw__logo{
    max-width: 210px;
  }
}

/* ==========================================
   SELLO EHR — FAQs (Accordion)
   container: 896
   item: 896x62
   bg: --ehr-1
   ========================================== */

.ehrfaq{
  background: #000000;
  padding: 70px 0 90px;
}

.ehrfaq__container{
  max-width: 896px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehrfaq__title{
  text-align: center;
  color: var(--ehr-1);
  margin: 0 0 26px;
}

/* Lista + contador automático */
.ehrfaq__list{
  counter-reset: ehrfaq;
  display: grid;
  gap: 16px;
}

/* Item */
.ehrfaq__item{
  border-radius: 14px;
  overflow: hidden;
  background: rgba(183,154,87,.18); /* dorado suave (igual look) */
}

/* Botón pregunta (alto 62) */
.ehrfaq__q{
  width: 100%;
  min-height: 62px;
  padding: 0 18px;
  border: 0;
  background: var(--ehr-1);
  color: #0b0b0b;
  cursor: pointer;

  display: grid;
  grid-template-columns: 38px 1fr 28px;
  align-items: center;
  gap: 14px;
  text-align: left;
}

/* Número automático */
.ehrfaq__num{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--ehr-1);
}
.ehrfaq__num::before{
  counter-increment: ehrfaq;
  /* content: counter(ehrfaq); */
}

/* Texto */
.ehrfaq__qtext{
  color: #fff;             /* en tu maqueta el texto se ve blanco */
  
}

/* Chevron (sin imagen, puro CSS) */
.ehrfaq__chev{
  width: 28px;
  height: 28px;
  justify-self: end;
  position: relative;
}
.ehrfaq__chev::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg); /* down */
  transition: transform .2s ease;
}

/* Respuesta */
.ehrfaq__a{
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.9);
}
.ehrfaq__aInner{
  padding: 16px 18px 18px;
  line-height: 1.6;
}

/* Estado abierto */
.ehrfaq__item.is-open .ehrfaq__chev::before{
  transform: rotate(-135deg); /* up */
}

.des-card-aquagol {
    height: 450px !important;
}
/* Responsive */
@media (max-width: 768px){
  .ehrfaq__q{
    grid-template-columns: 34px 1fr 26px;
    padding: 10px 14px;
  }
}


.rigth{
text-align: right;
}

.left{
text-align: left;
}






/* =========================================================
   SELLO EHR — CRITERIOS DE EVALUACIÓN
   Container: 1248
   Card: 389x369
   Icon SVG: 201x201
========================================================= */

.sehr-criteria{
  background: #000; /* ajusta si tu fondo es otro */
  padding: 80px 0;
  color: #fff;
}

.sehr-criteria__container{
  width: min(1248px, calc(100% - 48px));
  margin: 0 auto;
}

.sehr-criteria__title{
  text-align: center;
  margin: 0 0 56px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  color: #C8A54A; /* dorado */
}

/* Grid: 3 columnas, y el 4-5 centrados automáticamente */
.sehr-criteria__grid{
  display: grid;
  grid-template-columns: repeat(3, 389px);
  justify-content: center;
  gap: 56px 40px; /* row-gap / column-gap */
}

/* Card */
.sehr-criteria__card{
  width: 389px;
  height: 369px;
  text-align: center;
}

/* Icon wrapper: aquí puedes meter tus anillos si luego quieres */
.sehr-criteria__icon{
  width: 201px;
  height: 201px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
}

.sehr-criteria__icon img{
  width: 201px;
  height: 201px;
  display: block;
}

/* Título card */
.sehr-criteria__card-title{
  margin: 0 0 14px;
  /* font-size: 14px;
  line-height: 1.2; */
  font-weight: 700;
  color: var(--ehr-1);
  letter-spacing: .2px;
}

/* Texto */
.sehr-criteria__text{
  margin: 0 auto;
  max-width: 340px; /* para que respire dentro del ancho 389 */
  
  color: var(--ehr-2);
}

/* =========================================================
   Responsive
========================================================= */

/* 2 columnas si no entra 3 */
@media (max-width: 1280px){
  .sehr-criteria__grid{
    grid-template-columns: repeat(2, minmax(0, 389px));
    gap: 48px 28px;
  }
  .sehr-criteria__card{
    width: 100%;
  }
}

/* Mobile: 1 columna */
@media (max-width: 768px){
  .sehr-criteria{
    padding: 56px 0;
  }

  .sehr-criteria__container{
    width: min(1248px, calc(100% - 32px));
  }

  .sehr-criteria__title{
    margin-bottom: 36px;
  }

  .sehr-criteria__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sehr-criteria__card{
    width: 100%;
    height: auto;           /* importante en móvil */
    padding-bottom: 8px;
  }

  .sehr-criteria__icon{
    width: 168px;
    height: 168px;
    margin-bottom: 14px;
  }

  .sehr-criteria__icon img{
    width: 168px;
    height: 168px;
  }

  .sehr-criteria__card-title{
    font-size: 14px;
  }

  .sehr-criteria__text{
    max-width: 520px;
    font-size: 13px;
  }
}


/* 5 cards: 3 arriba + 2 abajo centradas */
.sehr-criteria__grid{
  display: grid;
  grid-template-columns: repeat(3, 389px);
  justify-content: center;
  gap: 100px 40px;
}