/* ===================================================================
   portada.css — Estilos de la portada de KATALOG
   UBICACIÓN: katalog/css/portada.css
   (mismo diseño de la versión anterior, sin lo que ya no se usa)
=================================================================== */

:root{
  --orange:#FF6A00; --orange-deep:#D94F00; --orange-soft:#FFE7D2; --orange-softer:#FFF3E8;
  --ink:#241C15; --ink-soft:#6B5E52; --cream:#FFFBF7; --white:#FFFFFF;
  --green:#1F8A3B; --line:#F0DFCB;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; }
/* dvh: en móvil descuenta la barra del navegador, que con vh queda
   por debajo del borde y obliga a desplazar. */
body{ min-height:100dvh; }
body{
  font-family:'Inter',sans-serif; color:var(--ink); background:var(--cream);
  display:flex; flex-direction:column; min-height:100vh;
}
a{ text-decoration:none; color:inherit; }

/* ===== TOPBAR ===== */
.topbar{
  /* Flotante: se queda a la vista al desplazarse, en vez de subirse
     con la página y quedar cortada contra el borde. */
  position:fixed; top:24px; right:32px;
  display:flex; align-items:center; gap:24px;
  padding:12px 24px; background:var(--white); border-radius:30px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  font-size:.92rem; font-weight:700; z-index:20;
}
.topbar a{ color:var(--orange); transition:color .15s; }
.topbar a:hover{ color:var(--orange-deep); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
}
.hamburger span{ display:block; width:22px; height:2.5px; background:var(--orange); border-radius:2px; }

.mobile-dropdown{
  display:none; position:fixed; top:70px; right:20px; z-index:30;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(36,28,21,.18);
  flex-direction:column; min-width:190px; overflow:hidden;
}
.mobile-dropdown.open{ display:flex; }
.mobile-dropdown a{
  padding:13px 18px; font-weight:700; color:var(--orange);
  border-bottom:1px solid var(--line);
}
.mobile-dropdown a:last-child{ border-bottom:none; }
.mobile-dropdown a:hover{ background:var(--orange-softer); }

@media (max-width:640px){
  .topbar{ top:16px; right:16px; padding:10px 18px; }
  .topbar .tb-about, .topbar .tb-login{ display:none; }
  .hamburger{ display:flex; }
}

/* ===== HERO ===== */
.hero{
  position:relative; flex:1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* Ocupa lo que quede entre la barra y el pie. El mínimo es bajo a
     propósito: así la portada cabe en pantallas de portátil sin
     obligar a bajar. */
  min-height:0; flex:1 1 auto; padding-top:70px;
  /* La imagen, su capa oscura y sus ajustes se configuran en
     Panel > Portada y se escriben en la página (sistema/fondo.php). */
  background-color:var(--ink);
}
.hero-content{
  position:relative; z-index:1; margin-right:auto;
  text-align:left; max-width:720px; padding-left:6vw;
}
.hero-logo{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  font-family:'Sora',sans-serif; font-weight:800;
  font-size:clamp(2.2rem, 6vw, 4rem);
  letter-spacing:-.04em; color:var(--white);
}
.hero-logo svg{ width:clamp(42px,7vw,72px); height:clamp(42px,7vw,72px); }
.hero-tagline{
  /* Algo más de aire bajo el logo: los tres niveles siguen bajando
     hacia la derecha, pero el conjunto se lee como intencional y no
     como apretado. */
  margin-top:22px; font-size:clamp(.92rem, 1.5vw, 1.12rem);
  color:rgba(255,255,255,.88); font-weight:500;
}
.hero-ctas{ margin-top:30px; display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; }

@media (max-width:768px){
  .hero{ padding-top:80px; min-height:400px; }
  .hero-content{
    text-align:center; margin:0 auto; padding:32px 20px;
    background:rgba(36,28,21,.45); backdrop-filter:blur(4px);
    border-radius:12px; max-width:90%;
  }
  .hero-ctas{ justify-content:center; }
  .hero-logo{ justify-content:center; }
}
/* En pantallas muy bajas se permite desplazar: vale más ver el
   contenido que forzarlo. */
@media (max-height:560px){ .hero{ min-height:420px; } }

@media (max-width:560px){
  .hero{ min-height:400px; }
  .footer{ padding:12px 16px; font-size:.75rem; }
  .footer-links{ gap:16px; }
}

/* ===== BOTONES ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 30px; border-radius:8px; font-weight:700; font-size:.95rem;
  font-family:'Inter',sans-serif; cursor:pointer; border:2px solid transparent;
  transition:opacity .15s;
}
.btn:hover{ opacity:.88; }
.btn-solid{ background:var(--orange); color:var(--white); }
.btn-outline{ background:var(--white); color:var(--orange); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--orange); }

/* ===== FOOTER ===== */
.transition-strip{ height:6px; background:var(--orange); flex-shrink:0; }
.footer{
  background:var(--orange); color:#FFF0E4; padding:14px 24px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:.8rem; text-align:center; flex-shrink:0;
}
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:var(--ink); font-weight:700; }
.footer-links a:hover{ color:var(--white); }
.footer-copy{ color:#FFE3CB; }

/* ===== MODAL CARRUSEL ===== */
.katalog-modal-overlay{
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(5,5,5,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  justify-content:center; align-items:center; padding:15px;
}
.katalog-modal-overlay.open{ display:flex; animation:fadeInModal .25s ease-out forwards; }

.katalog-modal-container{
  background:transparent; border:none; width:90vw; height:90vh;
  overflow:hidden; display:flex; flex-direction:column;
}
.katalog-modal-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:rgba(18,18,20,.6); backdrop-filter:blur(4px);
  border-radius:10px 10px 0 0; flex-shrink:0;
}
.modal-title-wrapper h3{
  color:#fff; font-size:1.1rem; font-weight:600; margin:0; letter-spacing:.5px;
}
.modal-close-btn{
  background:transparent; border:none; color:#aaa; font-size:26px;
  cursor:pointer; transition:color .2s; padding:0; line-height:1;
}
.modal-close-btn:hover{ color:#fff; }

.katalog-modal-body{
  padding:0; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex-grow:1;
  overflow:hidden; background:transparent;
}
.pro-carousel{ position:relative; overflow:hidden; width:100%; height:100%; background:transparent; }
.pro-carousel-track{
  display:flex; height:100%; width:100%;
  transition:transform .4s cubic-bezier(.25,1,.5,1);
}
.pro-slide{
  min-width:100%; height:100%; box-sizing:border-box;
  opacity:.4; transition:opacity .3s ease; position:relative;
}
.pro-slide.active{ opacity:1; }
.slide-card-content{ display:flex; flex-direction:column; width:100%; height:100%; position:relative; }
.slide-image-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.slide-image-placeholder img{ width:100%; height:100%; object-fit:contain; }

.carousel-control{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(18,18,20,.6); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1); color:#fff;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; z-index:5;
}
.carousel-control:hover{ background:rgba(30,30,35,.9); border-color:rgba(255,255,255,.3); }
.carousel-control svg{ width:20px; height:20px; }
.carousel-control.prev{ left:20px; }
.carousel-control.next{ right:20px; }

.carousel-indicators{
  position:absolute; bottom:25px; display:flex; justify-content:center; gap:8px; z-index:5;
}
.indicator{
  width:8px; height:8px; border-radius:4px; padding:0;
  background:rgba(255,255,255,.4); border:none; cursor:pointer; transition:all .3s;
}
.indicator.active{ width:24px; background:var(--white); }

.floating-cta-container{
  position:absolute; bottom:45px; left:50%; transform:translateX(-50%); z-index:10;
}
.floating-action-btn{
  box-shadow:0 8px 24px rgba(0,0,0,.7); backdrop-filter:blur(6px);
  background:var(--orange); border-color:var(--orange); font-weight:600; color:#fff;
}
.floating-action-btn:hover{ background:var(--orange-deep); border-color:var(--orange-deep); }

@keyframes fadeInModal{
  from{ opacity:0; transform:scale(.97); }
  to{ opacity:1; transform:scale(1); }
}

/* ===== MODAL "SOBRE KATALOG" ===== */
.about-overlay{
  display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(36,28,21,.55);
  align-items:center; justify-content:center; padding:16px; overflow-y:auto;
}
.about-overlay.open{ display:flex; }
.about-box{
  background:var(--white); width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  border-radius:14px; box-shadow:0 20px 50px rgba(36,28,21,.3);
}
.about-box-head{
  background:var(--orange); color:var(--white); padding:18px 24px;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:1;
}
.about-box-head span{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; }
.about-box-head button{ background:none; border:none; color:#FFD6B8; font-size:1.2rem; cursor:pointer; }
.about-box-body{ padding:24px; }
.about-box-body p{ color:var(--ink-soft); font-size:.94rem; line-height:1.55; margin-bottom:14px; text-align:justify; }
.about-box-body h4{ font-family:'Sora',sans-serif; font-size:1rem; margin:22px 0 12px; color:var(--ink); }

.plan-grid{ display:grid; gap:12px; }
.plan-card{
  border:1.5px solid var(--line); border-radius:10px; padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.plan-card.featured{ border-color:var(--orange); background:var(--orange-softer); }
.plan-card .plan-name{ font-weight:700; font-size:.92rem; color:var(--ink); }
.plan-card .plan-desc{ font-size:.8rem; color:var(--ink-soft); margin-top:3px; }
.plan-card .plan-precio{ font-size:.85rem; font-weight:700; color:var(--orange-deep); margin-top:5px; }
.plan-card .plan-tag{
  font-size:.72rem; font-weight:700; color:var(--orange-deep);
  background:var(--orange-softer); padding:4px 9px; border-radius:8px; white-space:nowrap;
}


/* ===== Añadidos ===== */
.topbar button.tb-link{ background:none; border:none; font:inherit; color:var(--orange); cursor:pointer; padding:0; }
.topbar button.tb-link:hover{ color:var(--orange-deep); }
.mobile-dropdown button{ background:none; border:none; font:inherit; text-align:left; padding:13px 18px; font-weight:700; color:var(--orange); border-bottom:1px solid var(--line); cursor:pointer; }
.plan-card .btn{ padding:8px 14px; font-size:.8rem; }
.plan-derecha{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.icono-wa{ width:18px; height:18px; margin-right:8px; }

/* =====================================================================
   PÁGINAS LEGALES (términos, privacidad, cookies)
===================================================================== */
.pagina-legal-body{ background:var(--cream); }
.legal-barra{ background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:14px 24px; }
.legal-marca{ display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:800; font-size:1.15rem; color:#fff; }
.legal-nav{ display:flex; gap:6px; flex-wrap:wrap; }
.legal-nav a{ color:rgba(255,255,255,.8); font-size:.85rem; font-weight:600; padding:7px 12px; border-radius:8px; }
.legal-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.legal-nav a.activo{ background:var(--orange); color:#fff; }
.pagina-legal{ flex:1; background: var(--cream); }

.legal-cabeza{
  background: var(--orange); color:#fff; padding:54px 24px 36px; text-align:center;
}
.legal-cabeza h1{
  font-family:'Sora',sans-serif; font-size:clamp(1.6rem, 4vw, 2.2rem);
  font-weight:800; letter-spacing:-.02em;
}
.legal-cabeza p{ font-size:.86rem; opacity:.92; margin-top:8px; }

.legal-cuerpo{
  max-width:780px; margin:0 auto; padding:36px 24px 70px;
}
.legal-cuerpo h2{
  font-family:'Sora',sans-serif; font-size:1.12rem; margin:30px 0 10px;
  padding-bottom:7px; border-bottom:2px solid var(--orange); display:inline-block;
}
.legal-cuerpo h2:first-child{ margin-top:0; }
.legal-cuerpo h3{
  font-size:.98rem; font-weight:700; margin:20px 0 8px; color: var(--ink);
}
.legal-cuerpo p{
  font-size:.94rem; line-height:1.75; color: var(--ink-soft); margin-bottom:12px;
}
.legal-cuerpo ul{
  margin:0 0 16px 22px; font-size:.94rem; line-height:1.8; color: var(--ink-soft);
}
.legal-cuerpo li{ margin-bottom:5px; }
.legal-cuerpo a{ color: var(--orange-deep); font-weight:600; }
.legal-cuerpo a:hover{ text-decoration:underline; }
.legal-cuerpo strong{ color: var(--ink); }


.legal-cuerpo h2{ display:block; }
.legal-cuerpo h3{ margin-top:16px; }
.legal-volver{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }
@media (max-width:640px){
  .legal-barra{ padding:12px 16px; }
  .legal-nav{ width:100%; }
  .legal-nav a{ flex:1; text-align:center; padding:8px 6px; font-size:.78rem; }
  .legal-cabeza{ padding:34px 18px 26px; }
  .legal-cuerpo{ padding:26px 18px 50px; }
}

/* =====================================================================
   AVISO DE COOKIES (informativo)
===================================================================== */
.aviso-cookies{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9000; /* debajo de las ventanas (9998): antes las tapaba y bloqueaba sus botones */
  background: var(--white); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 44px rgba(36,28,21,.24);
  padding:18px 22px; max-width:760px; margin:0 auto;
  display:none; align-items:center; gap:20px; flex-wrap:wrap;
  animation: subirCookies .3s ease-out;
}
.aviso-cookies:not([hidden]){ display:flex; }

.aviso-cookies-texto{
  flex:1; min-width:260px; font-size:.85rem; line-height:1.6; color: var(--ink-soft);
}
.aviso-cookies-texto strong{ display:block; color: var(--ink); margin-bottom:4px; font-size:.92rem; }
.aviso-cookies-texto a{ color: var(--orange-deep); font-weight:700; }

.aviso-cookies-botones{ display:flex; gap:9px; flex-shrink:0; }
.aviso-cookies-botones .btn{ padding:10px 20px; font-size:.86rem; }

@keyframes subirCookies{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:560px){
  .aviso-cookies{ padding:16px; }
  .aviso-cookies-botones{ width:100%; }
  .aviso-cookies-botones .btn{ flex:1; }
}


.aviso-cookies-texto a{ color:var(--orange-deep); font-weight:700; }