/* ============================================================
   CASA ANDY V4
   HEADER UNIFICADO + HERO PREMIUM
   ============================================================ */


:root{

  --ca-navy:#111a3b;
  --ca-navy-2:#1c2856;
  --ca-navy-3:#2d3767;

  --ca-yellow:#f4e600;
  --ca-lime:#dcef18;
  --ca-orange:#ffa31a;

  --ca-white:#ffffff;

  --ca-text:#20263f;
  --ca-muted:#747b8f;

  --ca-shadow:
      0 20px 55px rgba(12,21,50,.13);

}


/* ============================================================
   HEADER
   ============================================================ */

.ca-header{

  position:sticky;

  top:0;

  z-index:100;

  padding:12px 0 10px;

  background:
      linear-gradient(
          180deg,
          rgba(247,249,253,.98),
          rgba(247,249,253,.89)
      );

  backdrop-filter:blur(20px);

}


.ca-header-shell{

  background:
      rgba(255,255,255,.92);

  border:
      1px solid rgba(220,224,235,.95);

  border-radius:25px;

  box-shadow:
      0 12px 35px rgba(17,26,59,.08);

  overflow:hidden;

  transition:
      box-shadow .35s ease,
      transform .35s ease,
      border-color .35s ease;

}


.ca-header.scrolled .ca-header-shell{

  box-shadow:
      0 20px 48px rgba(17,26,59,.14);

  border-color:
      rgba(213,218,231,.9);

}


.ca-header-main{

  min-height:82px;

  padding:
      10px 16px;

  display:grid;

  grid-template-columns:
      190px minmax(300px,1fr);

  align-items:center;

  gap:28px;

}


.ca-brand{

  height:62px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#050505;

  border-radius:16px;

  overflow:hidden;

  transition:
      transform .3s ease,
      box-shadow .3s ease;

}


.ca-brand:hover{

  transform:
      translateY(-2px);

  box-shadow:
      0 10px 24px rgba(13,18,38,.14);

}


.ca-brand img{

  width:100%;

  height:100%;

  object-fit:contain;

  padding:6px 16px;

}


.ca-search{

  height:56px;

  display:flex;

  align-items:center;

  border:
      1.5px solid #dce1ec;

  border-radius:18px;

  overflow:hidden;

  background:#f7f8fb;

  transition:
      border-color .25s ease,
      background .25s ease,
      box-shadow .25s ease;

}


.ca-search:focus-within{

  border-color:
      #e0df32;

  background:#fff;

  box-shadow:
      0 0 0 5px rgba(226,230,30,.13);

}


.ca-search input{

  flex:1;

  height:100%;

  border:0;

  outline:0;

  padding:
      0 20px;

  font-family:inherit;

  font-size:15px;

  color:var(--ca-text);

  background:transparent;

}


.ca-search input::placeholder{

  color:#999eac;

}


.ca-search button{

  width:60px;

  height:100%;

  border:0;

  cursor:pointer;

  display:grid;

  place-items:center;

  background:
      linear-gradient(
          135deg,
          var(--ca-navy),
          var(--ca-navy-3)
      );

  color:#fff;

  transition:
      width .25s ease,
      background .25s ease;

}


.ca-search button:hover{

  width:66px;

  background:
      linear-gradient(
          135deg,
          var(--ca-navy-2),
          #39457c
      );

}


.ca-search button svg{

  width:21px;
  height:21px;

}


.ca-nav{

  border-top:
      1px solid #eceef4;

  padding:
      0 13px 10px;

}


.ca-nav-inner{

  min-height:49px;

  padding:5px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:4px;

  border-radius:15px;

  background:
      linear-gradient(
          135deg,
          #171f45,
          #293462
      );

}


.ca-nav a{

  position:relative;

  padding:
      12px 17px;

  border-radius:11px;

  color:
      rgba(255,255,255,.88);

  font-size:13px;

  font-weight:700;

  white-space:nowrap;

  transition:
      color .25s ease,
      background .25s ease,
      transform .25s ease;

}


.ca-nav a:hover{

  color:
      var(--ca-yellow);

  background:
      rgba(255,255,255,.07);

  transform:
      translateY(-1px);

}


.ca-nav a::after{

  content:"";

  position:absolute;

  left:50%;
  right:50%;
  bottom:5px;

  height:2px;

  border-radius:99px;

  background:
      linear-gradient(
          90deg,
          var(--ca-lime),
          var(--ca-orange)
      );

  transition:
      left .28s ease,
      right .28s ease;

}


.ca-nav a:hover::after{

  left:18px;
  right:18px;

}


.ca-menu-btn{

  display:none;

}




/* ============================================================
   HERO
   ============================================================ */


.ca-hero{

  padding:
      12px 0 16px;

  background:
      radial-gradient(
          circle at 20% 10%,
          rgba(220,239,24,.07),
          transparent 32%
      ),
      #f8f9fc;

}


.ca-hero-shell{

  width:
      min(
          calc(100% - 40px),
          1580px
      );

  margin:
      0 auto;

}


.ca-hero-frame{

  position:relative;

  min-height:
      clamp(
          520px,
          48vw,
          760px
      );

  overflow:hidden;

  border-radius:34px;

  background:
      var(--ca-navy);

  box-shadow:
      0 35px 80px rgba(17,26,59,.20);

  isolation:isolate;

  animation:
      caHeroEnter .9s
      cubic-bezier(.17,.84,.44,1)
      both;

}


.ca-hero-image{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  animation:
      caHeroImage 16s
      ease-in-out infinite alternate;

}


.ca-hero-shade{

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:
      linear-gradient(
          90deg,
          rgba(6,14,39,.28) 0%,
          rgba(6,14,39,.08) 38%,
          rgba(6,14,39,0) 65%
      ),
      linear-gradient(
          0deg,
          rgba(6,13,35,.62) 0%,
          rgba(6,13,35,0) 47%
      );

}


.ca-hero-content{

  position:absolute;

  z-index:5;

  left:34px;
  right:34px;
  bottom:30px;

  padding:
      24px 26px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:30px;

  color:#fff;

  border:
      1px solid rgba(255,255,255,.16);

  border-radius:25px;

  background:
      linear-gradient(
          110deg,
          rgba(10,20,52,.77),
          rgba(19,29,65,.53)
      );

  backdrop-filter:
      blur(17px) saturate(135%);

  box-shadow:
      0 20px 50px rgba(4,10,30,.22);

}


.ca-hero-copy{

  max-width:720px;

  opacity:0;

  transform:
      translateX(-42px);

  animation:
      caCopyEnter .8s
      .25s
      cubic-bezier(.17,.84,.44,1)
      forwards;

}


.ca-hero-kicker{

  display:block;

  margin-bottom:8px;

  color:
      var(--ca-lime);

  font-size:11px;

  font-weight:900;

  letter-spacing:.15em;

}


.ca-hero-copy h1{

  margin:
      0 0 8px;

  color:#fff;

  font-size:
      clamp(
          27px,
          3.2vw,
          47px
      );

  line-height:1;

  letter-spacing:-.045em;

}


.ca-hero-copy h1 span{

  color:
      var(--ca-yellow);

}


.ca-hero-copy p{

  max-width:660px;

  margin:0;

  color:
      rgba(255,255,255,.80);

  font-size:14px;

  line-height:1.55;

}


.ca-hero-actions{

  flex:
      0 0 auto;

  display:flex;

  align-items:center;

  gap:12px;

}


.ca-hero-btn{

  position:relative;

  min-height:55px;

  padding:
      0 20px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  overflow:hidden;

  border-radius:16px;

  font-size:14px;

  font-weight:850;

  isolation:isolate;

  transition:
      transform .3s ease,
      box-shadow .3s ease,
      border-color .3s ease;

}


.ca-hero-btn::before{

  content:"";

  position:absolute;

  top:-120%;
  left:-50%;

  width:35%;
  height:340%;

  z-index:-1;

  transform:
      rotate(20deg);

  background:
      rgba(255,255,255,.25);

  transition:
      left .55s ease;

}


.ca-hero-btn:hover::before{

  left:120%;

}


.ca-btn-primary{

  color:
      #17203f;

  background:
      linear-gradient(
          120deg,
          var(--ca-lime),
          var(--ca-yellow) 52%,
          var(--ca-orange)
      );

  box-shadow:
      0 12px 30px rgba(242,225,0,.22);

  opacity:0;

  transform:
      translateY(35px);

  animation:
      caButtonEnter .75s
      .5s
      cubic-bezier(.17,.84,.44,1)
      forwards;

}


.ca-btn-secondary{

  color:#fff;

  border:
      1px solid rgba(255,255,255,.32);

  background:
      rgba(255,255,255,.11);

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13);

  opacity:0;

  transform:
      translateY(35px);

  animation:
      caButtonEnter .75s
      .66s
      cubic-bezier(.17,.84,.44,1)
      forwards;

}


.ca-hero-btn:hover{

  transform:
      translateY(-4px);

}


.ca-btn-primary:hover{

  box-shadow:
      0 17px 36px rgba(242,225,0,.31);

}


.ca-btn-secondary:hover{

  border-color:
      rgba(255,255,255,.55);

  background:
      rgba(255,255,255,.18);

  box-shadow:
      0 14px 32px rgba(4,10,30,.20);

}


.ca-btn-arrow{

  width:31px;
  height:31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  font-size:18px;

  transition:
      transform .3s ease;

}


.ca-btn-primary .ca-btn-arrow{

  background:
      rgba(17,26,59,.11);

}


.ca-btn-secondary .ca-btn-arrow{

  background:
      rgba(255,255,255,.12);

}


.ca-hero-btn:hover .ca-btn-arrow{

  transform:
      translateX(4px);

}




/* ============================================================
   DECORACIONES HERO
   ============================================================ */


.ca-hero-glow{

  position:absolute;

  z-index:3;

  pointer-events:none;

  border-radius:50%;

  filter:
      blur(80px);

  opacity:.25;

}


.ca-glow-one{

  width:260px;
  height:260px;

  right:15%;
  top:10%;

  background:
      var(--ca-yellow);

}


.ca-glow-two{

  width:220px;
  height:220px;

  left:15%;
  bottom:-100px;

  background:
      var(--ca-orange);

}


.ca-scroll-hint{

  position:absolute;

  z-index:6;

  top:24px;
  right:26px;

  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border:
      1px solid rgba(255,255,255,.25);

  border-radius:50%;

  background:
      rgba(10,20,52,.28);

  backdrop-filter:
      blur(12px);

}


.ca-scroll-hint span{

  width:5px;
  height:5px;

  border-radius:50%;

  background:#fff;

  animation:
      caPulse 1.8s
      ease-in-out infinite;

}




/* ============================================================
   AJUSTES RESTO DEL SITIO
   ============================================================ */


.benefits{

  background:#fff;

  border-bottom:
      1px solid #eceef4;

}


.benefits-grid{

  padding:
      22px 0;

}


.category-card{

  border-color:
      #e8eaf1;

  border-radius:
      20px;

}


.category-card:hover{

  border-color:
      #dce51c;

  box-shadow:
      0 20px 45px rgba(17,26,59,.10);

}


.cat-icon{

  background:
      linear-gradient(
          135deg,
          #f5f8cf,
          #fff8cc
      );

}


.product-card{

  border-radius:
      22px;

  border-color:
      #e7e9f0;

}


.product-card:hover{

  border-color:
      #dde51f;

  box-shadow:
      0 24px 58px rgba(17,26,59,.12);

}


.pill{

  color:#17203f;

  background:
      linear-gradient(
          120deg,
          var(--ca-lime),
          var(--ca-yellow),
          var(--ca-orange)
      );

}


.btn.dark{

  background:
      linear-gradient(
          135deg,
          var(--ca-navy),
          var(--ca-navy-3)
      );

}


.cta-band{

  background:
      linear-gradient(
          125deg,
          #111a3b,
          #2c386d
      );

}


.cta-band span{

  color:
      var(--ca-lime);

}




/* ============================================================
   ANIMACIONES
   ============================================================ */


@keyframes caHeroEnter{

  from{

    opacity:0;

    transform:
        translateY(20px)
        scale(.985);

  }

  to{

    opacity:1;

    transform:none;

  }

}


@keyframes caHeroImage{

  0%{

    transform:
        scale(1.015)
        translate3d(0,0,0);

  }

  50%{

    transform:
        scale(1.045)
        translate3d(-8px,-3px,0);

  }

  100%{

    transform:
        scale(1.025)
        translate3d(7px,3px,0);

  }

}


@keyframes caCopyEnter{

  to{

    opacity:1;

    transform:none;

  }

}


@keyframes caButtonEnter{

  to{

    opacity:1;

    transform:none;

  }

}


@keyframes caPulse{

  0%,
  100%{

    transform:scale(.8);

    box-shadow:
        0 0 0 0
        rgba(255,255,255,.40);

  }

  50%{

    transform:scale(1);

    box-shadow:
        0 0 0 8px
        rgba(255,255,255,0);

  }

}




/* ============================================================
   TABLET
   ============================================================ */


@media(max-width:1100px){

  .ca-header-main{

    grid-template-columns:
        165px
        minmax(250px,1fr);

  }


  .ca-nav-inner{

    justify-content:flex-start;

    overflow-x:auto;

    scrollbar-width:none;

  }


  .ca-nav-inner::-webkit-scrollbar{

    display:none;

  }


  .ca-hero-content{

    flex-direction:column;

    align-items:flex-start;

  }


  .ca-hero-actions{

    width:100%;

  }

}




/* ============================================================
   MOBILE
   ============================================================ */


@media(max-width:760px){


  .ca-header{

    padding:
        7px 0;

  }


  .ca-header-shell{

    border-radius:
        18px;

  }


  .ca-header-main{

    min-height:
        auto;

    grid-template-columns:
        42px
        125px
        1fr;

    gap:10px;

    padding:
        9px;

  }


  .ca-menu-btn{

    width:42px;
    height:42px;

    border:0;

    border-radius:
        12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    background:
        var(--ca-navy);

    cursor:pointer;

  }


  .ca-menu-btn span{

    width:18px;
    height:2px;

    display:block;

    border-radius:
        10px;

    background:#fff;

  }


  .ca-brand{

    height:49px;

    border-radius:
        12px;

  }


  .ca-brand img{

    padding:
        4px 8px;

  }


  .ca-search{

    grid-column:
        1 / -1;

    height:49px;

  }


  .ca-nav{

    display:none;

    padding:
        0 9px 9px;

  }


  .ca-nav.open{

    display:block;

  }


  .ca-nav-inner{

    padding:
        8px;

    flex-direction:column;

    align-items:stretch;

    background:
        var(--ca-navy);

  }


  .ca-nav a{

    width:100%;

    padding:
        13px 15px;

  }


  .ca-hero{

    padding:
        5px 0 12px;

  }


  .ca-hero-shell{

    width:
        calc(100% - 14px);

  }


  .ca-hero-frame{

    min-height:
        610px;

    border-radius:
        23px;

  }


  .ca-hero-image{

    object-position:
        center;

  }


  .ca-hero-shade{

    background:
        linear-gradient(
            0deg,
            rgba(7,14,38,.88) 0%,
            rgba(7,14,38,.42) 42%,
            rgba(7,14,38,.04) 72%
        );

  }


  .ca-hero-content{

    left:12px;
    right:12px;
    bottom:12px;

    padding:
        19px;

    border-radius:
        19px;

  }


  .ca-hero-kicker{

    font-size:
        9px;

  }


  .ca-hero-copy h1{

    font-size:
        30px;

  }


  .ca-hero-copy p{

    font-size:
        13px;

  }


  .ca-hero-actions{

    flex-direction:column;

  }


  .ca-hero-btn{

    width:100%;

  }


  .ca-scroll-hint{

    display:none;

  }

}




@media(max-width:430px){

  .ca-header-shell{

    width:
        calc(100% - 12px);

  }


  .ca-hero-frame{

    min-height:
        570px;

  }


  .ca-hero-copy h1{

    font-size:
        27px;

  }

}




/* ============================================================
   ACCESIBILIDAD
   ============================================================ */


@media(prefers-reduced-motion:reduce){

  .ca-hero-frame,
  .ca-hero-image,
  .ca-hero-copy,
  .ca-btn-primary,
  .ca-btn-secondary,
  .ca-scroll-hint span{

    animation:none !important;

    opacity:1 !important;

    transform:none !important;

  }

}