/* =====================================================================
   MOD/PORTADA — home pública 2026 (estilo belnou.com), granate de marca.
   Scopeado a .portada2026. Usa los tokens de tema.css.
   ===================================================================== */
.portada2026{ display:block; color: var(--color-text); overflow: hidden; }
.portada2026 section{ position: relative; }

/* ---- Utilidades de sección ---- */
.portada2026 .pt-sec__head{ text-align:center; max-width:720px; margin:0 auto clamp(28px,4vw,52px); }
.portada2026 .pt-sec__title{ font-size:clamp(1.6rem,3vw,2.5rem); font-weight:800; line-height:1.12; color:var(--color-text); margin:0 0 12px; }
.portada2026 .pt-sec__sub{ font-size:1.05rem; color:var(--color-text-light); line-height:1.6; margin:0; }
.portada2026 .pt-eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-principal); margin-bottom:12px; }
.portada2026 .pt-eyebrow--light{ color:rgba(255,255,255,.9); }

/* ---- Botones ---- */
.portada2026 .pt-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 30px; font-weight:700; border-radius:var(--radius-md);
    text-decoration:none !important; transition:transform .25s ease, background .25s ease, color .25s ease;
}
.portada2026 .pt-btn--primary{ background:var(--color-principal); color:var(--color-white) !important; box-shadow:var(--shadow-md); }
.portada2026 .pt-btn--primary:hover{ background:var(--color-principal-hover); transform:translateY(-2px); }
.portada2026 .pt-btn--ghost{ background:transparent; color:var(--color-white) !important; border:2px solid rgba(255,255,255,.7); }
.portada2026 .pt-btn--ghost:hover{ background:rgba(255,255,255,.15); border-color:#fff; transform:translateY(-2px); }
.portada2026 .pt-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--color-principal) !important; text-decoration:none !important; }
.portada2026 .pt-link:hover{ gap:12px; }

/* ---------- HERO / SLIDER ----------
   Carrusel a pantalla completa, al estilo de la home pública: foto a sangre,
   titular centrado en serif y, si el visitante no ha entrado, un acceso
   profesional dentro del propio slider. */
.portada2026 .pt-hero{ position:relative; min-height:min(88vh, 820px); display:flex; align-items:center; overflow:hidden; }
.portada2026 .pt-hero__slides{ position:absolute; inset:0; z-index:0; }
.portada2026 .pt-hero__slide{
    position:absolute; inset:0; opacity:0; transition:opacity .9s ease;
}
.portada2026 .pt-hero__slide.is-active{ opacity:1; }
.portada2026 .pt-hero__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.portada2026 .pt-hero__overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,8,9,.42), rgba(20,8,9,.22) 45%, rgba(20,8,9,.55));
}
.portada2026 .pt-hero__content{
    position:relative; z-index:2; max-width:1100px; margin:0 auto; width:100%;
    padding:0 clamp(24px,5vw,72px); color:#fff; text-align:center;
}
/* Los textos de los slides se apilan y solo se ve el activo: así el alto del
   hero no salta al cambiar de imagen. */
.portada2026 .pt-hero__texto{ display:none; }
.portada2026 .pt-hero__texto.is-active{ display:block; animation:pt-fade .8s ease; }
@keyframes pt-fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.portada2026 .pt-hero__title{
    font-family:var(--font-titulos); font-size:clamp(2.3rem,5.2vw,4rem); font-weight:400;
    line-height:1.08; margin:0 0 18px; letter-spacing:.01em; text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.portada2026 .pt-hero__lead{
    font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; max-width:56ch; margin:0 auto 30px;
    color:rgba(255,255,255,.92); text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.portada2026 .pt-hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ---------- Acceso profesional dentro del slider ----------
   Aquí solo se decide DÓNDE va; la tarjeta la pinta mod/minilogin con su
   propio CSS, para que el mismo formulario se pueda incrustar en otro sitio
   sin arrastrar estilos de la portada.
   Va pegado a la derecha y centrado en vertical respecto al slider. */
.portada2026 .pt-hero__pro{
    position:absolute; z-index:3;
    right:clamp(16px,4vw,56px);
    top:50%; transform:translateY(-50%);
    width:min(400px, calc(100% - 32px));
}
/* El texto del slider sigue centrado, pero dentro del hueco que deja el
   formulario: sin esto el titular se le metía debajo. Solo cuando hay
   formulario (sin sesión): con sesión el contenido va al ancho entero. */
@media (min-width:1201px){
    .portada2026 .pt-hero--conlogin .pt-hero__content{ padding-right:clamp(470px,34vw,540px); }
}

/* ---------- Puntos y flechas ---------- */
.portada2026 .pt-hero__nav{
    position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:26px;
    display:flex; align-items:center; gap:14px;
}
.portada2026 .pt-hero__flecha{
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.18); color:#fff;
    font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, border-color .2s ease;
}
.portada2026 .pt-hero__flecha:hover{ background:rgba(0,0,0,.4); border-color:#fff; }
.portada2026 .pt-hero__puntos{ display:flex; gap:9px; }
.portada2026 .pt-hero__punto{
    width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,255,255,.8); background:transparent; transition:background .2s ease;
}
.portada2026 .pt-hero__punto.is-active{ background:#fff; }

/* ---- FAMILIAS ---- */
.portada2026 .pt-familias{ padding:clamp(56px,8vw,110px) 24px; }
.portada2026 .pt-familias__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
.portada2026 .pt-fam{
    display:flex; flex-direction:column; background:var(--color-white);
    border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm); text-decoration:none !important; color:inherit;
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.portada2026 .pt-fam:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--color-principal-20); }
.portada2026 .pt-fam__media{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; overflow:hidden; padding:18px; background:linear-gradient(160deg, #f6f6f7, #eceded); }
.portada2026 .pt-fam__media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; transition:transform .5s ease; }
.portada2026 .pt-fam:hover .pt-fam__media img{ transform:scale(1.06); }
.portada2026 .pt-fam__body{ display:flex; flex-direction:column; gap:8px; padding:22px 22px 26px; }
.portada2026 .pt-fam__name{ font-size:1.2rem; font-weight:800; color:var(--color-text); }
.portada2026 .pt-fam__desc{ font-size:.98rem; line-height:1.5; color:var(--color-text-light); }
.portada2026 .pt-fam--eco{ border-color:#cfe3d5; }
.portada2026 .pt-fam--eco .pt-fam__name{ color:#3a6248; }

/* ---- MARCA ---- */
.portada2026 .pt-marca{ padding:clamp(48px,7vw,100px) 24px; background:var(--color-bg); }
.portada2026 .pt-marca__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.portada2026 .pt-marca__media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:block; }
.portada2026 .pt-marca__text p{ font-size:1.08rem; line-height:1.75; color:var(--color-text-light); margin:0 0 22px; }

/* ---- CONFIANZA ---- */
.portada2026 .pt-trust{ padding:clamp(36px,5vw,64px) 24px; }
.portada2026 .pt-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.portada2026 .pt-trust__item{ text-align:center; padding:26px 16px; background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.portada2026 .pt-trust__k{ display:block; font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; color:var(--color-principal); line-height:1; }
.portada2026 .pt-trust__d{ display:block; margin-top:10px; font-size:.98rem; color:var(--color-text-light); }

/* ---------- ÁREA PROFESIONAL ----------
   Copiada de la home pública: un solo bloque sobre la misma foto. Arriba la
   llamada al área profesional, centrada y con el botón ENTRE el titular y el
   párrafo; bajo la línea del rombo, el bloque de experiencia y las cifras.
   El velo va de casi opaco arriba a translúcido abajo, para que el titular se
   lea sobre la foto y esta se vea de verdad en la parte de las cifras. */
.portada2026 .pt-pro{
    position:relative; overflow:hidden;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    padding:clamp(64px,9vw,130px) 24px clamp(56px,8vw,110px);
    color:#fff; text-align:center;
}
.portada2026 .pt-pro__velo{
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(36,12,12,.94) 0%, rgba(36,12,12,.9) 38%, rgba(36,12,12,.72) 62%, rgba(36,12,12,.6) 100%);
}
.portada2026 .pt-pro > *:not(.pt-pro__velo){ position:relative; z-index:1; }

.portada2026 .pt-pro__content{ max-width:860px; margin:0 auto; }
.portada2026 .pt-pro__title{
    font-family:var(--font-titulos); font-weight:400;
    font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.3;
    margin:14px auto 32px; max-width:34ch; color:#fff;
}
.portada2026 .pt-pro__title em{ font-style:normal; text-decoration:underline; text-underline-offset:6px; }
.portada2026 .pt-pro__btn{
    display:inline-block; padding:15px 32px; border-radius:4px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
    color:#fff !important; text-decoration:none !important;
    font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    transition:background .25s ease, border-color .25s ease;
}
.portada2026 .pt-pro__btn:hover{ background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.6); }
.portada2026 .pt-pro__lead{
    margin:30px auto 0; max-width:66ch;
    font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.75);
}

/* Línea con el rombo en medio que separa las dos mitades del bloque. */
.portada2026 .pt-pro__separador{
    position:relative; margin:clamp(40px,6vw,72px) auto; border-top:1px solid rgba(255,255,255,.22);
}
.portada2026 .pt-pro__separador span{
    position:absolute; top:-6px; left:50%; width:11px; height:11px;
    margin-left:-6px; transform:rotate(45deg);
    background:rgba(36,12,12,.92); border:1px solid rgba(255,255,255,.4);
}

/* Experiencia: titular a la izquierda y los dos párrafos a la derecha. */
.portada2026 .pt-pro__exp{
    display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(24px,5vw,64px); align-items:start; text-align:left;
}
/* El !important es para ganar al 'h3,.h3{font-size:17px !important}' de
   tema.css, que si no deja este titular del tamaño de un párrafo. */
.portada2026 .pt-pro__exp-h{
    font-family:var(--font-titulos); font-weight:400; color:#fff;
    font-size:clamp(1.6rem,3vw,2.3rem) !important; line-height:1.2;
    margin:12px 0 0; max-width:20ch;
}
.portada2026 .pt-pro__exp-txt{ border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(20px,3vw,40px); }
.portada2026 .pt-pro__exp-txt p{
    margin:0 0 16px; font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.82);
}
.portada2026 .pt-pro__exp-txt p:last-child{ margin-bottom:0; }

/* Cifras, separadas por líneas verticales. */
.portada2026 .pt-pro__cifras{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:clamp(36px,6vw,70px);
}
.portada2026 .pt-pro__cifra{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:6px clamp(8px,2vw,20px); border-left:1px solid rgba(255,255,255,.22);
}
.portada2026 .pt-pro__cifra:first-child{ border-left:0; }
.portada2026 .pt-pro__cifra strong{
    font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; line-height:1; letter-spacing:-.02em;
}
.portada2026 .pt-pro__cifra span{ font-size:.85rem; color:rgba(255,255,255,.78); }

/* ---- CANALES B2B ---- */
.portada2026 .pt-canales{ padding:clamp(48px,7vw,100px) 24px; }
.portada2026 .pt-canales__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.portada2026 .pt-canal{ background:var(--color-white); border:1px solid var(--color-border); border-top:3px solid var(--color-principal); border-radius:var(--radius-lg); padding:28px 24px; transition:transform .25s ease, box-shadow .25s ease; }
.portada2026 .pt-canal:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.portada2026 .pt-canal h3{ font-size:1.2rem !important; font-weight:800; color:var(--color-text); margin:0 0 10px; }
.portada2026 .pt-canal p{ font-size:.98rem; line-height:1.55; color:var(--color-text-light); margin:0; }

/* ---- FAQ ---- */
.portada2026 .pt-faq{ padding:clamp(40px,6vw,90px) 24px; }
.portada2026 .pt-faq__list{ max-width:820px; margin:0 auto; display:grid; gap:12px; }
.portada2026 .pt-faq__item{ background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.portada2026 .pt-faq__item summary{ cursor:pointer; padding:18px 22px; font-weight:700; color:var(--color-text); list-style:none; position:relative; padding-right:48px; }
.portada2026 .pt-faq__item summary::-webkit-details-marker{ display:none; }
.portada2026 .pt-faq__item summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--color-principal); transition:transform .25s ease; }
.portada2026 .pt-faq__item[open] summary::after{ content:"–"; }
.portada2026 .pt-faq__item p{ padding:0 22px 20px; margin:0; color:var(--color-text-light); line-height:1.65; }

/* ---- CMS opcional ---- */
.portada2026 .pt-cms{ padding:clamp(32px,5vw,64px) 24px; }

/* ---- RESPONSIVE ---- */
/* Por debajo de 1200 el formulario deja de flotar a la derecha y se coloca
   centrado bajo el texto. En esa franja, si sigue flotando, al titular le queda
   una columna demasiado estrecha; y en móvil encima de la foto no cabe. */
@media (max-width:1200px){
    /* .pt-hero es un flex: si a la tarjeta se le quita el position:absolute sin
       más, se coloca AL LADO del texto en vez de debajo. De ahí el column. */
    .portada2026 .pt-hero{
        flex-direction:column; justify-content:center;
        padding:clamp(48px,10vw,90px) 0 110px;
    }
    .portada2026 .pt-hero__pro{
        position:static; transform:none; margin:28px auto 0;
        width:calc(100% - 48px); max-width:400px;
    }
}

@media (max-width:1000px){
    .portada2026 .pt-familias__grid{ grid-template-columns:repeat(2,1fr); }
    .portada2026 .pt-canales__grid{ grid-template-columns:repeat(2,1fr); }
    /* Experiencia en una columna: el titular deja de compartir fila con el texto
       y la línea vertical pasa a ser horizontal. */
    .portada2026 .pt-pro__exp{ grid-template-columns:1fr; }
    .portada2026 .pt-pro__exp-txt{
        border-left:0; padding-left:0;
        border-top:1px solid rgba(255,255,255,.22); padding-top:20px;
    }
    .portada2026 .pt-pro__cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 0; }
    .portada2026 .pt-pro__cifra:nth-child(odd){ border-left:0; }
    .portada2026 .pt-trust__grid{ grid-template-columns:repeat(2,1fr); }
    .portada2026 .pt-marca__inner{ grid-template-columns:1fr; }
    .portada2026 .pt-marca__media{ order:-1; }
}
@media (max-width:560px){
    .portada2026 .pt-familias__grid{ grid-template-columns:1fr; }
    .portada2026 .pt-canales__grid{ grid-template-columns:1fr; }
    .portada2026 .pt-hero{ min-height:auto; padding-bottom:100px; }
    .portada2026 .pt-hero__cta{ flex-direction:column; }
    .portada2026 .pt-btn{ width:100%; }
    .portada2026 .pt-hero__flecha{ display:none; }   /* en táctil sobran */
    .portada2026 .pt-pro__title{ max-width:none; }
    .portada2026 .pt-pro__exp-h{ max-width:none; }
}