/* =====================================================================
   PORTADA: hero a pantalla completa, cuenta regresiva y proximos sorteos
   (plugin "HOME" de WordPress, estilo "imagen completa").
   ===================================================================== */

/* ---- ZONA 1: el hero ---- */
.hm-hero{position:relative;width:100%;min-height:96vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hm-slide{
  position:absolute;inset:0;z-index:1;background:center 35%/cover no-repeat;background-image:var(--img-pc);
  opacity:0;transform:translateX(100%);will-change:transform,opacity;
}
.hm-slide.activa{opacity:1;transform:translateX(0)}
@media (max-width:768px){.hm-slide{background-image:var(--img-movil);background-position:center top}}

.hm-hero-texto{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;padding:0 40px 20px}
.hm-line1{font-family:var(--fuente-titulo);font-weight:400;font-size:clamp(48px,8vw,96px);line-height:1;letter-spacing:1px;color:var(--hm-line1,#e5fcc2);margin:0 0 12px;text-transform:uppercase}
.hm-row2{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hm-line2{font-family:var(--fuente-titulo);font-weight:400;font-size:clamp(28px,5vw,56px);line-height:1;color:#fff;margin:0}
.hm-cta{display:inline-block;border-radius:999px;padding:14px 28px;font-weight:800;font-size:clamp(15px,2vw,18px);text-decoration:none;white-space:nowrap;
  background:var(--boton-degradado);color:var(--boton-texto);transition:transform .2s ease,background .35s ease}
.hm-cta:hover{transform:translateY(-1px);background:var(--boton-degradado-hover)}
.hm-cta,.hm-cta:hover,.hm-cta:focus{color:var(--boton-texto);text-decoration:none}

/* Texto por diapositiva (modo "cada slide con su texto") */
.hm-pro-wrap{position:absolute;inset:0;z-index:3;pointer-events:none}
.hm-pro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 5% 30px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.hm-pro.activa{opacity:1;pointer-events:auto}
.hm-pro--left{align-items:flex-start;text-align:left;padding-right:40%}
.hm-pro--center{align-items:center;text-align:center;padding-left:10%;padding-right:10%}
.hm-pro--right{align-items:flex-end;text-align:right;padding-left:40%}
.hm-pro-small,.hm-pro-title,.hm-pro-sub{font-family:var(--fuente-titulo);font-weight:400;letter-spacing:1px;margin:0}
.hm-pro-small{font-size:var(--t-small,16px);line-height:1.2;margin-bottom:6px}
.hm-pro-title{font-size:var(--t-title,60px);line-height:1;margin-bottom:8px;text-transform:uppercase}
.hm-pro-sub{font-size:var(--t-sub,28px);line-height:1.1;margin-bottom:16px}
@media (max-width:768px){
  .hm-pro--left,.hm-pro--right,.hm-pro--center{align-items:center;text-align:center;padding:70px 5% 30px;justify-content:space-between}
  .hm-pro-grupo{display:flex;flex-direction:column;align-items:center;gap:2px}
  .hm-pro .hm-cta{margin-top:auto}
  .hm-pro-title{font-size:clamp(26px,7vw,40px)}
  .hm-pro-sub{font-size:clamp(15px,4.5vw,24px)}
  .hm-pro-small{font-size:clamp(12px,3vw,16px)}
}
@media (max-width:680px){
  .hm-hero{min-height:75vh}
  .hm-hero-texto{padding:0 20px 36px}
  .hm-row2{gap:14px}
  .hm-cta{padding:11px 20px;font-size:14px}
}

/* ---- ZONA 2: cuenta regresiva ---- */
/* Solo arriba y abajo: estas zonas llevan tambien la clase .contenedor, y un
   "padding:0 0 22px" le quitaba su margen lateral de 15px. En el celular la
   tarjeta quedaba pegada al borde y la lista se salia de la pantalla. */
/* 28 px arriba, como en WordPress: el hero mide 96vh y con este espacio el
   contador empieza justo debajo de la primera pantalla, sin asomarse. */
.hm-zona2{padding-top:28px;padding-bottom:22px}
.hm-z2-card{background:var(--contador-fondo);border-radius:18px;display:flex;align-items:center;gap:18px;padding:16px 18px;max-width:1200px;margin:0 auto;color:#fff}
.hm-z2-lead{font-family:var(--fuente-titulo);font-weight:400;line-height:1.15;font-size:clamp(15px,4.5vw,22px);white-space:nowrap}
.hm-z2-counter{display:flex;align-items:center;gap:10px}
.hm-z2-dots{font-weight:900;font-size:28px;margin:0 6px}
.hm-z2-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;border-radius:12px;padding:8px 10px;font-weight:900;box-shadow:inset 0 -4px rgba(0,0,0,.25);color:#111}
.hm-z2-box .num{font-size:32px;line-height:1}
.hm-z2-box .lab{font-size:12px;font-weight:800;opacity:.95;margin-top:2px;letter-spacing:.04em}
.hm-z2-box--d{background:#f7c71f}
.hm-z2-box--h{background:#f274c6}
.hm-z2-box--m{background:#76a8ff}
.hm-z2-box--s{background:#9df3a0}
.hm-z2-pill{margin-left:auto;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#1877F2,#3c91ff);padding:10px 14px;border-radius:999px;color:#fff;font-weight:900;text-decoration:none;border:2px solid rgba(255,255,255,.15);transition:transform .3s ease}
.hm-z2-pill:hover{transform:scale(1.01);color:#fff}
.hm-z2-pill svg{width:20px;height:20px;fill:#fff}
@media (max-width:900px){.hm-z2-card{flex-wrap:wrap;justify-content:center}.hm-z2-pill{margin-left:0}.hm-z2-lead{margin-bottom:4px}}
@media (max-width:680px){
  .hm-z2-card{padding:12px}
  .hm-z2-counter{gap:6px;justify-content:center;width:100%}
  .hm-z2-dots{font-size:clamp(16px,6vw,22px);margin:0 2px}
  .hm-z2-box{flex:1 1 0;min-width:0;padding:6px}
  .hm-z2-box .num{font-size:clamp(20px,7.2vw,26px)}
  .hm-z2-box .lab{font-size:10px}
  .hm-z2-pill{font-size:12px;padding:8px 12px}
}
@media (max-width:340px){.hm-z2-counter{flex-wrap:wrap}.hm-z2-dots{display:none}.hm-z2-box{min-width:calc(50% - 8px)}}

/* ---- Proximos sorteos ---- */
/* Abajo queda aire de sobra a proposito: el bloque "Ver todos" de WordPress
   (margin:-42px) se sube sobre este espacio para quedar pegado a las
   tarjetas. Con menos, el boton pisaria las tarjetas. */
.hm-seccion{padding-top:10px;padding-bottom:60px}
.hm-cabeza{display:flex;align-items:center;justify-content:space-between;margin:10px 0 18px}
/* En PC, los anchos del plugin HOME: su envoltura (.hm-wrap) dejaba 20 px
   a cada lado dentro del contenedor, y el titulo otros 20 px. El contador
   iba a todo lo ancho con esa envoltura de 1200 px. */
@media (min-width:769px){
  .hm-zona2{max-width:1200px;padding-left:20px;padding-right:20px}
  .hm-seccion{padding-left:35px;padding-right:35px}
  .hm-cabeza{padding:0 20px}
}
@media (max-width:767px){.hm-seccion .premios-proximos{margin:0 -8px}}

/* ---- Secciones siguientes (bloques) ---- */
/* Van dentro del contenedor de la pagina, como en WordPress (los atajos
   extra del plugin HOME iban en un .container dentro del de WoodMart:
   1222 px menos 15 px de cada uno a cada lado). Lo que va a todo lo ancho
   (el carrusel) sale de el por su cuenta (.cfm-fullbleed). */
.hm-secciones{max-width:var(--ancho,1222px);margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px;box-sizing:border-box}
.hm-secciones > .hm-sec + .hm-sec{margin-top:24px}
@media (max-width:768px){.hm-secciones > .hm-sec + .hm-sec{margin-top:18px}}
/* Un boton justo debajo de los proximos premios ("Ver todos") es de esa lista: se pega a ella
   (la seccion de arriba ya deja su aire) y separa lo que sigue. Las mismas medidas del bloque original. */
.hm-secciones > .hm-sec:first-child > .boton-centro:only-child{margin:-42px 0 70px}