/* =========================================================
   PLANTILLA EXPERTOS V22 — V10 TIPOGRAFÍA CORREGIDA
   Base visual premium reutilizable para marcas.

   CAMBIOS V10:
   - Exo 2 aplicada de verdad con cache-busting en HTML.
   - Pesos reales y legibles: normal 400/500, negrita 700.
   - Sin 850/900/950 para evitar negritas exageradas.
   - Botón subir arriba sustituido por icono SVG limpio.
   - CSS en español, ordenado y fácil de tocar.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap');

/* =========================================================
   01. VARIABLES RÁPIDAS
   Cambia aquí colores, fuente, tamaños, radios y sombras.
   ========================================================= */
:root{
  /* Fondos */
  --fondo-web:#f3f5f8;
  --fondo-degradado:linear-gradient(180deg,#ffffff 0%,#f6f7f9 48%,#e9edf3 100%);
  --fondo-bloque:#ffffff;
  --fondo-bloque-suave:#f7f8fa;

  /* Texto */
  --texto-principal:#0b0d10;
  --texto-secundario:#1f2937;
  --texto-suave:#4b5563;
  --texto-blanco:#ffffff;

  /* Cabecera */
  --cabecera-fondo:#030303;
  --cabecera-linea:#242424;
  --menu-texto:#ffffff;

  /* Marca / Amazon */
  --oro-expertos:#d4a000;
  --amazon-oro:#ffbf35;
  --amazon-oro-oscuro:#d99000;
  --amazon-texto:#111111;

  /* Cajas */
  --borde:#d9dee7;
  --borde-fuerte:#bac3cf;
  --radio-grande:30px;
  --radio-medio:18px;
  --sombra-suave:0 18px 44px rgba(15,23,42,.09);
  --sombra-hover:0 24px 64px rgba(15,23,42,.15);

  /* Medidas */
  --ancho-web:1180px;
  --tamano-base:18px;
  --altura-menu:78px;
  --padding-seccion:clamp(2.8rem,5vw,5.2rem);
  --padding-tarjeta:1.55rem;

  /* Tipografía */
  --fuente-texto:'Exo 2','Segoe UI',Arial,sans-serif;
  --fuente-titulos:'Exo 2','Segoe UI',Arial,sans-serif;

  /* Pesos de fuente — NO subir a 900 */
  --peso-normal:400;
  --peso-texto:500;
  --peso-menu:600;
  --peso-negrita:700;
  --peso-titulo:700;
}

/* =========================================================
   02. BASE Y TIPOGRAFÍA
   ========================================================= */
*{box-sizing:border-box;}
html{font-size:var(--tamano-base);scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--fuente-texto);
  background:var(--fondo-web);
  color:var(--texto-principal);
  font-size:1.04rem;
  line-height:1.72;
  text-align:center;
  font-weight:var(--peso-normal);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:var(--fuente-texto);}
img{max-width:100%;height:auto;}
a{color:inherit;}
strong,b{
  font-family:var(--fuente-texto);
  font-weight:var(--peso-negrita);
  color:#050505;
  letter-spacing:0;
}
.container{width:min(var(--ancho-web),92vw);margin-inline:auto;}
.center{text-align:center;}
.skip-link{position:absolute;left:-999px;top:auto;}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.75rem 1rem;border-radius:12px;z-index:999;}

/* =========================================================
   03. CABECERA NEGRA Y MENÚ
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--cabecera-fondo);
  border-bottom:1px solid var(--cabecera-linea);
  box-shadow:0 10px 34px rgba(0,0,0,.24);
}
.header-inner{
  min-height:var(--altura-menu);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.1rem;
}
.brand-zone{display:flex;align-items:center;justify-content:flex-start;gap:.85rem;min-width:0;}
.brand{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;min-width:0;}
.brand img{display:block;max-width:190px;height:auto;}
.expertos-mini{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(212,160,0,.45);background:rgba(212,160,0,.08);flex:0 0 auto;}
.expertos-mini img{width:29px;height:29px;display:block;object-fit:contain;}
.nav-toggle{display:none;}
.nav-button{display:none;color:#fff;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:.72rem 1.1rem;font-size:1rem;font-weight:var(--peso-menu);line-height:1;cursor:pointer;user-select:none;text-align:center;}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:.18rem;}
.nav a{color:var(--menu-texto);text-decoration:none;font-weight:var(--peso-menu);font-size:.98rem;padding:.62rem .82rem;border-radius:999px;text-align:center;opacity:.95;}
.nav a:hover,.nav a.is-active{background:rgba(255,255,255,.14);opacity:1;}

/* =========================================================
   04. PORTADA / HERO PREMIUM
   ========================================================= */
.hero{
  background:radial-gradient(circle at 78% 16%,rgba(255,191,53,.18),transparent 26%),radial-gradient(circle at 12% 10%,rgba(15,23,42,.08),transparent 26%),var(--fondo-degradado);
  color:var(--texto-principal);
  padding:clamp(3.2rem,7vw,6.3rem) 0;
  text-align:center;
  border-bottom:1px solid var(--borde);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;max-width:1040px;margin-inline:auto;text-align:center;}
.kicker{font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:#141820;font-weight:var(--peso-negrita);margin:0 0 .75rem;text-align:center;}
.hero h1{font-family:var(--fuente-titulos);font-size:clamp(2.38rem,5.5vw,4.85rem);line-height:1.04;margin:0 auto 1rem;max-width:1000px;text-align:center;letter-spacing:-.035em;color:#050505;font-weight:var(--peso-titulo);}
.lead{font-size:clamp(1.16rem,2.2vw,1.42rem);max-width:900px;color:#172033;margin:0 auto;font-weight:var(--peso-texto);text-align:center;}
.hero-media{max-width:640px;margin-inline:auto;background:rgba(255,255,255,.88);border:1px solid #ffffff;border-radius:34px;padding:1rem;box-shadow:var(--sombra-suave);}
.hero-media img,.visual img,.product-card img{display:block;width:100%;height:auto;border-radius:24px;}
.caption{display:none;}

/* =========================================================
   05. BOTONES AMAZON DORADOS
   ========================================================= */
.actions,.button-grid{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.35rem;justify-content:center;align-items:center;text-align:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(135deg,var(--amazon-oro),var(--amazon-oro-oscuro));color:var(--amazon-texto);text-decoration:none;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:1rem 1.38rem;font-size:1.03rem;font-weight:var(--peso-negrita);box-shadow:0 14px 30px rgba(217,144,0,.25);transition:.18s ease;text-align:center;}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(217,144,0,.34);}
.btn.secondary{background:#111;color:#fff;border-color:#111;box-shadow:0 14px 30px rgba(0,0,0,.18);}
.btn.dark{background:#111;color:#fff;}
.btn.slim{padding:.82rem 1.04rem;font-size:.96rem;}
.btn.full{width:100%;}

/* =========================================================
   06. SECCIONES Y TEXTOS
   ========================================================= */
.section{padding:var(--padding-seccion) 0;text-align:center;}
.section.compact{padding:clamp(1.8rem,4vw,3.2rem) 0;}
.section.soft{background:linear-gradient(180deg,#fafbfc 0%,#eef1f5 100%);}
.section h2{font-family:var(--fuente-titulos);font-size:clamp(1.95rem,3.35vw,2.9rem);line-height:1.14;margin:0 auto .9rem;text-align:center;max-width:980px;letter-spacing:-.025em;color:#050505;font-weight:var(--peso-titulo);}
.section-intro{color:var(--texto-secundario);max-width:900px;margin:0 auto 1.6rem;text-align:center;font-size:1.13rem;font-weight:var(--peso-texto);}
p,.card p,.product-card p,.feature-card p,.top-box p,.faq-list p{font-size:1.06rem;line-height:1.72;margin-left:auto;margin-right:auto;text-align:center;color:var(--texto-secundario);font-weight:var(--peso-normal);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem;}
.grid-3,.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem;}

/* =========================================================
   07. TARJETAS Y MODELOS
   ========================================================= */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:1.35rem;align-items:stretch;}
.model-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.25rem;}
.card,.product-card,.feature-card,.top-box{background:var(--fondo-bloque);border:1px solid var(--borde);border-radius:var(--radio-grande);box-shadow:var(--sombra-suave);padding:var(--padding-tarjeta);text-align:center;}
.card,.product-card,.feature-card,.top-box,.faq-list details{display:flex;flex-direction:column;align-items:center;}
.product-card{justify-content:space-between;min-height:100%;padding:1.55rem;transition:.18s ease;}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-hover);border-color:var(--borde-fuerte);}
.product-card .media{width:100%;max-width:315px;margin:0 auto .95rem;background:#f8fafc;border-radius:24px;overflow:hidden;}
.card h3,.product-card h3,.feature-card h3{font-family:var(--fuente-titulos);margin:.15rem auto .5rem;font-size:1.35rem;line-height:1.2;text-align:center;color:#050505;letter-spacing:-.015em;font-weight:var(--peso-titulo);}
.card p,.product-card p,.feature-card p{margin:.25rem auto .9rem;color:var(--texto-secundario);max-width:52rem;}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.78rem;margin:1.5rem auto 0;max-width:920px;}
.trust-item{background:rgba(255,255,255,.84);border:1px solid #fff;border-radius:18px;padding:1rem;font-weight:var(--peso-negrita);color:#111;font-size:1.02rem;text-align:center;box-shadow:0 10px 26px rgba(17,24,39,.06);}

/* =========================================================
   08. ETIQUETAS Y VARIANTES
   ========================================================= */
.tag-list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.85rem 0;text-align:center;}
.tag{font-size:.9rem;font-weight:var(--peso-menu);color:#111;background:#f0f2f5;border:1px solid #d7dde6;border-radius:999px;padding:.42rem .78rem;text-align:center;}
.mini-note{font-size:.92rem;color:var(--texto-suave);text-align:center;}
.variant-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin:1rem auto 1.25rem;}
.variant-pill{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:.82rem;text-align:center;font-weight:var(--peso-menu);font-size:1.02rem;box-shadow:0 8px 24px rgba(15,23,42,.05);}
.dot{width:28px;height:28px;border-radius:999px;display:block;margin:0 auto .42rem;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.15);}

/* =========================================================
   09. TABLAS Y COMPARATIVAS
   ========================================================= */
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--borde);border-radius:var(--radio-grande);box-shadow:var(--sombra-suave);max-width:1040px;margin-inline:auto;}
table{width:100%;border-collapse:collapse;min-width:690px;}
th,td{padding:1rem;border-bottom:1px solid var(--borde);text-align:center;vertical-align:top;font-size:1rem;color:#111827;}
th{background:#f2f4f7;font-weight:var(--peso-negrita);color:#050505;font-family:var(--fuente-titulos);}
tr:last-child td{border-bottom:0;}
td em,.table-wrap td:last-child{font-style:italic;color:#1f2937;}
.cta-band{background:linear-gradient(135deg,#111,#262a31);color:#fff;border-radius:32px;padding:clamp(1.5rem,4vw,2.4rem);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;text-align:center;box-shadow:var(--sombra-suave);}
.cta-band strong{color:#fff;}
.cta-band p{color:#f1f5f9;margin:.2rem auto 0;text-align:center;}

/* =========================================================
   10. FAQ Y LEGALES
   ========================================================= */
.breadcrumbs{font-size:.9rem;color:#475569;margin-bottom:1rem;text-align:center;}
.breadcrumbs a{color:#111;text-decoration:underline;text-underline-offset:4px;}
.legal-page{padding:3rem 0;text-align:center;}
.legal-page .top-box,.legal-page h1{text-align:center;}
.faq-list{display:grid;gap:.78rem;}
.faq-list details{background:#fff;border:1px solid var(--borde);border-radius:18px;padding:1rem;box-shadow:0 8px 24px rgba(15,23,42,.05);text-align:center;}
.faq-list summary{font-weight:var(--peso-negrita);cursor:pointer;text-align:center;font-size:1.08rem;color:#050505;font-family:var(--fuente-titulos);}
.faq-list p{color:var(--texto-secundario);}
.editable-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:1rem;text-align:center;color:#7c2d12;font-weight:var(--peso-negrita);margin-top:1rem;}

/* =========================================================
   11. FOOTER OSCURO CON BACKLINK
   ========================================================= */
.site-footer{background:#030303;color:#f5f7fb;padding:2.4rem 0;text-align:center;border-top:1px solid #242424;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;justify-items:center;text-align:center;}
.expertos-footer-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:.15rem;}
.expertos-footer-link img{width:min(360px,82vw);height:auto;display:block;}
.site-footer p,.site-footer .small{color:#dbe4ef;text-align:center;max-width:860px;margin-left:auto;margin-right:auto;}
.site-footer strong{color:#ffffff;background:none;font-weight:var(--peso-negrita);}
.footer-links{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;text-align:center;}
.footer-links a{color:#ffffff;text-decoration:none;font-size:1rem;font-weight:var(--peso-menu);text-align:center;}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--oro-expertos);}
.small{font-size:.98rem;color:#dbe4ef;text-align:center;max-width:840px;margin-left:auto;margin-right:auto;}

/* =========================================================
   12. BOTÓN SUBIR ARRIBA — ICONO SVG LIMPIO
   ========================================================= */
.back-to-top{position:fixed;right:1.1rem;bottom:1.1rem;width:52px;height:52px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--amazon-oro),var(--amazon-oro-oscuro));color:#111;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 42px rgba(0,0,0,.24);cursor:pointer;z-index:80;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .2s ease, transform .2s ease;}
.back-to-top svg{width:24px;height:24px;display:block;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{transform:translateY(-3px);}

/* =========================================================
   13. AVISO DE COOKIES
   ========================================================= */
.cookie-banner{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);width:min(980px,calc(100% - 2rem));background:#ffffff;color:#111827;border:1px solid var(--borde-fuerte);border-radius:24px;box-shadow:0 26px 80px rgba(0,0,0,.24);padding:1rem;z-index:90;display:none;text-align:center;}
.cookie-banner.is-visible{display:block;}
.cookie-inner{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;}
.cookie-text{text-align:left;}
.cookie-text strong{display:block;margin-bottom:.15rem;font-size:1.05rem;font-weight:var(--peso-negrita);}
.cookie-text p{margin:.1rem 0 0;text-align:left;font-size:.96rem;line-height:1.55;color:#273244;font-weight:var(--peso-normal);}
.cookie-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;}
.cookie-btn{border:1px solid #111;border-radius:999px;padding:.72rem 1rem;background:#111;color:#fff;font-weight:var(--peso-menu);cursor:pointer;font-family:var(--fuente-titulos);}
.cookie-btn.accept{background:linear-gradient(135deg,var(--amazon-oro),var(--amazon-oro-oscuro));color:#111;border-color:rgba(0,0,0,.18);}
.cookie-btn.light{background:#fff;color:#111;border-color:#cbd5e1;}
.cookie-link{display:inline-flex;align-items:center;color:#111;text-decoration:underline;text-underline-offset:4px;font-weight:var(--peso-menu);}

/* =========================================================
   14. RESPONSIVE TABLET
   ========================================================= */
@media (max-width:960px){
  html{font-size:17px;}
  .hero-grid,.grid-2,.model-row,.footer-grid{grid-template-columns:1fr;}
  .grid-3,.product-grid{grid-template-columns:repeat(2,1fr);}
  .variant-strip{grid-template-columns:repeat(3,1fr);}
  .cta-band{grid-template-columns:1fr;text-align:center;}
  .footer-links{justify-content:center;}
  .hero-media{max-width:540px;}
  .product-card .media{max-width:295px;}
}

/* =========================================================
   15. RESPONSIVE MÓVIL
   ========================================================= */
@media (max-width:760px){
  html{font-size:17px;}
  .header-inner{min-height:72px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:.55rem 0;gap:.75rem;}
  .brand-zone{gap:.58rem;flex:1 1 auto;min-width:0;}
  .brand{justify-content:flex-start;min-width:0;}
  .brand img{max-width:136px;margin:0;}
  .expertos-mini{width:36px;height:36px;}
  .expertos-mini img{width:25px;height:25px;}
  .nav-button{display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;padding:.78rem 1.05rem;min-width:104px;text-align:center;flex:0 0 auto;font-weight:var(--peso-menu);}
  .nav{position:absolute;right:4vw;left:4vw;top:100%;display:none;flex-direction:column;align-items:stretch;justify-content:center;background:#030303;border:1px solid rgba(255,255,255,.20);border-radius:20px;padding:1rem;box-shadow:0 24px 50px rgba(0,0,0,.32);}
  .nav a{width:100%;font-size:1.14rem;font-weight:var(--peso-menu);text-align:center;padding:1.05rem .9rem;}
  .nav-toggle:checked~.nav{display:flex;}
  .hero{padding:2.75rem 0;}
  .hero h1{font-size:2.23rem;}
  .lead{font-size:1.15rem;}
  .section{padding:2.45rem 0;}
  .product-grid,.grid-3,.cards{grid-template-columns:1fr;max-width:470px;margin-left:auto;margin-right:auto;}
  .variant-strip{grid-template-columns:repeat(2,minmax(0,1fr));max-width:430px;margin-left:auto;margin-right:auto;}
  .btn{width:100%;max-width:390px;margin-left:auto;margin-right:auto;}
  table{min-width:620px;}
  .cookie-inner{grid-template-columns:1fr;}
  .cookie-text,.cookie-text p{text-align:center;}
  .cookie-actions{display:grid;grid-template-columns:1fr;}
  .cookie-btn,.cookie-link{width:100%;justify-content:center;text-align:center;}
  .back-to-top{right:.9rem;bottom:.9rem;width:46px;height:46px;}
  .back-to-top svg{width:22px;height:22px;}
  .cookie-banner{bottom:.8rem;width:calc(100% - 1rem);border-radius:20px;}
}

@media (max-width:430px){
  html{font-size:16.5px;}
  .variant-strip{grid-template-columns:1fr;}
  .hero h1{font-size:2.02rem;}
  .brand img{max-width:122px;}
  .expertos-mini{width:32px;height:32px;}
  .expertos-mini img{width:22px;height:22px;}
  .nav-button{font-size:1rem;min-width:96px;padding:.72rem .9rem;}
}