:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-tint:#eff6ff; --text:#111827; --text-secondary:#6b7280;
  --border:#e5e7eb; --bg-alt:#f9fafb;
  --font-heading:'Inter', sans-serif; --font-body:'Inter', sans-serif;
  --heading-color:#111827; --body-text-color:#6b7280; --body-text-color-muted:#9ca3af;
  --danger:#dc2626; --success:#16a34a; --text-muted:#9ca3af;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--body-text-color);line-height:1.6;}
h1,h2,h3,h4,p{margin:0;}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--heading-color);}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
.wrap.narrow{max-width:720px;}
.wrap.center{text-align:center;}

.site-header{position:sticky;top:0;background:var(--header-bg);z-index:20;transition:box-shadow .22s ease;}
/* Al bajar la página, una sombra suave separa el header del contenido: así se
   entiende que es una barra fija por encima y no parte de la página. */
.site-header.is-scrolled{box-shadow:0 2px 12px rgba(17,24,39,.10);}
/* Si el header está en modo transparente, al bajar toma su color de fondo.
   Sin esto, el logo (que suele tener fondo blanco) queda flotando sobre las
   imágenes del contenido y se ve un recuadro cortado. */
.site-header.header-transparent{background:transparent;transition:background .22s ease,box-shadow .22s ease;}
.site-header.header-transparent.is-scrolled{background:var(--header-solid-bg,#fff);}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;}
.site-logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;}
.site-logo{height:32px;}
.site-logo-text{font-weight:800;font-size:18px;color:var(--header-text);}
.site-nav{display:flex;align-items:center;gap:20px;}
.site-nav a{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--header-text);}
.site-nav a:hover{color:var(--primary);}
.site-nav a svg{width:15px;height:15px;flex-shrink:0;}
.btn-nav{display:flex;align-items:center;gap:6px;background:var(--primary);color:#fff !important;padding:9px 14px;border-radius:8px;}
.btn-nav:hover{background:var(--primary-dark);}
.academia-access-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--header-text);opacity:.75;margin-left:-10px;}
.academia-access-icon:hover{opacity:1;color:var(--primary);}
.academia-access-icon svg{width:16px;height:16px;}

/* Submenú desplegable (ej: "Nosotros" agrupando Equipo / Por qué elegirnos) */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:var(--header-text);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;}
.nav-dropdown-trigger:hover{color:var(--primary);}
.nav-dropdown-trigger > svg:first-child{width:15px;height:15px;flex-shrink:0;}
.nav-caret{width:11px;height:11px;flex-shrink:0;transition:transform .15s ease;}
.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--border);border-radius:10px;
  min-width:190px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.1);
  display:none;flex-direction:column;gap:2px;z-index:30;
}
.nav-dropdown.open .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{display:flex;align-items:center;gap:9px;color:var(--text) !important;font-size:13.5px;padding:8px 10px;border-radius:7px;}
.nav-dropdown-menu a svg{width:14px;height:14px;flex-shrink:0;}
.nav-dropdown-menu a:hover{background:var(--field-bg,#f9fafb);color:var(--primary) !important;}

/* Botón hamburguesa (solo se ve en móvil) */
.nav-burger{display:none;background:none;border:none;color:var(--header-text);cursor:pointer;padding:4px;}
.nav-burger svg{width:24px;height:24px;}

/* Panel del menú móvil */
.nav-mobile{display:none;flex-direction:column;gap:2px;padding:10px 24px 16px;border-top:1px solid rgba(128,128,128,.15);}
.nav-mobile a{display:flex;align-items:center;gap:10px;color:var(--header-text);font-weight:600;font-size:14.5px;padding:10px 4px;}
.nav-mobile a svg{width:16px;height:16px;flex-shrink:0;}
.nav-mobile a.nav-mobile-sub{padding-left:24px;font-weight:500;font-size:13.5px;opacity:.85;}
.nav-mobile.open{display:flex;}

.hero{position:relative;height:560px;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background:#1e3a8a center/cover no-repeat;opacity:0;transition:opacity .5s ease;display:flex;align-items:center;}
.hero-slide.active{opacity:1;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(17,24,39,.6), rgba(17,24,39,.25));}
/* 1000px en vez de los 640 originales: con 640 hasta un título de 5 palabras
   se partía en dos líneas. Con esto entran los títulos de una frase completa. */
.hero-content{position:relative;z-index:2;max-width:1000px;margin:0 auto;padding:0 24px;color:#fff;text-align:center;}
/* El tamaño se adapta al ancho de la pantalla: así un título largo entra en
   una línea en pantallas grandes sin quedar gigante en las chicas.
   clamp = mínimo 27px, ideal 3.4% del ancho, máximo 42px. */
.hero-content h1{font-size:clamp(27px,3.4vw,42px);font-weight:800;margin-bottom:14px;letter-spacing:-.015em;line-height:1.15;color:#fff;}
.hero-content p{font-size:16px;opacity:.92;margin-bottom:24px;}
.btn-primary-lg{display:inline-block;background:var(--primary);color:#fff;font-weight:700;padding:13px 26px;border-radius:9px;border:none;font-size:14.5px;cursor:pointer;}
.btn-primary-lg:hover{background:var(--primary-dark);}
.hero-dots{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3;}
.hero-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;}
.hero-dot.active{background:#fff;}

.section{padding:72px 0;}
.section.alt{background:var(--bg-alt);}
.section.tint{background:var(--primary-tint);}
.section-head{text-align:center;max-width:560px;margin:0 auto 40px;}
.section-head h2{font-size:26px;font-weight:800;margin-bottom:8px;}
.section-head p{color:var(--body-text-color);font-size:15px;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;}
.tile-icon{width:44px;height:44px;border-radius:10px;background:var(--primary-tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tile-icon svg{width:22px;height:22px;color:var(--primary);}
.tile h3{font-size:16px;font-weight:700;margin-bottom:8px;}
.tile p{color:var(--body-text-color);font-size:14px;}

.filters{display:flex;justify-content:center;gap:8px;margin-bottom:30px;flex-wrap:wrap;}
.filter-btn{border:1px solid var(--border);background:#fff;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;color:var(--body-text-color);}
.filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.portfolio-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.portfolio-img{height:170px;background:#e5e7eb center/cover no-repeat;}
.portfolio-info{padding:16px;}
.portfolio-info h4{font-size:15px;font-weight:700;margin-bottom:6px;}
.tag{font-size:11.5px;font-weight:600;color:var(--primary);background:var(--primary-tint);padding:3px 10px;border-radius:20px;}

.lead-text{font-size:17px;color:var(--body-text-color);margin-top:14px;}

.accordion{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.accordion-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.accordion-item.open{border-color:var(--primary);}
.accordion-header{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;text-align:left;cursor:pointer;
  padding:18px 20px;font-size:15.5px;font-weight:700;color:var(--heading-color);font-family:inherit;
}
.accordion-item.open .accordion-header{color:var(--primary);}
.accordion-toggle-icon{position:relative;width:16px;height:16px;flex-shrink:0;}
.accordion-toggle-icon::before,.accordion-toggle-icon::after{
  content:'';position:absolute;top:50%;left:50%;background:currentColor;
  transition:transform .15s ease;
}
.accordion-toggle-icon::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.accordion-toggle-icon::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.accordion-item.open .accordion-toggle-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.accordion-item.open .accordion-panel{max-height:400px;}
.accordion-panel-inner{padding:0 20px 20px;color:var(--body-text-color);font-size:14.5px;line-height:1.65;}

.team-card{text-align:center;}
.team-img{width:120px;height:120px;border-radius:50%;background:#e5e7eb center/cover no-repeat;margin:0 auto 14px;}
.team-card h4{font-size:15px;font-weight:700;}
.team-card p{color:var(--body-text-color);font-size:13.5px;margin-bottom:8px;}
.team-social{display:flex;justify-content:center;gap:10px;font-size:12px;}

.testimonial-carousel{position:relative;min-height:170px;margin-top:24px;}
.testimonial-slide{display:none;}
.testimonial-slide.active{display:block;}
.testimonial-avatar{width:64px;height:64px;border-radius:50%;background:#e5e7eb center/cover no-repeat;margin:0 auto 16px;}
.testimonial-text{font-size:17px;font-style:italic;color:var(--body-text-color);margin-bottom:10px;}
.testimonial-name{font-weight:700;font-size:14px;}

.clients-row{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:center;}
.client-logo{width:140px;height:60px;display:flex;align-items:center;justify-content:center;opacity:.75;filter:grayscale(1);}
.client-logo:hover{opacity:1;filter:none;}
.client-logo span{font-weight:700;color:var(--body-text-color);}

.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:center;}
/* Bloques de contenido: la imagen alterna de lado. En los pares se invierte el
   orden visual sin tocar el HTML, así el texto sigue leyéndose primero para un
   lector de pantalla y en el celular queda siempre imagen arriba, texto abajo. */
.about-grid.is-flipped{grid-template-columns:1.2fr 1fr;}
.about-grid.is-flipped .about-img{order:2;}
.about-grid.is-flipped .about-body{order:1;}
.about-grid-next{margin-top:72px;}
.about-cta{margin-top:22px;}
.about-img-empty{background:var(--bg-alt);}
/* La imagen sigue la forma elegida en Configuración: recta con la variante
   "recto con borde fino", redondeada con las otras dos. */
.lay-blocks-sharp .about-img{border-radius:2px;}
.about-img{width:100%;aspect-ratio:650/800;background:#e5e7eb center/cover no-repeat;border-radius:16px;}
.about-subtitle{color:var(--primary);font-weight:600;margin:8px 0 14px;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-info h2{margin-bottom:10px;}
.contact-info > p{color:var(--body-text-color);margin-bottom:28px;}
.contact-info-item{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.contact-info-icon{width:44px;height:44px;border-radius:50%;background:var(--primary-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-info-icon svg{width:19px;height:19px;color:var(--primary);stroke:currentColor;}
.contact-info-item div a{color:var(--body-text-color);}
.contact-info-item div a:hover{color:var(--primary);}

.contact-form-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;padding:32px;}
.contact-form{display:flex;flex-direction:column;gap:12px;text-align:left;}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.contact-form input{border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:14px;font-family:inherit;width:100%;}
.contact-form input:focus{outline:none;border-color:var(--primary);}
.form-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:10px;padding:16px;}
.form-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;border-radius:10px;padding:14px;margin-bottom:16px;font-size:14px;}

.captcha-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 14px;}
.captcha-row label{font-size:13.5px;color:var(--body-text-color);white-space:nowrap;}
.captcha-row input{border:none;padding:0;flex:1;min-width:0;}
.captcha-row input:focus{outline:none;}

/* Campo trampa: invisible para personas, pero presente en el HTML para bots poco cuidadosos */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:32px;}
  .contact-form-row{grid-template-columns:1fr;}
}

.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:26px 0;}
.footer-bar-left{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.footer-bar-left a{color:var(--footer-text);opacity:.8;font-size:13px;}
.footer-bar-left a:hover{opacity:1;}
/* Crédito al pie: lo más discreto posible. Usa opacidad sobre el color del
   footer (no un gris fijo) para que se lea igual de sutil sobre cualquier
   color que elija el cliente. */
.footer-credit{margin-top:10px;text-align:center;font-size:11px;font-weight:400;color:var(--footer-text);opacity:.38;transition:opacity .15s ease;}
.footer-credit:hover{opacity:.6;}
.footer-credit a{color:inherit;text-decoration:none;font-weight:400;}
.footer-sep{opacity:.4;}

/* Páginas personalizadas */
.page-hero{position:relative;height:280px;background:#1e293b center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.page-hero-overlay{position:absolute;inset:0;background:rgba(17,24,39,.45);}
.page-hero-content{position:relative;z-index:2;text-align:center;padding:0 24px;}
.page-hero-content h1{color:#fff;font-size:34px;font-weight:800;}
.page-hero-plain{background:var(--bg-alt);height:auto;padding:56px 24px;}
.page-hero-plain .page-hero-content h1{color:var(--heading-color);}
.page-content{padding:48px 0;color:var(--body-text-color);line-height:1.75;font-size:15.5px;}
.page-content h2,.page-content h3{color:var(--heading-color);margin:28px 0 12px;}
.page-content p{margin-bottom:16px;}
.page-content ul,.page-content ol{margin-bottom:16px;padding-left:24px;}
.page-content a{color:var(--primary);text-decoration:underline;}
.page-content img{max-width:100%;border-radius:10px;margin:16px 0;}

.blog-card{display:block;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:box-shadow .15s ease;}
.blog-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);}
.blog-card-img{height:170px;background:#e5e7eb center/cover no-repeat;}
.blog-card-body{padding:18px;}
.blog-card-body .tag{margin-bottom:10px;}
.blog-card-body h3{font-size:16px;font-weight:700;color:var(--heading-color);margin-bottom:8px;}
.blog-card-body p{font-size:13.5px;color:var(--body-text-color);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:36px;}
.pagination-item{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-weight:600;color:var(--body-text-color);}
.pagination-item:hover{border-color:var(--primary);color:var(--primary);}
.pagination-item.active{background:var(--primary);border-color:var(--primary);color:#fff;}

.share-row{display:flex;align-items:center;gap:10px;margin-top:36px;padding-top:24px;border-top:1px solid var(--border);position:relative;}
.share-label{font-size:13px;font-weight:600;color:var(--body-text-color);margin-right:4px;}
.share-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);color:var(--body-text-color);cursor:pointer;font-weight:700;font-size:14px;}
.share-btn svg{width:16px;height:16px;}
.share-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.share-copied{position:absolute;left:0;bottom:-24px;font-size:12px;color:var(--success);opacity:0;transition:opacity .2s ease;}
.share-copied.show{opacity:1;}

/* ============ Campos de formulario reutilizables (checkout de Tienda, login de Academia) ============ */
.field{margin-bottom:16px;}
.field .label,.field > span.label{display:block;font-size:12.5px;font-weight:600;color:var(--body-text-color);margin-bottom:6px;}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),.field textarea,.field select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;color:var(--heading-color);background:#fff;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);}
.hint{font-size:12px;color:var(--text-muted, #9ca3af);margin-top:6px;}

/* ============ Tienda ============ */
.shop-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;}
.shop-categories{display:flex;flex-direction:column;gap:4px;position:sticky;top:88px;}
.shop-cat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--body-text-color);}
.shop-cat-item:hover{background:var(--bg-alt);}
.shop-cat-item.active{background:var(--primary-tint);color:var(--primary);}
.shop-cat-count{font-size:11.5px;font-weight:600;color:var(--text-muted);}
.shop-cat-item.active .shop-cat-count{color:var(--primary);opacity:.7;}

.shop-search{position:relative;margin-bottom:24px;}
.shop-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);}
.shop-search input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;}
.shop-search input:focus{outline:none;border-color:var(--primary);}

.shop-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:box-shadow .15s ease;}
.shop-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);}
.shop-card-img{aspect-ratio:1/1;background:#e5e7eb center/cover no-repeat;}
.shop-card-body{padding:16px;display:flex;flex-direction:column;flex:1;}
.shop-card-body .tag{margin-bottom:8px;align-self:flex-start;}
.shop-card-body h3{font-size:15px;font-weight:700;color:var(--heading-color);margin-bottom:6px;}
.shop-card-body p{font-size:13px;color:var(--body-text-color);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;margin-bottom:10px;}
.shop-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;}
.shop-price{font-size:16px;font-weight:800;color:var(--primary);}
.shop-add-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;flex-shrink:0;}
.shop-add-btn:hover{background:var(--primary-dark);}
.shop-add-btn svg{width:16px;height:16px;}

/* Burbuja flotante del carrito */
.shop-cart-bubble{position:fixed;bottom:26px;right:26px;z-index:60;display:flex;align-items:center;gap:10px;background:#111827;color:#fff;padding:12px 18px;border-radius:100px;box-shadow:0 8px 24px rgba(0,0,0,.25);border:none;cursor:pointer;font-family:inherit;}
.shop-cart-bubble-total{font-weight:800;font-size:14px;}
.shop-cart-bubble-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;opacity:.9;}
.shop-cart-bubble-label svg{width:15px;height:15px;}

/* Drawer lateral (carrito / checkout) */
.shop-drawer-overlay{position:fixed;inset:0;background:rgba(17,24,39,.4);z-index:70;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.shop-drawer-overlay.open{opacity:1;visibility:visible;}
.shop-drawer{position:fixed;top:0;right:-420px;width:min(420px,92vw);height:100%;background:#fff;z-index:71;box-shadow:-8px 0 24px rgba(0,0,0,.12);transition:right .25s ease;padding:24px;overflow-y:auto;}
.shop-drawer.open{right:0;}
.shop-drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.shop-drawer-header h3{font-size:18px;font-weight:800;color:var(--heading-color);}
.shop-drawer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;}
.shop-drawer-close svg{width:20px;height:20px;}

.shop-cart-items{display:flex;flex-direction:column;gap:14px;margin-bottom:20px;}
.shop-cart-item-row{display:flex;align-items:center;gap:10px;}
.shop-cart-item-info{flex:1;min-width:0;}
.shop-cart-item-name{font-size:13.5px;font-weight:700;color:var(--heading-color);}
.shop-cart-item-price{font-size:12px;color:var(--text-muted);}
.shop-cart-qty-input{width:54px;padding:6px;border:1px solid var(--border);border-radius:7px;text-align:center;font-size:13px;font-family:inherit;}
.shop-cart-remove{background:none;border:none;color:var(--danger);cursor:pointer;flex-shrink:0;}
.shop-cart-remove svg{width:16px;height:16px;}

.shop-cart-total-row{display:flex;justify-content:space-between;font-weight:800;font-size:16px;color:var(--heading-color);padding-top:14px;border-top:1px solid var(--border);margin-bottom:16px;}

.shop-drawer-actions{display:flex;gap:10px;margin-top:16px;}
.shop-drawer-actions .btn{flex-shrink:0;}
.shop-drawer-actions .btn-primary-lg{flex:1;}
.shop-checkout-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px 12px;border-radius:8px;font-size:13px;margin-top:10px;}

/* Cupón de descuento en el checkout */
.shop-coupon-box{background:var(--bg-alt);border-radius:10px;padding:14px;margin-bottom:16px;}
.shop-coupon-box .label{display:block;font-size:12.5px;font-weight:600;color:var(--body-text-color);margin-bottom:8px;}
.shop-coupon-row{display:flex;gap:8px;}
.shop-coupon-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;}
.shop-coupon-row input:focus{outline:none;border-color:var(--primary);}
.shop-coupon-row .btn{flex-shrink:0;}
.shop-coupon-msg{font-size:12.5px;margin-top:8px;}
.shop-coupon-msg.ok{color:var(--success);font-weight:600;}
.shop-coupon-msg.error{color:var(--danger);}

/* Desglose de totales del checkout */
.shop-checkout-totals{border-top:1px solid var(--border);padding-top:12px;margin-bottom:14px;}
.shop-total-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--body-text-color);margin-bottom:6px;}
.shop-total-discount{color:var(--success);font-weight:600;}
.shop-total-final{font-size:17px;font-weight:800;color:var(--heading-color);margin-bottom:0;padding-top:6px;}
.shop-done-icon{width:56px;height:56px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:30px auto 0;}

/* Modal de detalle del producto */
.shop-modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);z-index:80;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease;padding:20px;}
.shop-modal-overlay.open{opacity:1;visibility:visible;}
.shop-modal{background:#fff;border-radius:16px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;position:relative;}
.shop-modal-close{position:absolute;top:14px;right:14px;background:#fff;border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.shop-modal-close svg{width:16px;height:16px;}
.shop-modal-img{aspect-ratio:1/1;background:#e5e7eb center/cover no-repeat;border-radius:16px 16px 0 0;}
.shop-modal-body{padding:22px;}
.shop-modal-body h3{font-size:19px;font-weight:800;color:var(--heading-color);margin-bottom:10px;}
.shop-modal-body p{font-size:14px;color:var(--body-text-color);line-height:1.6;margin-bottom:16px;}
.shop-modal-price{font-size:20px;font-weight:800;color:var(--primary);margin-bottom:16px;}
.shop-modal-qty{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;}
.shop-modal-qty button{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:18px;cursor:pointer;}
.shop-modal-qty input{width:44px;text-align:center;border:none;font-size:16px;font-weight:700;font-family:inherit;}

@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;}
  .shop-categories{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:8px;margin-bottom:16px;-webkit-overflow-scrolling:touch;}
  .shop-cat-item{white-space:nowrap;flex-shrink:0;}
}

/* ============================================================
   Movimiento e interacción
   Todo esto respeta la preferencia del sistema de "reducir movimiento":
   quien la tenga activada (por mareo o sensibilidad) ve el sitio quieto.
   ============================================================ */

/* Tarjetas: se levantan suavemente al pasar el mouse. */
.tile, .portfolio-card, .blog-card, .shop-card, .academia-course-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover, .portfolio-card:hover, .blog-card:hover, .shop-card:hover, .academia-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17,24,39,.09);
  border-color: var(--primary-tint);
}
/* El ícono de la tarjeta reacciona junto con ella. */
.tile:hover .tile-icon { transform: scale(1.08); }
.tile-icon { transition: transform .22s ease; }

/* La imagen del portafolio y del blog hace un zoom leve dentro de su marco. */
.portfolio-img, .blog-card-img, .shop-card-img {
  transition: transform .4s ease;
}
.portfolio-card:hover .portfolio-img,
.blog-card:hover .blog-card-img,
.shop-card:hover .shop-card-img {
  transform: scale(1.05);
}
.portfolio-card, .blog-card, .shop-card { overflow: hidden; }

/* Botones: un empujón sutil al pasar por encima. */
.btn-primary-lg, .btn-nav {
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-primary-lg:hover, .btn-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37,99,235,.24);
}

/* Las secciones aparecen al entrar en pantalla al hacer scroll. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Marquesina de clientes ---------- */
.clients-marquee { overflow: hidden; position: relative; padding: 6px 0; }
.clients-track { display: flex; align-items: center; gap: 40px; width: max-content; }
/* Sin animación (pocos logos): se centran en vez de correr. */
.clients-marquee:not(.is-animated) .clients-track {
  width: 100%; flex-wrap: wrap; justify-content: center; gap: 28px;
}
.clients-marquee.is-animated .clients-track {
  animation: clients-scroll 38s linear infinite;
}
/* Se detiene al pasar el mouse, para poder leer un logo o hacerle clic. */
.clients-marquee.is-animated:hover .clients-track { animation-play-state: paused; }
/* Los bordes se difuminan para que los logos no aparezcan cortados de golpe. */
.clients-marquee.is-animated::before,
.clients-marquee.is-animated::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.clients-marquee.is-animated::before { left: 0; background: linear-gradient(to right, var(--section-bg, #fff), transparent); }
.clients-marquee.is-animated::after { right: 0; background: linear-gradient(to left, var(--section-bg, #fff), transparent); }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }  /* la mitad = un juego completo de logos */
}
.client-logo { flex-shrink: 0; transition: opacity .22s ease, filter .22s ease, transform .22s ease; }
.client-logo:hover { transform: scale(1.06); }

/* ---------- Navegación de testimonios ---------- */
.testimonial-slide { animation: testimonial-in .5s ease; }
@keyframes testimonial-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.testimonial-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.testimonial-arrow {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: #fff;
  color: var(--body-text-color); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s ease; flex-shrink: 0;
}
.testimonial-arrow:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.08); }
.testimonial-arrow svg { width: 17px; height: 17px; }
.testimonial-dots { display: flex; gap: 7px; }
.testimonial-dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: var(--border); cursor: pointer; transition: all .2s ease;
}
.testimonial-dot:hover { background: var(--body-text-color); }
.testimonial-dot.active { background: var(--primary); width: 22px; border-radius: 4px; }

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .clients-marquee.is-animated .clients-track { animation: none; }
  .clients-marquee.is-animated .clients-track { flex-wrap: wrap; justify-content: center; width: 100%; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .testimonial-slide { animation: none; }
  .tile:hover, .portfolio-card:hover, .blog-card:hover, .shop-card:hover,
  .academia-course-card:hover, .btn-primary-lg:hover, .btn-nav:hover { transform: none; }
}

/* ============ Planes (tabla de precios) ============ */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.plans-count-1{grid-template-columns:minmax(0,380px);justify-content:center;}
.plans-count-2{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;}
.plans-count-4{grid-template-columns:repeat(4,1fr);gap:18px;}

.plan-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px 26px;
  display:flex;flex-direction:column;height:100%;transition:transform .22s ease,box-shadow .22s ease;}
.plan-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(17,24,39,.10);}
/* El plan recomendado se despega del resto. */
.plan-card.is-featured{border-color:var(--primary);border-width:2px;box-shadow:0 10px 30px rgba(37,99,235,.13);}
.plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 14px;border-radius:100px;white-space:nowrap;}

.plan-name{font-size:18px;font-weight:800;color:var(--heading-color);margin-bottom:4px;}
.plan-desc{font-size:13.5px;color:var(--body-text-color);margin-bottom:18px;}
.plan-price{font-size:34px;font-weight:800;color:var(--heading-color);line-height:1.1;letter-spacing:-.02em;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border);}
.plan-price-note{display:block;font-size:12.5px;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-top:4px;}

.plan-features{list-style:none;padding:0;margin:0 0 24px;flex:1;}
.plan-features li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--body-text-color);
  line-height:1.5;margin-bottom:11px;}
.plan-features svg{width:15px;height:15px;color:var(--primary);flex-shrink:0;margin-top:3px;}

.plan-btn{width:100%;padding:13px 20px;border-radius:10px;border:1px solid var(--primary);background:#fff;
  color:var(--primary);font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;margin-top:auto;
  transition:all .18s ease;}
.plan-btn:hover{background:var(--primary);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(37,99,235,.24);}
.plan-card.is-featured .plan-btn{background:var(--primary);color:#fff;}
.plan-card.is-featured .plan-btn:hover{background:var(--primary-dark);}

/* Modal para contratar un plan */
.plan-modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);z-index:90;display:flex;
  align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.plan-modal-overlay.open{opacity:1;visibility:visible;}
.plan-modal{position:relative;background:#fff;border-radius:16px;padding:30px 28px;width:100%;max-width:440px;
  max-height:90vh;overflow-y:auto;}
.plan-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-muted);
  cursor:pointer;padding:4px;}
.plan-modal-close svg{width:19px;height:19px;}
.plan-modal h3{font-size:20px;font-weight:800;color:var(--heading-color);margin-bottom:6px;}
.plan-modal-sub{font-size:14px;color:var(--body-text-color);margin-bottom:20px;line-height:1.6;}
.plan-modal-sub strong{color:var(--primary);}

@media (max-width:900px){
  .plans-grid,.plans-count-4{grid-template-columns:repeat(2,1fr);}
  .plans-count-1,.plans-count-2{grid-template-columns:minmax(0,380px);justify-content:center;}
}
@media (max-width:600px){
  .plans-grid,.plans-count-2,.plans-count-4{grid-template-columns:1fr;}
  .plan-price{font-size:30px;}
}

/* ============ Botón flotante de WhatsApp ============ */
.wa-float{position:fixed;bottom:24px;left:24px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.42);transition:transform .2s ease,box-shadow .2s ease;}
.wa-float:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(37,211,102,.55);}
.wa-float svg{width:30px;height:30px;}
/* Un latido suave cada tanto, para que se note sin ser molesto. */
@keyframes wa-pulse{
  0%,88%,100%{transform:scale(1);}
  92%{transform:scale(1.1);}
  96%{transform:scale(1.04);}
}
.wa-float{animation:wa-pulse 5s ease-in-out infinite;}
.wa-float:hover{animation:none;}
/* A la izquierda a propósito: en la Tienda el carrito flota a la derecha. */
@media (max-width:600px){
  .wa-float{bottom:18px;left:18px;width:52px;height:52px;}
  .wa-float svg{width:27px;height:27px;}
}

.contact-modal-why{font-size:12px;color:var(--body-text-color);text-align:center;margin-top:10px;line-height:1.5;}
.contact-modal-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;}
.contact-modal-or::before,.contact-modal-or::after{content:'';flex:1;height:1px;background:var(--border);}
.contact-modal-or span{font-size:12px;color:var(--text-muted);flex-shrink:0;}
.contact-modal-wa{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px 18px;
  border-radius:10px;border:1px solid #25D366;background:#fff;color:#128C4A;font-size:14px;font-weight:700;
  text-decoration:none;transition:all .18s ease;}
.contact-modal-wa:hover{background:#25D366;color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(37,211,102,.3);}
.contact-modal-wa svg{width:19px;height:19px;flex-shrink:0;}

/* ============ Pantalla de mantenimiento ============ */
.maint-card{background:#fff;border-radius:18px;box-shadow:0 10px 34px rgba(0,0,0,.08);padding:44px 38px;
  width:100%;max-width:480px;text-align:center;}
.maint-logo{height:40px;margin:0 auto 8px;display:block;}
.maint-sitename{font-family:var(--font-heading);font-weight:800;font-size:19px;color:var(--heading-color);margin-bottom:8px;}
.maint-icon{width:62px;height:62px;border-radius:50%;background:var(--primary-tint);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin:20px auto 20px;}
.maint-icon svg{width:28px;height:28px;}
.maint-card h1{font-family:var(--font-heading);font-size:22px;font-weight:800;color:var(--heading-color);margin-bottom:10px;}
.maint-msg{color:var(--body-text-color);line-height:1.7;font-size:14.5px;}
.maint-contact{display:flex;flex-direction:column;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border);}
.maint-item{display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;color:var(--heading-color);
  text-decoration:none;padding:10px 14px;border-radius:9px;background:var(--bg-alt);transition:background .15s ease;}
.maint-item:hover{background:var(--primary-tint);color:var(--primary);}
.maint-item-plain{cursor:default;}
.maint-item-plain:hover{background:var(--bg-alt);color:var(--heading-color);}
.maint-item svg{width:17px;height:17px;flex-shrink:0;color:var(--primary);}
/* El de WhatsApp se destaca: es la vía por la que más rápido responden. */
.maint-item-wa{background:#25D366;color:#fff;font-weight:600;}
.maint-item-wa svg{color:#fff;width:19px;height:19px;}
.maint-item-wa:hover{background:#1eb355;color:#fff;}
.maint-item-wa:hover svg{color:#fff;}
@media (max-width:520px){
  .maint-card{padding:34px 24px;}
  .maint-card h1{font-size:19px;}
}

.field-help{font-size:12px;color:var(--body-text-color);opacity:.85;margin:-4px 0 10px;line-height:1.5;}

/* ============ Texto con formato (Nosotros, páginas, blog, cursos) ============ */
/* Con un bloque solo, el título y el subtítulo van centrados — es como se
   entregaron los sitios que ya están publicados. Con varios bloques se alinean
   a la izquierda del texto, que es lo que hace que la fila se lea junto a su
   imagen y no como un titular suelto. El párrafo NO se toca: su alineación la
   decide el cliente desde el editor. */
.about-grid h2, .about-subtitle{text-align:center;}
.about-grid.about-multi h2, .about-grid.about-multi .about-subtitle{text-align:left;}
/* La alineación que se elige en el editor viaja como atributo o estilo. */
.about-text p, .page-content p, .blog-content p{margin-bottom:14px;}
.about-text p:last-child, .page-content p:last-child{margin-bottom:0;}
.about-text{color:var(--body-text-color);line-height:1.75;}
.about-text ul, .about-text ol{margin:0 0 14px 20px;}
.about-text li{margin-bottom:6px;}
.about-text a{color:var(--primary);}
.about-text img{max-width:100%;height:auto;border-radius:10px;margin:16px 0;}

/* Cita destacada: comillas grandes y el texto un poco más grande, separado. */
blockquote{position:relative;margin:22px 0;padding:6px 0 6px 54px;font-size:17px;line-height:1.7;
  color:var(--heading-color);font-style:italic;}
blockquote::before{content:'\\201C';position:absolute;left:0;top:-6px;font-size:64px;line-height:1;
  font-family:Georgia,'Times New Roman',serif;color:var(--primary);opacity:.28;}
blockquote p{margin-bottom:8px;}
blockquote p:last-child{margin-bottom:0;}
@media (max-width:600px){
  blockquote{padding-left:40px;font-size:15.5px;}
  blockquote::before{font-size:50px;}
}

/* El texto justificado deja huecos feos en pantallas angostas si las palabras
   no se pueden partir. Con esto el navegador las divide con guion y queda
   parejo también en el celular. */
[style*="text-align: justify"], [style*="text-align:justify"]{
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}

/* ============================================================
   Modo "solo blog": portada tipo portal de noticias
   ============================================================ */
.blog-only-section{padding:34px 0;}
.blog-featured-section{padding-top:28px;}

/* ---------- Bloque destacado: uno grande + dos chicos ---------- */
.blog-featured{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:stretch;}
.feat-main{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;}
.feat-main:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(17,24,39,.10);}
/* La imagen crece para ocupar el espacio sobrante: si se le fija una
   proporción, el destacado queda más bajo que las dos tarjetas laterales
   juntas y aparece un hueco vacío abajo. */
.feat-main-img{display:block;flex:1;min-height:280px;background:var(--bg-alt) center/cover no-repeat;}
.feat-main-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
.feat-main-title{font-family:var(--font-heading);font-size:23px;font-weight:800;line-height:1.25;
  color:var(--heading-color);}
.feat-main-desc{font-size:14px;color:var(--body-text-color);line-height:1.6;}

.feat-side{display:flex;flex-direction:column;gap:22px;}
.feat-small{display:flex;flex-direction:column;flex:1;background:#fff;border:1px solid var(--border);
  border-radius:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;}
.feat-small:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(17,24,39,.09);}
.feat-small-img{display:block;aspect-ratio:16/9;background:var(--bg-alt) center/cover no-repeat;}
.feat-small-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;}
.feat-small-title{font-family:var(--font-heading);font-size:15.5px;font-weight:700;line-height:1.35;
  color:var(--heading-color);}

.feat-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--primary);}
.feat-date{font-size:12px;color:var(--text-muted,#9ca3af);margin-top:auto;}

/* ---------- Artículo en modo blog ---------- */
/* La cabecera es más alta que en el modo normal: en un blog la imagen de
   portada es parte del contenido, no un adorno. Con 280px queda tan recortada
   que parece un color plano. */
.blog-only-post .page-hero{height:440px;}
.blog-only-post .page-hero-content h1{font-size:clamp(24px,2.6vw,34px);line-height:1.2;max-width:900px;margin:0 auto;}
/* En el artículo la barra lateral no es sticky: al ser más larga que una nota
   corta, quedaría pegada mientras el lector ya pasó el contenido. Y el hueco
   que deja abajo se reduce dándole a la sección un alto natural. */
.blog-only-section .blog-layout{align-items:start;}
.blog-only-post .blog-sidebar{position:static;}
/* En el artículo la lateral va más angosta: el texto es lo importante y con
   320px la columna de lectura queda innecesariamente apretada. */
.blog-only-post .blog-layout{grid-template-columns:1fr 300px;}

/* ---------- Tarjetas del listado en modo blog ---------- */
/* Los elementos internos son <span> (van dentro de un <a>), así que necesitan
   display:block para que el alto y el fondo se apliquen. */
.blog-only-section .blog-card{height:100%;}
.blog-only-section .blog-card > a{display:flex;flex-direction:column;height:100%;}
.blog-only-section .blog-card-img{display:block;height:170px;flex-shrink:0;
  background:var(--bg-alt) center/cover no-repeat;}
.blog-only-section .blog-card-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px;flex:1;}
.blog-only-section .blog-card-body h3{font-family:var(--font-heading);font-size:16px;font-weight:700;
  line-height:1.35;color:var(--heading-color);}
.blog-only-section .blog-card-body p{font-size:13.5px;color:var(--body-text-color);line-height:1.55;}
/* Las tarjetas de una fila quedan del mismo alto: si no, se ve desparejo. */
.blog-grid{align-items:stretch;}

/* ---------- Listado con barra lateral ---------- */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start;}
.blog-main{min-width:0;}
.section-head-left{text-align:left;margin-bottom:20px;}
.section-head-left h2{font-size:20px;}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.blog-grid-full{grid-column:1 / -1;}
.blog-empty{background:#fff;border:1px solid var(--border);border-radius:14px;padding:40px 24px;text-align:center;}
.blog-empty p{color:var(--body-text-color);margin-bottom:18px;}

/* ---------- Barra lateral ---------- */
.blog-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:24px;}
.sidebar-block{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.sidebar-title{font-family:var(--font-heading);font-size:12.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--heading-color);padding-bottom:9px;margin-bottom:12px;
  border-bottom:2px solid var(--heading-color);}
.sidebar-cats{list-style:none;padding:0;margin:0;}
.sidebar-cats li{border-bottom:1px solid var(--border);}
.sidebar-cats li:last-child{border-bottom:none;}
.sidebar-cats a{display:block;padding:9px 0;font-size:14px;color:var(--body-text-color);}
.sidebar-cats a:hover{color:var(--primary);}

.sidebar-post{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);}
.sidebar-post:last-child{border-bottom:none;padding-bottom:0;}
.sidebar-post-img{width:64px;height:52px;border-radius:7px;flex-shrink:0;
  background:var(--bg-alt) center/cover no-repeat;}
.sidebar-post-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sidebar-post-cat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--primary);}
.sidebar-post-title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--heading-color);}
.sidebar-post:hover .sidebar-post-title{color:var(--primary);}

/* ---------- Buscador ---------- */
.sidebar-search{display:flex;gap:0;}
.sidebar-search input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--border);
  border-right:none;border-radius:8px 0 0 8px;font-size:14px;font-family:inherit;background:#fff;}
.sidebar-search input:focus{outline:none;border-color:var(--primary);}
.sidebar-search button{flex-shrink:0;width:44px;border:1px solid var(--primary);background:var(--primary);
  color:#fff;border-radius:0 8px 8px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sidebar-search button:hover{background:var(--primary-dark);}
.sidebar-search svg{width:17px;height:17px;}

.blog-search-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.blog-search-head h1{font-size:21px;font-weight:800;color:var(--heading-color);}
.blog-search-clear{font-size:13.5px;color:var(--primary);font-weight:600;}

/* ---------- Paginación ---------- */
.blog-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px;}
.blog-pagination a{padding:9px 18px;border:1px solid var(--border);border-radius:8px;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--heading-color);transition:all .18s ease;}
.blog-pagination a:hover{border-color:var(--primary);color:var(--primary);}
.blog-page-info{font-size:13px;color:var(--text-muted,#9ca3af);}

/* ---------- Espacios de publicidad ---------- */
/* Sin fondo ni borde: el anuncio trae su propio diseño y un marco extra lo
   haría ver como parte del sitio. Solo se le da aire y se centra. */
/* Sin fondo ni borde: el contenido del espacio trae su propio diseño y un
   marco extra lo haría ver como parte del sitio. Solo aire y centrado. */
.ad-slot{margin:22px 0;text-align:center;overflow:hidden;}
.ad-slot:empty{display:none;margin:0;}
.ad-below-menu{margin:20px 0 0;}
.ad-sidebar{padding:0;margin:0;}
.ad-footer{margin-bottom:32px;}
/* La imagen del espacio nunca desborda su columna, y conserva su proporción:
   un banner de 970x90 no se deforma al entrar en un ancho menor. */
.ad-slot img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:8px;}
.ad-slot a{display:block;}

@media (max-width:980px){
  .blog-layout{grid-template-columns:1fr;}
  .blog-sidebar{position:static;}
  .blog-featured{grid-template-columns:1fr;}
  .feat-side{flex-direction:row;}
  .feat-small{flex:1;}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .feat-side{flex-direction:column;}
  .feat-main-title{font-size:19px;}
}

/* ============ Video de fondo del Slider ============ */
/* El contenido va centrado vertical, igual que en el slider de imágenes: sin
   esto queda pegado al header porque el video ocupa toda la sección. */
.hero-video-section{position:relative;overflow:hidden;display:flex;
  align-items:center;justify-content:center;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;background:#111827;}
.hero-video-fallback{display:none;position:absolute;inset:0;background:#111827 center/cover no-repeat;z-index:0;}
.hero-video-section .hero-overlay{position:absolute;inset:0;background:#000;z-index:1;}
.hero-video-section .hero-content{position:relative;z-index:2;}

/* En pantallas chicas no se carga el video: en datos móviles descargar varios
   MB de fondo es agresivo y la mayoría del tráfico llega desde el celular.
   Se muestra la imagen de respaldo en su lugar. */
@media (max-width:820px){
  .hero-video{display:none;}
  .hero-video-fallback{display:block;}
}
/* Y tampoco se reproduce si la persona pidió reducir el movimiento. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none;}
  .hero-video-fallback{display:block;}
}

/* ---------- Botón de consulta (catálogo sin carrito) ---------- */
/* Mismo tamaño que el botón "+" del carrito, para que la tarjeta se vea igual
   con carrito o sin él. */
/* Botón de consulta del catálogo sin carrito. Antes era un círculo con un
   icono de chat, que no se leía como una acción de compra: ahora es un teléfono
   relleno del color principal. Va sin texto a propósito — se repetiría en cada
   tarjeta y con categorías de nombre largo no entraba en la línea. El texto
   completo aparece en el botón del modal. */
.shop-ask-btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:9px;border:1px solid var(--primary);background:var(--primary);color:#fff;
  cursor:pointer;flex-shrink:0;transition:background .18s ease,border-color .18s ease;}
.shop-ask-btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.shop-ask-btn svg{width:15px;height:15px;flex-shrink:0;}
/* El pie lleva la categoría y el botón en una sola línea. Sin nowrap, una
   categoría de nombre largo bajaba el botón a otro renglón y las tarjetas de
   la fila quedaban de alturas distintas. La etiqueta se recorta con puntos
   suspensivos y el botón nunca se encoge. */
.shop-card-footer{gap:8px;flex-wrap:nowrap;}
.shop-card-footer .tag{margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shop-modal-contact{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;}
.shop-modal-contact svg{width:17px;height:17px;}

/* ============================================================
   Modo inmobiliaria: listado, filtros y ficha de propiedad
   ============================================================ */

/* ---------- Filtros del buscador ---------- */
.realty-filters{background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;}
.realty-filter-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}
.realty-filter-row + .realty-filter-row{margin-top:14px;}
.realty-filter{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px;}
.realty-filter-sm{min-width:130px;}
.realty-filter label{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted,#9ca3af);}
.realty-filter select,.realty-filter input{width:100%;padding:9px 11px;border:1px solid var(--border);
  border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--heading-color);}
.realty-filter select:focus,.realty-filter input:focus{outline:none;border-color:var(--primary);}
.realty-check{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--body-text-color);cursor:pointer;padding-bottom:9px;flex-shrink:0;}
.realty-check input{width:auto;}
.realty-filter-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.realty-btn{padding:10px 24px;font-size:14px;}
.realty-clear{font-size:13px;color:var(--primary);}
.realty-count{font-size:13.5px;color:var(--text-muted,#9ca3af);margin-bottom:18px;}

/* ---------- Tarjeta de propiedad ---------- */
.realty-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:14px;overflow:hidden;text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease;}
.realty-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(17,24,39,.11);}
.realty-card-img{display:block;position:relative;aspect-ratio:4/3;
  background:var(--bg-alt) center/cover no-repeat;}
.realty-badge{position:absolute;top:12px;left:12px;background:var(--primary);color:#fff;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:100px;letter-spacing:.02em;}
.realty-card-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px;flex:1;}
.realty-price{font-family:var(--font-heading);font-size:20px;font-weight:800;color:var(--primary);}
.realty-card-title{font-family:var(--font-heading);font-size:15.5px;font-weight:700;
  line-height:1.35;color:var(--heading-color);}
.realty-card-loc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--body-text-color);}
.realty-card-loc svg{width:14px;height:14px;flex-shrink:0;opacity:.7;}
.realty-card-feats{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:12px;
  border-top:1px solid var(--border);}
.realty-feat{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--body-text-color);}
.realty-feat svg{width:15px;height:15px;flex-shrink:0;opacity:.65;}
/* En el listado personalizado los campos no tienen ícono: se muestra el valor
   con su etiqueta al lado, en tono más suave. */
.realty-feat-label{color:var(--text-muted,#9ca3af);margin-left:4px;}

/* ---------- Ficha de la propiedad ---------- */
.prop-section{padding:30px 0 50px;}
.prop-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--primary);margin-bottom:22px;}
.prop-back svg{width:15px;height:15px;}
.prop-layout{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;}
.prop-main{min-width:0;}

.prop-gallery{margin-bottom:26px;}
/* center/cover — la foto llena el recuadro redondeado sin deformarse, sea
   vertical u horizontal; se recorta lo que sobra desde el centro. */
.prop-gallery-main{aspect-ratio:16/10;border-radius:14px;
  background:var(--bg-alt) center/cover no-repeat;margin-bottom:10px;}
.prop-thumbs{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;}
.prop-thumb{width:88px;height:64px;border-radius:9px;flex-shrink:0;border:2px solid transparent;
  background:var(--bg-alt) center/cover no-repeat;cursor:pointer;padding:0;
  transition:border-color .18s ease,opacity .18s ease;opacity:.72;}
.prop-thumb:hover{opacity:1;}
.prop-thumb.active{border-color:var(--primary);opacity:1;}

.prop-head{margin-bottom:22px;}
.prop-tags{display:flex;gap:8px;margin-bottom:12px;}
.prop-tag{font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;
  background:var(--bg-alt);color:var(--body-text-color);}
.prop-tag-primary{background:var(--primary);color:#fff;}
.prop-head h1{font-family:var(--font-heading);font-size:clamp(22px,2.6vw,30px);
  font-weight:800;line-height:1.25;color:var(--heading-color);margin-bottom:10px;}
.prop-location{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--body-text-color);}
.prop-location svg{width:16px;height:16px;flex-shrink:0;opacity:.7;}

.prop-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:12px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:26px;}
.prop-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.prop-feature svg{width:22px;height:22px;color:var(--primary);margin-bottom:2px;}
.prop-feature-value{font-family:var(--font-heading);font-size:17px;font-weight:800;color:var(--heading-color);}
.prop-feature-label{font-size:12px;color:var(--text-muted,#9ca3af);}

.prop-desc,.prop-extras,.prop-map-block{margin-bottom:26px;}
.prop-desc h2,.prop-extras h2,.prop-map-block h2{font-family:var(--font-heading);font-size:17px;
  font-weight:700;color:var(--heading-color);margin-bottom:12px;}
.prop-desc{font-size:14.5px;line-height:1.75;color:var(--body-text-color);}
/* Grid con gap horizontal: sin el gap, dos características en la misma fila
   quedan pegadas y se lee "Sí, climatizadaExpensas". */
.prop-extras dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  column-gap:28px;row-gap:0;}
.prop-extra{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border);}
.prop-extra dt{font-size:13.5px;color:var(--body-text-color);}
.prop-extra dd{font-size:13.5px;font-weight:700;color:var(--heading-color);text-align:right;}
.prop-map{border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.prop-map iframe{width:100%;height:320px;border:0;display:block;}

/* ---------- Barra lateral de contacto ---------- */
.prop-sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px;}
.prop-cta{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;}
.prop-price{font-family:var(--font-heading);font-size:27px;font-weight:800;
  color:var(--primary);margin-bottom:4px;}
.prop-price-note{font-size:12px;color:var(--text-muted,#9ca3af);margin-bottom:14px;}
.prop-cta-text{font-size:13.5px;color:var(--body-text-color);line-height:1.6;margin:14px 0 16px;}
.prop-cta-btn{width:100%;justify-content:center;}
.prop-wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:10px;padding:12px;border-radius:10px;background:#25d366;color:#fff;
  font-size:14px;font-weight:700;text-decoration:none;transition:background .18s ease;}
.prop-wa-btn:hover{background:#1da851;color:#fff;}
.prop-wa-btn svg{width:19px;height:19px;}

.prop-others{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;}
.prop-others h3{font-family:var(--font-heading);font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--heading-color);
  padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--heading-color);}
/* Foto grande arriba y los datos abajo: la imagen es lo que decide si el
   visitante hace clic, así que ocupa el ancho completo de la tarjeta. */
.prop-other{display:block;border-radius:11px;overflow:hidden;border:1px solid var(--border);
  margin-bottom:14px;transition:transform .2s ease,box-shadow .2s ease;}
.prop-other:last-child{margin-bottom:0;}
.prop-other:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(17,24,39,.10);}
.prop-other-img{display:block;position:relative;width:100%;aspect-ratio:4/3;
  background:var(--bg-alt) center/cover no-repeat;}
.prop-other-badge{position:absolute;top:9px;left:9px;background:var(--primary);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:100px;}
.prop-other-info{display:flex;flex-direction:column;gap:4px;padding:12px 13px 13px;}
.prop-other-price{font-family:var(--font-heading);font-size:16px;font-weight:800;color:var(--primary);}
.prop-other-name{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--heading-color);}
.prop-other-loc{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted,#9ca3af);}
.prop-other-loc svg{width:12px;height:12px;flex-shrink:0;}
.prop-other:hover .prop-other-name{color:var(--primary);}

@media (max-width:980px){
  .prop-layout{grid-template-columns:1fr;}
  .prop-sidebar{position:static;}
}
@media (max-width:600px){
  .realty-filter,.realty-filter-sm{min-width:100%;}
  .realty-filter-actions{width:100%;}
  .realty-btn{flex:1;}
  .prop-map iframe{height:240px;}
}

/* ============ Portal privado: descargas ============ */
.academia-section-title{font-family:var(--font-heading);font-size:17px;font-weight:700;
  color:var(--heading-color);margin-bottom:16px;}
.academia-download-list{display:flex;flex-direction:column;gap:12px;}
.academia-download{display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.academia-download-icon{width:40px;height:40px;border-radius:9px;flex-shrink:0;
  background:var(--bg-alt);display:flex;align-items:center;justify-content:center;color:var(--primary);}
.academia-download-icon svg{width:19px;height:19px;}
.academia-download-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.academia-download-name{font-weight:700;font-size:14.5px;color:var(--heading-color);}
.academia-download-file{font-size:12.5px;color:var(--text-muted,#9ca3af);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.academia-download-btn{display:flex;align-items:center;gap:7px;flex-shrink:0;
  background:var(--primary);color:#fff;border-radius:9px;padding:10px 16px;
  font-size:13.5px;font-weight:700;text-decoration:none;transition:background .18s ease;}
.academia-download-btn:hover{background:var(--primary-dark);color:#fff;}
.academia-download-btn svg{width:15px;height:15px;}
.academia-download-hint{font-size:12.5px;color:var(--text-muted,#9ca3af);margin-top:14px;}
@media (max-width:560px){
  .academia-download{flex-wrap:wrap;}
  .academia-download-btn{width:100%;justify-content:center;}
}

/* ============ Tarjeta clickeable (servicios y características) ============ */
/* Cuando la tarjeta tiene enlace se convierte en <a>. El diseño no cambia:
   solo aparece el cursor de mano, para que se note que se puede hacer clic. */
.tile.is-linked{cursor:pointer;text-decoration:none;display:block;}
/* Los textos conservan su color: si heredaran el del enlace, el título y el
   párrafo se pondrían azules y la tarjeta se vería distinta a las demás. */
.tile.is-linked h3{color:var(--heading-color);}
.tile.is-linked p{color:var(--body-text-color);}
/* Al pasar el mouse, el título toma el color principal: es la señal de que
   lleva a algún lado, sin alterar la tarjeta en reposo. */
.tile.is-linked:hover h3{color:var(--primary);}

/* ============ Página de error 404 ============ */
.error-section{padding:80px 0 100px;}
.error-wrap{text-align:center;max-width:520px;margin:0 auto;}
.error-code{font-family:var(--font-heading);font-size:84px;font-weight:800;line-height:1;color:var(--primary);opacity:.18;letter-spacing:-.02em;}
.error-wrap h1{font-size:26px;font-weight:800;color:var(--heading-color);margin:8px 0 12px;}
.error-wrap p{color:var(--body-text-color);line-height:1.7;margin-bottom:28px;}
.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.error-actions .btn-secondary{background:#fff;border:1px solid var(--border);color:var(--heading-color);cursor:pointer;font-family:inherit;}
.error-actions .btn-secondary:hover{background:var(--bg-alt);}

@media (max-width:600px){
  .error-section{padding:56px 0 72px;}
  .error-code{font-size:64px;}
  .error-wrap h1{font-size:21px;}
}

/* ============ Academia ============ */
.academia-login-card{background:#fff;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.08);padding:38px 34px;width:100%;max-width:380px;}
.academia-login-logo{height:34px;display:block;margin:0 auto 18px;}
.academia-login-logo-text{font-weight:800;font-size:18px;text-align:center;margin-bottom:18px;color:var(--heading-color);}
.academia-login-card h1{font-size:20px;font-weight:800;color:var(--heading-color);text-align:center;margin-bottom:6px;}
.academia-login-sub{font-size:13px;color:var(--body-text-color);text-align:center;margin-bottom:22px;}

.academia-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#fff;border-bottom:1px solid var(--border);}
.academia-topbar-logo{display:flex;align-items:center;font-weight:800;color:var(--heading-color);text-decoration:none;}
.academia-topbar-logo img{height:28px;}
.academia-topbar-right{display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--body-text-color);}
.academia-topbar-right a{color:var(--primary);font-weight:600;}

.academia-wrap{max-width:1100px;margin:0 auto;padding:32px 24px;}
.academia-wrap h1{font-size:24px;font-weight:800;color:var(--heading-color);margin-bottom:22px;}

.academia-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
/* Cada celda agrupa la tarjeta del curso y su botón de certificado. */
.academia-course-cell{display:flex;flex-direction:column;gap:10px;}
.academia-course-cell .academia-course-card{flex:1;}
/* El botón del certificado solo aparece al completar el curso: se destaca en
   verde para que se distinga de las acciones normales. */
.academia-cert-btn{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:10px;background:#059669;color:#fff;font-size:13.5px;
  font-weight:700;text-decoration:none;transition:background .18s ease,transform .18s ease;}
.academia-cert-btn:hover{background:#047857;transform:translateY(-2px);color:#fff;}
.academia-cert-btn svg{width:16px;height:16px;flex-shrink:0;}

.academia-course-card{display:block;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:box-shadow .15s ease;}
.academia-course-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);}
.academia-course-img{aspect-ratio:16/9;background:#e5e7eb center/cover no-repeat;}
.academia-course-body{padding:18px;}
.academia-course-body .tag{margin-bottom:8px;}
.academia-course-body h3{font-size:15.5px;font-weight:700;color:var(--heading-color);margin-bottom:12px;}
.academia-progress-bar{height:6px;background:var(--border);border-radius:100px;overflow:hidden;margin-bottom:8px;}
.academia-progress-fill{height:100%;background:var(--primary);}
.academia-progress-label{font-size:12px;color:var(--text-muted);}

.academia-player{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 61px);}
.academia-sidebar{background:#fff;border-right:1px solid var(--border);padding:20px;overflow-y:auto;}
.academia-sidebar-back{display:block;font-size:13px;font-weight:600;color:var(--body-text-color);margin-bottom:14px;}
.academia-sidebar h2{font-size:15px;font-weight:800;color:var(--heading-color);margin-bottom:16px;}
.academia-sidebar-chapter{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin:16px 0 6px;}
.academia-sidebar-lesson{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13.5px;color:var(--body-text-color);text-decoration:none;}
.academia-sidebar-lesson:hover{background:var(--bg-alt);}
.academia-sidebar-lesson.active{background:var(--primary-tint);color:var(--primary);font-weight:700;}
.academia-sidebar-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;color:#fff;}
.academia-sidebar-lesson.viewed .academia-sidebar-check{background:var(--success);border-color:var(--success);}

.academia-main{padding:32px 40px;max-width:800px;}
.academia-main h1{font-size:21px;font-weight:800;color:var(--heading-color);margin-bottom:18px;}
.academia-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;margin-bottom:20px;}
.academia-video-wrap iframe{width:100%;height:100%;border:0;position:absolute;inset:0;}
.academia-lesson-description{color:var(--body-text-color);line-height:1.7;font-size:14.5px;margin-bottom:24px;}
.academia-lesson-description p{margin-bottom:12px;}
.academia-lesson-description ul,.academia-lesson-description ol{margin:0 0 12px 20px;}
.academia-lesson-description a{color:var(--primary);}
.academia-lesson-description img{max-width:100%;height:auto;border-radius:10px;display:block;margin:16px 0;}
.academia-player-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--border);}
.academia-course-done{font-weight:700;color:var(--success);}

.academia-jump-warning{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:24px;}
.academia-jump-warning p{color:#92400e;font-size:14px;margin-bottom:16px;}
.academia-jump-actions{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:800px){
  .academia-player{grid-template-columns:1fr;}
  .academia-sidebar{border-right:none;border-bottom:1px solid var(--border);}
  .academia-main{padding:24px 20px;}
}
.footer-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--footer-icon-bg);color:var(--footer-text);transition:background .12s ease,color .12s ease;}
.footer-social a:hover{background:var(--primary);color:#fff;}
.footer-social a svg{width:17px;height:17px;}

@media (max-width:820px){
  .grid-3{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  /* En el celular no hay lados: todos los bloques quedan imagen arriba y texto
     abajo, y la alternancia se desactiva. */
  .about-grid.is-flipped{grid-template-columns:1fr;}
  .about-grid.is-flipped .about-img{order:1;}
  .about-grid.is-flipped .about-body{order:2;}
  .about-grid-next{margin-top:48px;}
  .about-cta{text-align:center;}
  .site-nav > a:not(.btn-nav), .site-nav .nav-dropdown{display:none;}
  .site-nav{gap:10px;}
  .nav-burger{display:flex;}
  .hero-content h1{font-size:28px;}
}

.prop-map-link{margin:10px 0 0;font-size:14px;}
.prop-map-link a{color:var(--primary);text-decoration:none;}
.prop-map-link a:hover{text-decoration:underline;}

/* ============================================================
   Variantes de diseño del inicio
   Las elige el cliente en Configuración y salen como clases del <body>.
   Todo es CSS: el HTML de las secciones no cambia, así que agregar una
   variante no puede romper el marcado que ya está publicado.
   ============================================================ */

/* -- Header: dónde van el logo y el menú -------------------- */
/* Logo arriba y menú debajo, los dos centrados. */
.lay-h-top .bar{flex-direction:column;height:auto;padding:14px 0;gap:10px;justify-content:center;}
.lay-h-top .site-nav{justify-content:center;flex-wrap:wrap;}
/* Menú centrado, logo a la izquierda y el botón de contacto a la derecha. */
.lay-h-navcenter .site-nav{flex:1;justify-content:center;}
/* Logo a la derecha, menú a la izquierda. Solo se invierte la barra: el orden
   interno del menú se mantiene, para que siga leyéndose Home primero. */
.lay-h-right .bar{flex-direction:row-reverse;}
/* El botón hamburguesa se queda al final en móvil, pase lo que pase arriba. */
@media (max-width:900px){
  .lay-h-top .bar, .lay-h-right .bar{flex-direction:row;height:64px;padding:0;}
}

/* -- Fotos del equipo --------------------------------------- */
.lay-team-square .team-img{border-radius:12px;}
.lay-team-card .team-card{border:1px solid var(--primary);border-radius:14px;padding:20px 16px;}
.lay-team-card .team-img{border-radius:10px;width:100%;height:150px;margin-bottom:14px;}

/* -- Estilo de los bloques ---------------------------------- */
/* Recto, con un borde fino del color principal del sitio. */
.lay-blocks-sharp .tile,
.lay-blocks-sharp .plan-card,
.lay-blocks-sharp .blog-card,
.lay-blocks-sharp .portfolio-card{border-radius:2px;border:1px solid var(--primary);}
.lay-blocks-sharp .tile-icon,
.lay-blocks-sharp .portfolio-img,
.lay-blocks-sharp .blog-card-img{border-radius:2px;}
/* Con sombra suave y sin borde. */
.lay-blocks-shadow .tile,
.lay-blocks-shadow .plan-card,
.lay-blocks-shadow .blog-card,
.lay-blocks-shadow .portfolio-card{border-color:transparent;box-shadow:0 6px 20px rgba(17,24,39,.09);}
/* El plan destacado conserva su borde: es lo que lo distingue de los otros. */
.lay-blocks-shadow .plan-card.is-featured,
.lay-blocks-sharp .plan-card.is-featured{border-color:var(--primary);}

/* -- Aire entre secciones ----------------------------------- */
.lay-space-roomy .section{padding:112px 0;}
.lay-space-roomy .section-head{margin-bottom:44px;}
@media (max-width:700px){
  .lay-space-roomy .section{padding:64px 0;}
}