@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Inter:wght@400;500;700&display=swap");


 #huella {
   border: none;
   height: 75px;
   width: 270px;
   box-shadow: 0px 0px 0px 0px;
   translate: 100px -80px;
   margin-bottom: 10px;
   position: absolute;
   right: 0;
 }

 .nuestroLocal {
   display: flex;
   flex-direction: column;
 }

 .descLocal {
   display: flex;
   flex-direction: column;
 }

 #LocalFG {
   width: 55%;
   height: 80%;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 152, 0, 0.25);
   box-shadow: var(--shadow-1);
   transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease, filter var(--t-mid) ease;
 }

 .icono-tacho {
   fill: white;
   transition: color 0.15s ease;
   cursor: pointer;
   width: 25px;
   margin-right: 5px;
   height: auto;
 }

 .cantidad-producto {
   width: 30px;
   height: 25px;
   margin-left: 1px;
   text-align: center;
   align-content: center;
   color: #3d3d3dc7;
 }

 .icono-tacho path {
   transition: fill 0.15s ease;
 }

 #descLocalText {
   margin-left: 20px;
   text-align: start;
   width: 80%;
   translate: 0px 55px;
 }

 #huella_inv {
   border: none;
   height: 75px;
   width: 270px;
   box-shadow: 0px 0px 0px 0px;
   translate: -60px;
   transform: scale(-1);
   z-index: -1;
   margin-bottom: 10px;
 }

 /* -------- Root / Theme -------- */
 :root {
   /* Fondo claro */
   --fg-bg: #fdfdfd;
   --fg-surface: #ffffff;
   --fg-card: #fffefc;
   --fg-text: #2b2b2b;
   --fg-muted: #6c757d;

   /* Acentos cálidos */
   --accent-1: #ff9800;
   /* naranja */
   --accent-2: #ffc107;
   /* amarillo */
   --accent-3: #ffb300;
   /* dorado */

   /* Tonos secundarios */
   --warm-1: #ff6f00;
   /* naranja intenso */
   --warm-2: #ffa000;
   /* ámbar */
   --warm-3: #ffd54f;
   /* amarillo suave */

   /* Efectos */
   --radius: 16px;
   --radius-sm: 12px;
   --blur: 12px;
   --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.08);
   --shadow-2: 0 12px 28px rgba(0, 0, 0, 0.12);

   --max-w: 1200px;
   --pad: clamp(16px, 2.5vw, 32px);

   --fs-hero: clamp(28px, 4.5vw, 56px);
   --fs-h2: clamp(22px, 3vw, 32px);
   --fs-h3: clamp(18px, 2.2vw, 30px);
   --fs-body: clamp(14px, 1.4vw, 18px);
   --fs-small: clamp(12px, 1.2vw, 16px);

   --t-fast: 180ms;
   --t-mid: 320ms;
   --t-slow: 600ms;
 }

 /* -------- Global reset / base -------- */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 html,
 body {
   height: 100%;
   margin: 0;
   font-family: Inter, Montserrat, system-ui, sans-serif;
   line-height: 1.6;
   color: var(--fg-text);
   background-color: white;

 }

 #huella_vert {
   height: 29px;
   width: 197px;
   z-index: 0;
   transform: translate(10px, 10px);
   transform: rotate(90deg) translate(400px, 80px) scale(6);
 }

 section,
 footer {
   width: 100%;
   padding: var(--pad);
 }

 .downCont {
   display: flex;
   flex-direction: row;
   width: 100%;
 }

 .downContVert {
   display: flex;
   width: 100%;
   flex-direction: column;
 }

 .section {
   max-width: 100%;
   margin: 0 auto;
   background: #ffffff;
   position: relative;
   overflow: clip;
 }

 /* Accent border glow */
 .section::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   mask-composite: exclude;
   pointer-events: none;
   opacity: 0.12;
 }

 #sello {
   margin-left: -200px;
 }

 /* -------- Typography -------- */
 h2,
 h3 {
   margin: 0 0 12px;
   font-family: Montserrat, Inter, system-ui, sans-serif;
   letter-spacing: 0.3px;
 }

 h2 {
   align-content: center;
   /* margin-left: 10px; */
   text-wrap: nowrap;
   font-size: 45px;
   font-weight: 700;
   background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 #coberimg {
   width: 500px;
   height: 300px;
   margin-left: 80px;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 152, 0, 0.25);
   box-shadow: var(--shadow-1);
   transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease, filter var(--t-mid) ease;
 }

 h3 {
   font-size: 45px;
   font-weight: 600;
   justify-self: end;
   margin-right: 100px;
   margin-bottom: 10px;
   position: absolute;
   right: 0;
   align-content: center;
   background-clip: text;
   background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 p {
   margin: 0 0 14px;
   color: var(--fg-text);
   opacity: 0.92;
 }

 ul.list {
   list-style: none;
   padding: 0;
   margin: 12px 0 0;
 }

 ul.list li {
   position: relative;
   padding: 10px 14px 10px 36px;
   margin: 6px 0;
   background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(255, 152, 0, 0.25);
   border-radius: var(--radius-sm);
   transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease, border-color var(--t-mid) ease;
 }

 ul.list li::before {
   content: "";
   position: absolute;
   left: 12px;
   top: 50%;
   width: 10px;
   height: 10px;
   transform: translateY(-50%);
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, var(--accent-1), var(--accent-2));
   box-shadow: 0 0 12px rgba(255, 152, 0, 0.6);
 }

 ul.list li:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 152, 0, 0.6);
   box-shadow: 0 10px 24px rgba(255, 152, 0, 0.25);
 }

 /* -------- Hero -------- */
 .hero {
   position: relative;
   min-height: clamp(280px, 45vw, 520px);
   display: grid;
   place-items: center;
   overflow: hidden;
   border-radius: var(--radius);
   max-width: 100%;
   margin: 0 auto var(--pad);
   background: linear-gradient(135deg, #fff3e0, #fff);
   box-shadow: var(--shadow-2);
 }

 .hero-placeholder {
   position: relative;
   z-index: 2;
   font-size: var(--fs-hero);
   font-weight: 700;
   letter-spacing: 0.6px;
   color: var(--accent-1);
   text-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
 }

 .quehacemos {
   display: flex;
   flex-direction: row;
   justify-content: center;

 }

 /* -------- Two columns -------- */
 .two-cols {
   display: flex;
   gap: clamp(16px, 3vw, 32px);
   align-items: flex-start;

 }

 .two-cols.reverse {
   grid-template-columns: 1fr 1.1fr;
 }

 .two-cols img {
   width: 500px;
   height: 650px;
   border-radius: var(--radius);
   border: 1px solid rgba(255, 152, 0, 0.25);
   box-shadow: var(--shadow-1);
   transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease, filter var(--t-mid) ease;
 }

 #Nuestrolocal_R {
   text-align: start;
   margin-left: 17px;
   margin-bottom: -50px;
 }

 #Nuestrolocal_L {
   display: none;
 }

 #texto {
   width: 95%;
   display: flex;
   text-align: left;
   margin-left: 30px;
   flex-direction: column;
 }

 #texto2 {
   width: 500px;
   margin-left: auto;
   display: flex;
   padding-right: 25px;
   margin-right: -43px;
   right: 0;
   text-align: right;
   position: absolute;
   justify-self: end;
   flex-direction: row;
 }


 #hr {
   width: 400px !important;
   border: 2px solid #f3af61  !important;
   border-radius: 2px  !important;
   margin-bottom: 15px  !important;
   margin-top: 10px  !important;
 }

 /* -------- Quote -------- */
 .quote {
   margin-top: 30px;
   margin-bottom: 30px;
   position: relative;
   background: transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 150px;
   /* padding: 120px 20px; */
   margin: 30px 0;
   overflow: hidden;
   z-index: 2;
   text-align: center;
   text-align-last: center;
   box-shadow: var(--shadow-1);
 }

 .quote::before {
   content: "";
   position: absolute;
   inset: 0;
   background: url("../imagenes/fg-n.webp") repeat;
   filter: saturate(0) brightness(0.5);
   z-index: 0;
 }

 .quote>* {
   position: relative;
   z-index: 1;
   /* keep text above the blurred bg */
 }

 .quote p {
   font-family: Montserrat, Inter, system-ui, sans-serif;
   font-size: clamp(20px, 3.2vw, 34px);
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: 0.4px;
   text-wrap: nowrap;
   margin: 0;
   --angle: 0deg;
   /* variable para el ángulo */
   background: linear-gradient(var(--angle), var(--warm-1), var(--warm-2), var(--warm-3));
   -webkit-background-clip: text;
   background-clip: text;

   color: transparent;
   animation: rotateGradient 30s linear infinite;

 }

 /* .quote p::after {
  content: attr(data-text); 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(var(--angle), var(--warm-1), var(--warm-2), var(--warm-3));
  filter: blur( 1px);  
  opacity: 0.9;
  z-index: -1; 
  animation: rotateGradient 30s linear infinite;
} */

 @keyframes rotateGradient {
   from {
     --angle: 0deg;
   }

   to {
     --angle: 360deg;
   }
 }




 /* -------- Social -------- */
 .social {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 18px;
   flex-wrap: wrap;
 }

 .social span {
   color: var(--fg-muted);
   font-weight: 500;
 }

 .social a {
   position: relative;
   color: var(--fg-text);
   text-decoration: none;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(255, 193, 7, 0.12);
   border: 1px solid rgba(255, 152, 0, 0.25);
   transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
 }

 .social a:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 20px rgba(255, 152, 0, 0.25);
   background: linear-gradient(90deg, rgba(255, 152, 0, 0.18), rgba(255, 193, 7, 0.18));
 }

 /* -------- Info block (address/hours) -------- */
 .info {
   margin-top: 8px;
   display: flex;
   gap: 10px;
   flex-direction: row;
   padding: 12px 14px;
   /* border-radius: var(--radius-sm);
   background: rgba(255, 193, 7, 0.08);
   border: 1px solid rgba(255, 152, 0, 0.25); */
   color: var(--fg-text);
 }

 .infoData {
   display: flex;
   flex-direction: column;
 }

 .infoIcon {
   display: flex;
   flex-direction: column;
   text-align: center;
 }

 .social-container {
   text-align: center;
   width: -webkit-fill-available;
   margin: 20px 0;
   font-family: sans-serif;
   color: rgb(190, 190, 190)
 }

 /* -------- Utilities / micro-interactions -------- */
 a {
   color: var(--accent-1);
   text-decoration: none;
 }

 a:hover {
   color: var(--accent-2);
 }

 strong {
   color: var(--accent-1);
 }

 /* Fade-in on load */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .section,
 .hero,
 .quote,
 footer {
   animation: fadeUp var(--t-slow) ease both;
 }

 /* -------- Responsive -------- */
 @media (max-width: 980px) {

   .two-cols,
   .two-cols.reverse {
     grid-template-columns: 1fr;
   }

   .hero {
     min-height: clamp(240px, 50vw, 420px);
   }

   .footer_container {
     gap: 14px;
   }
 }

 @media (max-width: 560px) {
   :root {
     --radius: 14px;
     --radius-sm: 10px;

   }

   .social a {
     padding: 6px 10px;
   }

   .social-icons a {
     width: 38px;
     height: 38px;
     border-radius: 10px;
   }

   .quote::after {
     width: 60%;
   }
 }

 .footer_container {
   display: flex;
   color: white;
   flex-direction: row;
   justify-self: center;
   align-content: center;
   align-items: center;
 }

 .social-container {
   text-align: center;
   width: -webkit-fill-available;
   margin: 20px 0;
   font-family: sans-serif;
   color: white
 }

 .social-container-hor {
   display: flex;
   flex-direction: column;
   text-wrap: nowrap;
   font-size: 20px;
   color: white;
   border-right: ridge;
   padding-right: 40px;
 }