/* ============================================================
   DIETÉTICA LOS TANOS — Hoja de estilos
   Regla de color 60/30/10 · Blanco (60) · Verde (30) · Rojo (10, resaltes)
   ============================================================ */

:root{
  /* Marca */
  --rojo:        #A81C17;
  --rojo-700:    #8a1511;
  --verde:       #74992E;
  --verde-700:   #5f7f24;
  --verde-osc:   #163F14;
  --verde-osc-2: #0e2c0e;
  --verde-luz:   #a7c46a;   /* verde claro para detalles sobre fondo oscuro */

  /* Neutros — dominio del blanco */
  --blanco:      #ffffff;
  --crema:       #FBFCF9;
  --verde-pale:  #EDF2E1;
  --papel:       #ffffff;
  --tinta:       #1f2719;
  --tinta-soft:  #50583f;
  --linea:       #e6ebdb;

  --wa:          #25D366;

  --radius:      22px;
  --radius-sm:   14px;
  --shadow:      0 22px 55px rgba(22,63,20,.13);
  --shadow-sm:   0 10px 28px rgba(22,63,20,.09);
  --maxw:        1200px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }

body{
  font-family:'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--tinta);
  background:var(--crema);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}

h1,h2,h3{ font-family:'Fraunces', Georgia, serif; line-height:1.07; font-weight:700; color:var(--verde-osc); letter-spacing:-.01em; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Iconos ---------- */
.ico{ width:1.15em; height:1.15em; display:inline-block; vertical-align:-.18em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ico--fill{ fill:currentColor; stroke:none; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:'Mulish',sans-serif; font-weight:800; font-size:.98rem;
  padding:.82em 1.6em; border-radius:100px; cursor:pointer; border:2px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s;
  white-space:nowrap; line-height:1.15; max-width:100%; text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn .ico{ width:1.2em; height:1.2em; }
.btn-primary{ background:var(--rojo); color:#fff; box-shadow:0 10px 24px rgba(168,28,23,.28); }
.btn-primary:hover{ background:var(--rojo-700); box-shadow:0 14px 30px rgba(168,28,23,.36); }
.btn-light{ background:#fff; color:var(--verde-osc); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.btn-light:hover{ background:var(--verde-pale); }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:#fff; color:var(--verde-osc); }
.btn-outline{ background:transparent; color:var(--verde-osc); border-color:var(--verde); }
.btn-outline:hover{ background:var(--verde-osc); color:#fff; border-color:var(--verde-osc); }
.btn-wa{ background:var(--wa); color:#073420; }
.btn-wa:hover{ background:#1ebd5b; }
.btn-lg{ font-size:1.06rem; padding:1em 2em; }
.btn-sm{ font-size:.86rem; padding:.62em 1.15em; }

/* ---------- Encabezados de sección ---------- */
.section-head{ margin-bottom:3.2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1.8rem; flex-wrap:wrap; }
.section-head.center{ flex-direction:column; align-items:center; text-align:center; }
.section-head-text{ max-width:62ch; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3rem); }
.section-lead{ color:var(--tinta-soft); max-width:56ch; margin-top:.7rem; font-size:1.08rem; }
.section-head.center .section-lead{ margin-left:auto; margin-right:auto; }

/* ============== HEADER ============== */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--linea); }
.nav{ display:flex; align-items:center; gap:1.4rem; padding:.7rem 24px; }
.brand{ display:flex; align-items:center; gap:.8rem; margin-right:auto; }
.brand img{ width:52px; height:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.12; }
.brand-text strong{ font-family:'Fraunces',serif; font-size:1.2rem; color:var(--verde-osc); }
.brand-text em{ font-style:normal; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--verde-700); font-weight:800; }

.main-nav{ display:flex; gap:1.6rem; }
.main-nav a{ font-weight:700; font-size:.95rem; color:var(--verde-osc); position:relative; padding:.4rem 0; }
.main-nav a::after{ content:''; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:var(--verde); transition:width .25s var(--ease); }
.main-nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:26px; height:3px; background:var(--verde-osc); border-radius:3px; transition:.25s; }

.mobile-menu{ display:none; flex-direction:column; gap:.2rem; padding:0 24px 1.2rem; background:#fff; border-bottom:1px solid var(--linea); }
.mobile-menu a{ padding:.85rem .4rem; font-weight:700; color:var(--verde-osc); border-bottom:1px solid var(--linea); }
.mobile-menu .btn{ margin-top:.9rem; border-bottom:0; }
.mobile-menu.open{ display:flex; }

/* ============== HERO ============== */
.hero{ position:relative; color:#fff; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-2;
  background:linear-gradient(100deg, rgba(11,38,11,.95) 0%, rgba(22,63,20,.82) 46%, rgba(22,63,20,.5) 100%),
             url('imagenes/web/legumbres.webp') center/cover no-repeat; }
.hero::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 88% 115%, rgba(116,153,46,.4), transparent 55%); }
.hero-inner{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding:clamp(4rem,9vw,7.5rem) 24px clamp(3.5rem,7vw,6rem); max-width:var(--maxw); }
.hero-copy{ min-width:0; }
.hero h1{ color:#fff; font-size:clamp(2.6rem,6.2vw,4.6rem); font-weight:800; }
.hero h1 span{ color:var(--verde-luz); font-style:italic; font-weight:600; }
.hero-sub{ max-width:54ch; margin:1.7rem 0 2.4rem; font-size:clamp(1.08rem,1.6vw,1.25rem); color:#e7ebdb; }
.hero-sub strong{ color:#fff; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero-stats{ list-style:none; display:grid; gap:0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:.5rem; backdrop-filter:blur(8px); }
.hero-stats li{ display:flex; align-items:center; gap:1rem; padding:1.05rem 1.1rem; }
.hero-stats li + li{ border-top:1px solid rgba(255,255,255,.12); }
.hero-stats .ico{ width:26px; height:26px; color:var(--verde-luz); }
.hero-stats span{ display:flex; flex-direction:column; line-height:1.3; font-size:.9rem; color:#cdd6bd; }
.hero-stats strong{ color:#fff; font-size:1.02rem; }

/* ============== BENEFICIOS ============== */
.benefits{ background:var(--papel); padding:clamp(3.5rem,7vw,5rem) 0; }
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.benefit{ padding:2.2rem 2rem; border-radius:var(--radius); background:var(--verde-pale); border:1px solid var(--linea); transition:transform .2s var(--ease), box-shadow .2s; }
.benefit:hover{ transform:translateY(-5px); box-shadow:var(--shadow-sm); }
.b-ico{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:18px; background:#fff; color:var(--verde-osc); margin-bottom:1.3rem; box-shadow:var(--shadow-sm); }
.b-ico .ico{ width:30px; height:30px; }
.benefit h3{ font-size:1.35rem; margin-bottom:.5rem; }
.benefit p{ font-size:.96rem; color:var(--tinta-soft); }

/* ============== PRODUCTOS DESTACADOS ============== */
.featured{ padding:clamp(3.5rem,7vw,5.5rem) 0; }
.slider-controls{ display:flex; gap:.7rem; }
.slider-btn{ width:52px; height:52px; border-radius:50%; border:2px solid var(--verde-osc); background:#fff; color:var(--verde-osc); cursor:pointer; transition:.2s var(--ease); display:flex; align-items:center; justify-content:center; }
.slider-btn .ico{ width:22px; height:22px; stroke-width:2.4; }
.slider-btn:hover{ background:var(--verde-osc); color:#fff; }
.slider-btn:disabled{ opacity:.28; cursor:default; }

.slider{ overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:.6rem 0 1.8rem; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--verde) transparent; }
.slider.dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; user-select:none; }
.slider.dragging img, .slider.dragging a{ pointer-events:none; }
.slider::-webkit-scrollbar{ height:8px; }
.slider::-webkit-scrollbar-thumb{ background:var(--verde); border-radius:8px; }
.slider:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; border-radius:var(--radius); }
.slider-track{ display:flex; gap:1.6rem; padding:0 24px; width:max-content; }

.product{ scroll-snap-align:start; flex:0 0 296px; width:296px; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--linea); display:flex; flex-direction:column; transition:transform .22s var(--ease), box-shadow .22s; }
.product:hover{ transform:translateY(-7px); box-shadow:var(--shadow); }
.product-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--verde-pale); }
.product-img img{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.product:hover .product-img img{ transform:scale(1.07); }
.product-img .tag{ position:absolute; top:.9rem; left:.9rem; background:var(--verde-osc); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:.4em .8em; border-radius:100px; }
.product-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.product-body h3{ font-size:1.3rem; margin-bottom:.35rem; }
.product-body p{ font-size:.9rem; color:var(--tinta-soft); flex:1; margin-bottom:1.3rem; }
.product-foot{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
.price{ font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; color:var(--verde-osc); }

.featured-foot{ text-align:center; margin-top:2rem; }

/* ============== PRODUCCIÓN PROPIA ============== */
.production{ position:relative; background:var(--verde-osc); color:#eef1e6; padding:clamp(3.5rem,7vw,5.5rem) 0; overflow:hidden; }
.production::before{ content:''; position:absolute; top:-30%; right:-10%; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(116,153,46,.28), transparent 70%); }
.production .wrap{ position:relative; }
.production h2{ color:#fff; }
.production .section-lead{ color:#c8d1b8; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:3rem; }
.chips li{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#fff; padding:.5em 1.2em; border-radius:100px; font-weight:700; font-size:.94rem; }
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.prod-card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.prod-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.prod-card:hover img{ transform:scale(1.09); }
.prod-card figcaption{ position:absolute; inset:auto 0 0 0; background:linear-gradient(transparent, rgba(11,38,11,.9)); color:#fff; font-family:'Fraunces',serif; font-weight:700; font-size:1.5rem; padding:2.4rem 1.3rem 1.1rem; }

/* ============== QUIÉNES SOMOS ============== */
.about{ padding:clamp(4rem,8vw,6.5rem) 0; background:var(--verde-pale); }
.about-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.about-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; }
.about-text h2{ font-size:clamp(2rem,4.4vw,3rem); margin:.2rem 0 1.4rem; }
.about-text p{ margin-bottom:1.15rem; color:var(--tinta); font-size:1.04rem; }
.about-text em{ font-style:italic; font-weight:700; color:var(--verde-osc); }

/* ============== ENVÍOS ============== */
.shipping{ background:var(--papel); padding:clamp(3rem,6vw,4.5rem) 0; }
.shipping-inner{ display:flex; align-items:center; gap:2rem; background:linear-gradient(115deg, var(--verde-pale), #fff); border:1px solid var(--linea); border-radius:var(--radius); padding:clamp(1.8rem,4vw,3rem); box-shadow:var(--shadow-sm); flex-wrap:wrap; }
.shipping-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:24px; background:var(--rojo); color:#fff; box-shadow:0 14px 30px rgba(168,28,23,.3); }
.shipping-icon .ico{ width:42px; height:42px; }
.shipping-text{ flex:1; min-width:260px; }
.shipping-tag{ font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verde-700); margin-bottom:.4rem; }
.shipping-text h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.5rem; }
.shipping-text h2 span{ color:var(--rojo); font-style:italic; }
.shipping-text p{ color:var(--tinta-soft); max-width:60ch; }
.shipping-cta{ flex-shrink:0; }

/* ============== SUCURSALES ============== */
.branches{ padding:clamp(4rem,8vw,6rem) 0; background:var(--crema); }
.branch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; }
.branch-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--linea); transition:transform .2s var(--ease), box-shadow .2s; display:flex; flex-direction:column; }
.branch-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.branch-card--main{ border:4px solid var(--verde); box-shadow:0 14px 34px rgba(116,153,46,.18); }
.branch-card--main:hover{ box-shadow:0 24px 55px rgba(116,153,46,.24); }
.branch-badge{ position:absolute; top:1rem; left:1rem; display:inline-flex; align-items:center;
  background:var(--verde); color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.45em 1em; border-radius:999px; box-shadow:0 6px 16px rgba(22,63,20,.28); }
.branch-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.branch-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.branch-card:hover .branch-img img{ transform:scale(1.05); }
.branch-body{ padding:2rem; display:flex; flex-direction:column; flex:1; }
.branch-body h3{ font-size:1.8rem; margin-bottom:.9rem; }
.branch-info{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.branch-info li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; color:var(--tinta); font-weight:600; }
.branch-info .ico{ width:19px; height:19px; color:var(--verde-700); margin-top:.15rem; }
.branch-info a{ color:var(--verde-osc); }
.branch-info a:hover{ text-decoration:underline; }
.branch-body .btn{ align-self:flex-start; margin-top:auto; }

/* ============== CTA BAND ============== */
.cta-band{ background:linear-gradient(120deg, var(--verde-osc) 0%, var(--verde-700) 100%); color:#fff; padding:clamp(3.5rem,7vw,5rem) 0; text-align:center; }
.cta-band h2{ color:#fff; font-size:clamp(2rem,4.4vw,2.9rem); }
.cta-inner p{ max-width:56ch; margin:1.1rem auto 2rem; font-size:1.12rem; color:#dfe7d2; }
.cta-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============== FOOTER ============== */
.site-footer{ background:var(--verde-osc-2); color:#c1cbb1; padding:3.6rem 0 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.25fr 1.35fr; gap:2.4rem; }
.footer-brand img{ width:84px; height:84px; object-fit:contain; background:#fff; border-radius:50%; padding:10px; margin-bottom:1rem; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.footer-brand strong{ color:#fff; font-family:'Fraunces',serif; font-size:1.18rem; }
.footer-col h3{ color:#fff; font-size:1.02rem; margin-bottom:1.1rem; font-family:'Mulish',sans-serif; font-weight:800; letter-spacing:.03em; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:#c1cbb1; transition:color .2s; }
.footer-col a:hover{ color:var(--verde-luz); }
.footer-contact li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.93rem; }
.footer-contact .ico{ width:18px; height:18px; color:var(--verde-luz); margin-top:.15rem; }
.socials a{ display:flex; align-items:center; gap:.55rem; font-weight:700; }
.socials .ico{ flex:none; }
.footer-mail a{ white-space:nowrap; font-size:.88rem; font-weight:600; }
.footer-bottom{ margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); text-align:center; font-size:.85rem; color:#8a957b; }

/* ============== WHATSAPP FLOTANTE ============== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:104px; height:104px; border-radius:50%;
  background:var(--wa); color:#fff;
  box-shadow:0 14px 34px rgba(18,140,126,.5);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.wa-float:hover{ transform:scale(1.07); box-shadow:0 18px 42px rgba(18,140,126,.6); }
.wa-float .ico{ width:62px; height:62px; }
.wa-float::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--wa); z-index:-1; animation:waPulse 2.2s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }

/* ============== REVEAL ON SCROLL ============== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   Desktop grande ▸ Tablet/Desktop chico (≤1024) ▸ Nav móvil (≤900)
   ▸ Tablet portrait / móvil (≤760) ▸ Móvil (≤560) ▸ Móvil chico (≤380)
   ============================================================ */

/* ---- Tablet & desktop chico ---- */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; gap:2.6rem; }
  .hero-copy{ max-width:700px; }
  .hero-stats{ grid-template-columns:1fr 1fr; max-width:580px; }
  .hero-stats li:nth-child(2){ border-top:0; }
  .hero-stats li:nth-child(odd){ border-right:1px solid rgba(255,255,255,.12); }
  .about-inner{ grid-template-columns:1fr; gap:2.6rem; }
  .about-media{ max-width:440px; }
  .about-media img{ aspect-ratio:16/11; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 2.4rem; }
}

/* ---- Navegación → menú hamburguesa ---- */
@media (max-width:900px){
  .main-nav, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---- Tablet portrait / móvil grande ---- */
@media (max-width:760px){
  .benefits-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .branch-grid{ grid-template-columns:1fr; }
  .section-head{ justify-content:center; text-align:center; flex-direction:column; align-items:center; }
  .section-head-text{ text-align:center; }
  .slider-controls{ display:none; }
  .shipping-inner{ flex-direction:column; text-align:center; gap:1.4rem; padding:2.8rem 1.6rem; }
  .shipping-text{ min-width:0; }
  .shipping-text p{ margin-left:auto; margin-right:auto; }
  .cta-buttons{ flex-direction:column; align-items:stretch; }
}

/* ---- Móvil ---- */
@media (max-width:560px){
  .wrap{ padding:0 18px; }
  .nav{ padding:.6rem 18px; gap:.8rem; }
  .btn{ white-space:normal; }   /* botones largos envuelven en vez de desbordar */
  /* Hero compacto en móvil */
  .hero-inner{ padding:2.4rem 18px 2.8rem; }
  .hero-stats{ display:none; }            /* se ocultan en móvil */
  .hero h1{ font-size:2.45rem; }
  .hero-sub{ margin:1.2rem 0 1.7rem; font-size:1.05rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .prod-grid{ grid-template-columns:1fr; max-width:380px; margin:0 auto; }
  .slider-track{ gap:1.1rem; padding:0 18px; }
  .product{ flex-basis:80vw; width:80vw; }
  .footer-grid{ grid-template-columns:1fr; gap:1.9rem; }
  .brand-text strong{ font-size:1.06rem; }
  .wa-float{ width:92px; height:92px; right:16px; bottom:16px; }
  .wa-float .ico{ width:54px; height:54px; }
}

/* ---- Móvil chico ---- */
@media (max-width:380px){
  .brand img{ width:44px; }
  .brand-text strong{ font-size:.96rem; }
  .brand-text em{ font-size:.58rem; }
  .hero h1{ font-size:2.15rem; }
  .btn-lg{ font-size:1rem; padding:.9em 1.5em; }
  .product{ flex-basis:84vw; width:84vw; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}
