
:root{
  --header-height:78px;
  --premium-ease:cubic-bezier(.22,.8,.24,1);
}
html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-height) + 20px);
}
body{min-width:320px;overflow-x:clip}
main,section,article,aside,header,footer,nav,div{min-width:0}
picture,img,svg,video,iframe{max-width:100%}
img,svg{display:block}
iframe,video{width:100%}
.container{width:min(var(--max),calc(100% - clamp(28px,5vw,64px)))!important}
.narrow{width:min(900px,calc(100% - clamp(28px,5vw,64px)))!important}
section{padding-block:clamp(3.7rem,7vw,6rem)!important}
h1{font-size:clamp(2.55rem,6vw,5.2rem)!important;overflow-wrap:anywhere}
h2{font-size:clamp(2rem,4.2vw,3.65rem)!important;overflow-wrap:anywhere}
h3,h4,p,li,a,summary,strong,span{overflow-wrap:anywhere}
.lead{font-size:clamp(1.02rem,1.7vw,1.16rem)!important}

.btn,.mobile-toggle,.mobile-nav-close,.main-nav a,.nav-group>summary,details>summary{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn{
  position:relative;
  overflow:hidden;
  min-height:48px;
  transition:transform .25s var(--premium-ease),box-shadow .25s var(--premium-ease),background-color .25s ease,border-color .25s ease!important;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-60% auto -60% -55%;
  width:36%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transition:left .62s var(--premium-ease);
  pointer-events:none;
}
.btn:hover::before{left:125%}
.btn:hover{transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(23,52,91,.16)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(85,190,226,.8)!important;
  outline-offset:3px;
  border-radius:6px;
}

/* Cabecera */
.site-header{min-height:var(--header-height);isolation:isolate}
.header-row{min-height:var(--header-height)!important;gap:clamp(.7rem,1.5vw,1.35rem)!important}
.logo{flex:0 1 auto;min-width:0}
.logo-text{min-width:0}
.logo-text strong{white-space:nowrap;font-size:clamp(.88rem,1.25vw,1.12rem)!important}
.logo-text small{white-space:nowrap;letter-spacing:.18em!important}
.mobile-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  min-width:104px;
  min-height:48px;
  padding:.65rem .9rem;
  border:1px solid rgba(23,52,91,.2);
  border-radius:10px;
  background:#fff;
  color:var(--navy);
  box-shadow:0 8px 22px rgba(23,52,91,.08);
  font-size:.75rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.mobile-toggle-icon{display:grid;width:22px;gap:4px}
.mobile-toggle-icon i{display:block;width:100%;height:2px;border-radius:99px;background:currentColor}
.mobile-toggle:hover{border-color:rgba(47,136,170,.6);color:var(--blue)}
.main-nav{min-width:0}
.main-nav>a,.nav-group>summary{
  min-height:44px;
  display:flex;
  align-items:center;
  border-radius:8px;
  transition:background-color .18s ease,color .18s ease;
}
.main-nav>a:hover,.nav-group>summary:hover,.nav-group[open]>summary{background:#eef5f8;color:var(--navy)}
.main-nav a[aria-current="page"]{color:var(--blue);background:#eef7fa}
.nav-group[open]>.dropdown{animation:premiumDropdown .2s var(--premium-ease) both}
@keyframes premiumDropdown{
  from{opacity:0;transform:translateY(-7px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dropdown{
  max-height:min(72vh,650px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#a9bdc9 transparent;
}
.dropdown a{min-height:44px;display:flex!important;align-items:center}
.security-menu .dropdown{
  left:auto!important;
  right:0!important;
  width:min(680px,calc(100vw - 40px))!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.15rem .45rem;
}
.security-menu[open] .dropdown{display:grid}

/* Menú lateral */
.menu-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483600;
  background:rgba(7,22,41,.62);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.menu-backdrop.is-active{opacity:1;visibility:visible}
.mobile-nav-close{display:none}

@media(max-width:1279px){
  :root{--header-height:72px}
  body.menu-open{overflow:hidden!important;touch-action:none}
  .main-nav{display:none!important}
  .mobile-toggle{display:flex!important;flex:0 0 auto}
  .main-nav.mobile-active{
    display:flex!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    z-index:2147483640!important;
    width:min(580px,100vw)!important;
    height:100vh!important;
    height:100dvh!important;
    margin:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 14px) clamp(18px,4vw,34px) calc(env(safe-area-inset-bottom,0px) + 30px)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff!important;
    border-left:1px solid rgba(23,52,91,.12);
    box-shadow:-28px 0 70px rgba(8,28,50,.24)!important;
    animation:premiumDrawer .32s var(--premium-ease) both;
  }
  @keyframes premiumDrawer{
    from{transform:translateX(100%);opacity:.6}
    to{transform:translateX(0);opacity:1}
  }
  .mobile-nav-close{
    position:sticky;
    top:calc(env(safe-area-inset-top,0px) * -1);
    z-index:4;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:72px;
    margin:0 0 .65rem;
    padding:.35rem 0 .9rem;
    border:0;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.97);
    color:var(--navy);
    cursor:pointer;
    backdrop-filter:blur(12px);
  }
  .mobile-nav-close-copy{display:block;text-align:left}
  .mobile-nav-close-copy strong{display:block;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase}
  .mobile-nav-close-copy small{display:block;margin-top:.2rem;color:var(--muted);font-size:.75rem;font-weight:600}
  .mobile-nav-close-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f7fafb;
    font-size:1.8rem;
    font-weight:400;
    line-height:1;
  }
  .main-nav.mobile-active>a,
  .main-nav.mobile-active>.nav-group,
  .main-nav.mobile-active>.nav-group>summary{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .main-nav.mobile-active>a,
  .main-nav.mobile-active>.nav-group>summary{
    min-height:56px!important;
    margin:0!important;
    padding:1rem .25rem!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
    background:#fff!important;
    color:var(--ink)!important;
    font-size:1.02rem!important;
    font-weight:760!important;
    line-height:1.35!important;
    text-align:left!important;
  }
  .main-nav.mobile-active>a{display:flex!important;align-items:center!important}
  .main-nav.mobile-active>a[aria-current="page"]{
    color:var(--blue)!important;
    box-shadow:inset 3px 0 0 var(--blue);
    padding-left:.85rem!important;
    background:#f5fafc!important;
  }
  .main-nav.mobile-active>.nav-group>summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    cursor:pointer;
  }
  .main-nav.mobile-active>.nav-group>summary::after{
    content:"+";
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    margin-left:1rem!important;
    border:1px solid #d8e3e9;
    border-radius:50%;
    background:#f4f8fa;
    color:var(--blue)!important;
    font-size:1.25rem!important;
    line-height:1;
    transition:transform .22s ease,background .22s ease;
  }
  .main-nav.mobile-active>.nav-group[open]>summary{color:var(--navy)!important;background:#f8fbfc!important}
  .main-nav.mobile-active>.nav-group[open]>summary::after{content:"−";transform:rotate(180deg);background:#e8f3f7}
  .main-nav.mobile-active .dropdown,
  .main-nav.mobile-active .security-menu .dropdown{
    position:static!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:.45rem 0 .65rem .85rem!important;
    border:0!important;
    border-left:3px solid #dcebf1!important;
    border-radius:0!important;
    background:#f7fafb!important;
    box-shadow:none!important;
    animation:mobileAccordion .22s ease both!important;
  }
  @keyframes mobileAccordion{
    from{opacity:0;transform:translateY(-5px)}
    to{opacity:1;transform:translateY(0)}
  }
  .main-nav.mobile-active .dropdown a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:50px!important;
    padding:.78rem .8rem!important;
    border-bottom:1px solid rgba(23,52,91,.08);
    border-radius:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    font-size:.94rem!important;
    font-weight:650!important;
    line-height:1.4!important;
  }
  .main-nav.mobile-active .dropdown a::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:.7rem;
    flex:0 0 6px;
    border-radius:50%;
    background:#8db9ca;
  }
  .main-nav.mobile-active .dropdown a:last-child{border-bottom:0}
  .main-nav.mobile-active .dropdown a[aria-current="page"]{color:var(--blue)!important;font-weight:800!important}
}

@media(max-width:600px){
  .main-nav.mobile-active{width:100vw!important;border-left:0;box-shadow:none!important}
  .header-row{min-height:68px!important}
  .logo-symbol{width:38px!important;height:38px!important;flex:0 0 38px}
  .logo-text strong{font-size:.78rem!important;letter-spacing:.075em!important}
  .logo-text small{display:none!important}
  .mobile-toggle{min-width:48px;width:48px;height:48px;padding:0}
  .mobile-toggle-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .main-nav.mobile-active>a,
  .main-nav.mobile-active>.nav-group>summary{min-height:58px!important;font-size:1rem!important}
}

/* Diseño fluido */
.hero-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)!important;
  gap:clamp(2rem,5vw,4rem)!important;
}
.hero-copy{padding-block:clamp(3.6rem,7vw,6.3rem)!important}
.hero-photo,.hero-visual-photo{min-height:clamp(380px,48vw,590px)!important}
.split{
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr)!important;
  gap:clamp(2rem,5vw,4rem)!important;
}
.grid-4,.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.grid-3,.security-hub-grid,.security-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.grid-2,.mini-cards,.product-comparison-cards,.camera-comparison-cards,.camera-decision-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important
}
.footer-grid{grid-template-columns:minmax(240px,1.25fr) repeat(4,minmax(0,1fr))!important}
.card,.product-card,.camera-product-card,.security-hub-card,.decision-card,.mini-card,.trust-item,.question-guide-card{min-width:0}
.article-shell{
  grid-template-columns:minmax(0,1fr) minmax(245px,300px)!important;
  gap:clamp(2rem,4vw,4rem)!important;
}
.article-content,.sidebar{min-width:0}
.toc{top:calc(var(--header-height) + 18px)!important}
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-wrap table{min-width:680px}
.article-content>table,.narrow>table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.question-guide-card{width:100%}
.product-image img,.camera-product-image img{max-width:100%;object-fit:contain}

@media(max-width:1120px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.85fr)!important}
  .grid-4,.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .article-shell{display:flex!important;flex-direction:column}
  .article-content{order:2}
  .sidebar{display:block!important;order:1;width:100%;margin:0 0 1.8rem}
  .toc{
    position:static!important;
    display:flex;
    align-items:center;
    gap:.55rem;
    width:100%;
    padding:.75rem!important;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f7fafb;
    scrollbar-width:none;
  }
  .toc::-webkit-scrollbar{display:none}
  .toc>strong{flex:0 0 auto;padding:.7rem .8rem;color:var(--navy);white-space:nowrap}
  .toc>a{
    flex:0 0 auto;
    min-height:44px;
    display:flex!important;
    align-items:center;
    padding:.65rem .85rem!important;
    border:1px solid #dce6eb!important;
    border-radius:999px!important;
    background:#fff!important;
    white-space:nowrap;
  }
  .toc .sidebar-cta{display:none!important}
}

@media(max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr!important}
  .hero-copy{padding-bottom:1.2rem!important}
  .hero-visual,.hero-visual-photo,.hero-photo{
    width:100%;
    max-width:720px;
    margin:0 auto clamp(2rem,7vw,4rem);
  }
  .grid-3,.security-hub-grid,.security-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .section-head{display:block!important}
  .section-head .lead{margin-top:1rem!important}
  .layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .topic-strip{
    display:block!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  .topic-strip::-webkit-scrollbar{display:none}
  .topic-strip .container{
    width:max-content!important;
    min-width:100%;
    justify-content:flex-start!important;
    padding-inline:18px;
  }
  .topic-strip a{min-height:46px;display:flex;align-items:center}
}

@media(max-width:700px){
  .container,.narrow{width:calc(100% - 28px)!important}
  section{padding-block:3.8rem!important}
  .topic-strip{display:none!important}
  .grid-4,.grid-3,.grid-2,.trust-grid,.security-hub-grid,.security-tool-grid,.mini-cards,
  .product-comparison-cards,.camera-comparison-cards,.camera-decision-grid,.layer-grid,.footer-grid{
    grid-template-columns:1fr!important
  }
  .trust-item{border-right:0!important;border-bottom:1px solid var(--line)}
  .actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .actions .btn,.cta-band .btn,.amazon-btn{width:100%!important}
  .article-hero{padding-block:3rem 2.5rem!important}
  .article-shell{padding-block:2.5rem!important}
  .article-content h2{font-size:clamp(1.8rem,8vw,2.3rem)!important}
  .question-guide-list .question-guide-card{
    grid-template-columns:34px minmax(0,1fr) 20px!important;
    gap:.65rem!important;
    min-height:0!important;
    padding:1.05rem .1rem!important;
  }
  .question-guide-content strong{font-size:1rem!important}
  .question-guide-answer{font-size:.92rem!important}
  .purpose-photo{max-width:520px;margin-inline:auto}
  .product-image,.camera-product-image{min-height:250px!important}
  .product-image img,.camera-product-image img{height:230px!important}
  .footer-bottom{display:grid!important;gap:.55rem;text-align:left}
}

@media(max-width:420px){
  .container,.narrow{width:calc(100% - 24px)!important}
  h1{font-size:clamp(2.3rem,12vw,3.15rem)!important}
  h2{font-size:clamp(1.85rem,9.5vw,2.45rem)!important}
  .card,.product-body,.camera-product-body,.security-hub-card{padding:1.12rem!important}
  .quick-answer,.affiliate-note,.notice,.sources,.author-box{padding:1rem!important}
  .toc{margin-inline:-2px}
}

/* Efecto premium de ratón */
.premium-cursor-glow,.premium-cursor-dot{display:none}
@media(hover:hover) and (pointer:fine){
  .premium-cursor-glow{
    position:fixed;
    top:0;
    left:0;
    z-index:2147483000;
    display:block;
    width:260px;
    height:260px;
    margin:-130px 0 0 -130px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(85,190,226,.18) 0%,rgba(47,136,170,.08) 36%,transparent 70%);
    filter:blur(4px);
    pointer-events:none;
    opacity:.8;
    transform:translate3d(-500px,-500px,0);
    transition:width .22s ease,height .22s ease,margin .22s ease,opacity .22s ease;
    will-change:transform;
  }
  .premium-cursor-dot{
    position:fixed;
    top:0;
    left:0;
    z-index:2147483001;
    display:block;
    width:7px;
    height:7px;
    margin:-3.5px 0 0 -3.5px;
    border-radius:50%;
    background:rgba(47,136,170,.78);
    box-shadow:0 0 0 5px rgba(85,190,226,.12);
    pointer-events:none;
    transform:translate3d(-500px,-500px,0);
    will-change:transform;
  }
  .premium-cursor-glow.is-interactive{width:170px;height:170px;margin:-85px 0 0 -85px;opacity:1}
  .premium-hover{position:relative;overflow:hidden;isolation:isolate}
  .premium-hover::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(85,190,226,.13),transparent 45%);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .premium-hover:hover::after{opacity:1}
  .premium-hover>*{position:relative;z-index:1}
  .card,.product-card,.camera-product-card,.security-hub-card,.decision-card,.security-tool-link{
    transition:transform .28s var(--premium-ease),box-shadow .28s var(--premium-ease),border-color .28s ease!important;
  }
  .card:hover,.product-card:hover,.camera-product-card:hover,.security-hub-card:hover,.decision-card:hover,.security-tool-link:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(47,136,170,.45)!important;
    box-shadow:0 22px 48px rgba(23,52,91,.13)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .premium-cursor-glow,.premium-cursor-dot{display:none!important}
}

/* Corrección final de anchuras en artículos y tablas */
@media(max-width:1120px){
  .article-shell,
  .article-content,
  .article-shell>article,
  .article-shell>aside{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .article-content{
    flex:1 1 auto!important;
  }
  .article-content>*,
  .article-content section,
  .article-content .quick-answer,
  .article-content .affiliate-note,
  .article-content .product-comparison-cards,
  .article-content .camera-comparison-cards,
  .article-content .table-wrap{
    max-width:100%!important;
    min-width:0!important;
  }
  .table-wrap{
    width:100%!important;
    overflow-x:auto!important;
  }
}

/* AMAZON RATINGS FINAL */
body.menu-open .mobile-toggle{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.mobile-nav-close::after{display:none!important;content:none!important}
.rating-comparison-note{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.3rem 1rem;
  align-items:center;
  margin:1.25rem 0 1.5rem;
  padding:1.05rem 1.15rem;
  border:1px solid #e3d3b5;
  border-radius:12px;
  background:linear-gradient(135deg,#fffaf0,#fff);
  box-shadow:0 10px 26px rgba(73,53,20,.06);
}
.rating-comparison-label{
  grid-column:1/-1;
  color:#7a5b23;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.rating-comparison-note>strong{
  color:var(--navy);
  font-size:1.05rem;
}
.rating-comparison-note p{
  margin:0;
  color:#536171;
  font-size:.88rem;
  text-align:right;
}
.rating-comparison-note small{
  grid-column:1/-1;
  color:#74808b;
  font-size:.75rem;
}
.amazon-rating-block{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.38rem .65rem;
  margin:.1rem 0 1rem;
  padding:.75rem .82rem;
  border:1px solid #ead9b8;
  border-radius:10px;
  background:#fffaf1;
}
.amazon-rating-main{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.amazon-stars{
  position:relative;
  display:inline-block;
  font-size:1.08rem;
  line-height:1;
  letter-spacing:.035em;
  white-space:nowrap;
}
.amazon-stars-base{color:#d9d9d9}
.amazon-stars-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--rating-pct);
  overflow:hidden;
  color:#f59b23;
  white-space:nowrap;
}
.amazon-rating-number{
  color:#3b4652;
  font-size:.9rem;
}
.amazon-rating-count{
  color:#5f6c77;
  font-size:.78rem;
}
.best-rated-badge{
  margin-left:auto;
  padding:.3rem .55rem;
  border-radius:999px;
  background:#17345b;
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media(max-width:700px){
  .rating-comparison-note{
    grid-template-columns:1fr;
    gap:.28rem;
  }
  .rating-comparison-note p{text-align:left}
  .amazon-rating-block{align-items:flex-start}
  .best-rated-badge{
    flex-basis:auto;
    margin-left:0;
  }
}
@media(max-width:420px){
  .amazon-rating-main{width:100%}
  .amazon-rating-count{width:100%}
}
