/* ==========================================================================
   TheL4FPro — living4football.club · hoja de estilos única
   Replica el diseño actual de WordPress + Elementor sin sus 500 KB de JS.
   ========================================================================== */

:root{
  --naranja:#EC7400;
  --naranja-osc:#c96200;
  --negro:#000;
  --texto:#111;
  --gris-txt:#555;
  --gris-bg:#f6f6f6;
  --blanco:#fff;
  --radio:20px;
  --sombra:0 6px 24px rgba(0,0,0,.12);
  --f:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ancho:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);font-size:18px;line-height:1.65;color:var(--texto);
  background:var(--blanco);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f);margin:0 0 .5em;line-height:1.18}
p{margin:0 0 1em}

.contenedor{width:min(100% - 40px,var(--ancho));margin-inline:auto}
.salto-contenido{position:absolute;left:-9999px}
.salto-contenido:focus{left:16px;top:16px;z-index:999;background:var(--naranja);color:#fff;
  padding:12px 18px;border-radius:8px}

/* ---------- Botón ---------- */
.btn{display:inline-block;background:var(--naranja);color:#fff;font-weight:600;font-size:1.05rem;
  padding:18px 38px;border-radius:20px;border:2px solid var(--naranja);cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;text-align:center}
.btn:hover,.btn:focus-visible{background:var(--naranja-osc);border-color:var(--naranja-osc);
  transform:translateY(-2px)}
.btn--blanco{background:#fff;color:var(--texto);border-color:#fff}
.btn--blanco:hover{background:var(--naranja);border-color:var(--naranja);color:#fff}

/* ---------- Cabecera ---------- */
.cabecera{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.cabecera__int{display:flex;align-items:center;gap:24px;padding:14px 0}
.logo img{width:210px;height:60px;object-fit:contain}
.nav{margin-left:auto}
.nav__lista{display:flex;align-items:center;gap:30px}
.nav__enlace{font-weight:600;font-size:1rem;padding:8px 0;display:inline-block;
  border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease}
.nav__enlace:hover,.nav__enlace[aria-current="page"]{color:var(--naranja);border-bottom-color:var(--naranja)}

/* submenú del blog */
.tiene-sub{position:relative}
.tiene-sub>.nav__enlace::after{content:"";display:inline-block;margin-left:7px;
  border:5px solid transparent;border-top-color:currentColor;transform:translateY(3px)}
.submenu{position:absolute;top:100%;left:0;min-width:266px;background:#fff;border-radius:12px;
  box-shadow:var(--sombra);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.tiene-sub:hover .submenu,.tiene-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:9px 22px;font-size:.94rem}
.submenu a:hover{background:var(--gris-bg);color:var(--naranja)}

/* buscador */
.buscador{display:flex;max-width:270px;width:100%}
.buscador input{flex:1;min-width:0;border:1px solid #ddd;border-right:0;border-radius:6px 0 0 6px;
  padding:11px 14px;font:inherit;font-size:.92rem;background:var(--gris-bg)}
.buscador input:focus{outline:2px solid var(--naranja);outline-offset:-2px}
.buscador button{background:var(--naranja);border:0;border-radius:0 6px 6px 0;padding:0 16px;
  cursor:pointer;color:#fff;display:grid;place-items:center}
.buscador button svg{width:19px;height:19px}
.buscador button:hover{background:var(--naranja-osc)}

.hamburguesa{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;
  flex-direction:column;gap:5px}
.hamburguesa span{display:block;width:26px;height:3px;background:var(--texto);border-radius:2px}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(78vh,620px);display:grid;place-items:center;
  text-align:center;color:#fff;overflow:hidden}
.hero__fondo{position:absolute;inset:0;z-index:-1}
.hero__fondo img{width:100%;height:100%;object-fit:cover}
.hero__fondo::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.hero h1{font-size:clamp(2rem,5.2vw,3.1rem);font-weight:700;color:#fff;margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* ---------- Secciones ---------- */
.seccion{padding:74px 0}
.seccion--negra{background:var(--negro);color:#fff}
.seccion--gris{background:var(--gris-bg)}
.titulo-seccion{font-size:clamp(1.8rem,4.4vw,3.1rem);font-weight:800;text-align:center;margin-bottom:.2em}
.subtitulo{text-align:center;font-size:1.05rem;font-weight:400;color:var(--gris-txt);
  max-width:62ch;margin:0 auto 44px}
.seccion--negra .subtitulo{color:#cfcfcf}
.centrado{text-align:center}

/* sección de últimos posts, con foto de fondo oscurecida */
.posts{position:relative;isolation:isolate;background:var(--negro);color:#fff;overflow:hidden}
.posts__fondo{position:absolute;inset:0;z-index:-1}
.posts__fondo img{width:100%;height:100%;object-fit:cover;opacity:.28}
.posts .titulo-seccion{color:#fff}

/* ---------- Tarjetas de post ---------- */
.rejilla-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:38px}
.post{background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;transition:transform .2s ease}
.post:hover{transform:translateY(-5px)}
.post__img{aspect-ratio:16/9;background:var(--gris-bg);overflow:hidden}
.post__img img{width:100%;height:100%;object-fit:cover}
.post__cuerpo{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.06rem;font-weight:700;color:var(--texto);margin-bottom:.7em;line-height:1.35}
.post h3 a:hover{color:var(--naranja)}
.post__mas{margin-top:auto;align-self:flex-start;color:var(--naranja);font-weight:700;font-size:.95rem}
.post__mas:hover{text-decoration:underline}

/* esqueleto mientras cargan */
.post--carga .post__img,.post--carga h3 span{background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size:400% 100%;animation:brillo 1.3s ease infinite;border-radius:6px}
.post--carga h3 span{display:block;height:1em;margin-bottom:.5em}
.post--carga h3 span:last-child{width:65%}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Tres bloques con foto (nivel / libro / regalo) ---------- */
.rejilla-bloques{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.bloque{position:relative;isolation:isolate;min-height:390px;display:grid;place-items:center;
  text-align:center;padding:46px 32px;color:#fff;overflow:hidden}
.bloque__fondo{position:absolute;inset:0;z-index:-1}
.bloque__fondo img{width:100%;height:100%;object-fit:cover}
.bloque__fondo::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.bloque h2{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:900;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}
.bloque--claro .bloque__fondo::after{background:rgba(255,255,255,.62)}
.bloque--claro h2{color:var(--negro);text-shadow:none}
.bloque--claro .btn{background:var(--negro);border-color:var(--negro)}
.bloque--claro .btn:hover{background:var(--naranja);border-color:var(--naranja)}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:#d6d6d6;padding:60px 0 30px;font-size:.95rem}
.pie__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
.pie h3{color:#fff;font-size:1rem;font-weight:700;margin-bottom:1em}
.pie a:hover{color:var(--naranja)}
.pie__lista li{margin-bottom:9px}
.redes{display:flex;gap:12px;margin-top:16px}
.redes a{width:40px;height:40px;border-radius:50%;background:#1c1c1c;display:grid;place-items:center;
  transition:background .18s ease}
.redes a:hover{background:var(--naranja)}
.redes svg{width:19px;height:19px;fill:#fff}
.pie__base{border-top:1px solid #222;margin-top:38px;padding-top:22px;text-align:center;
  font-size:.85rem;color:#8f8f8f}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .rejilla-posts{grid-template-columns:repeat(2,1fr)}
  .rejilla-bloques{grid-template-columns:1fr}
  .bloque{min-height:300px}
}
@media(max-width:860px){
  .hamburguesa{display:flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,330px);background:#fff;padding:88px 26px 26px;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
    box-shadow:-8px 0 30px rgba(0,0,0,.18);margin-left:0}
  .nav.abierto{transform:translateX(0)}
  .nav__lista{flex-direction:column;align-items:flex-start;gap:4px}
  .nav__enlace{padding:12px 0;font-size:1.05rem}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    padding:0 0 8px 14px;min-width:0}
  .submenu a{padding:8px 0}
  .buscador{order:3;max-width:none;margin-top:14px}
  .cabecera__int{flex-wrap:wrap;gap:12px}
}
@media(max-width:620px){
  .rejilla-posts{grid-template-columns:1fr}
  .seccion{padding:54px 0}
  body{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}