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

 .search_bar {
   width: 300px;
 }

 #huella {
   border: none;
   height: 40px;
   width: 150px;
   box-shadow: 0px 0px 0px 0px;
   translate: 70px;
   margin-bottom: 10px;
   margin-top: 5px;
   position: absolute;
   right: 0;
 }

 #sello {
   margin-left: 0px;
   display: flex;
   flex-direction: column;
   align-items: center;
   align-self: center;
 }

 #visionTxt {
   text-wrap: wrap;
   text-align: end;
   /* position: absolute; */
   right: 0;
   height: -webkit-fill-available;
   width: 320px;
   margin-right: -8px;
 }

 #quehacemos {
   width: max-content;
 }

 #quehacemoscont {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 #visionTitle {
   width: max-content;
   margin-right: 98px;
 }

 #quienessomosTxt {
   text-wrap: wrap;
   text-align: start;
   left: 0;
   height: -webkit-fill-available;
   width: 300px;
   margin-left: 46px;
 }

 #huella_inv {
   border: none;
   height: 46px;
   width: 149px;
   box-shadow: 0px 0px 0px 0px;
   translate: 40px;
   transform: scale(-1);
   margin-bottom: 10px;
 }

 #texto {
   width: 77%;
   display: flex;
   place-items: center;
   flex-direction: column;
   margin-left: 41px;
   flex-wrap: wrap;
   align-items: center;
 }


 /* -------- 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;
   font-size: var(--fs-body);
   line-height: 1.6;
   /* background: linear-gradient(180deg, #fff 0%, #fff8f0 100%); */
   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);
 }

 /* -------- Containers -------- */
 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;
 }

 /* -------- Typography -------- */
 h2,
 h3 {
   margin: 0 0 12px;
   font-family: Montserrat, Inter, system-ui, sans-serif;
   letter-spacing: 0.3px;
   background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 h2 {
   align-self: center;
   text-wrap: nowrap;
   font-size: 28px;
   font-weight: 700;
   justify-self: center;
   background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 h3 {
   font-size: 31px;
   margin-right: 80px;
   font-weight: 600;
   margin-left: 55px;
 }

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

 ul.list {
   list-style: none;
   padding: 0;
   margin: 12px 0 0;
   text-wrap: nowrap;
   width: auto;
 }

 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;
   height: 100%;
   margin-bottom: -150px;
   margin-top: -170px;
   flex-direction: column;
   justify-content: center;
 }

 #coberimg {
   width: max-content;
   height: 30%;
   margin-top: 20px;
   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;
 }

 #quienessomos {
   display: flex;
   flex-direction: row;
   margin-left: 100px;
 }

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

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

 .two-cols img {
   width: 90%;
   height: auto;
   margin-bottom: 20px;
   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;
 }

 #svg {
   display: none !important;
 }

 /* -------- Quote -------- */
 .quote {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 150px;
   /* padding: 120px 20px; */
   margin: 30px 0;
   overflow: hidden;

 }

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

 .quote p {
   position: relative;
   z-index: 1;
   margin: 0;
   width: max-content;
   text-wrap: nowrap;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.35;

   --angle: 0deg;
   /* background: linear-gradient(var(--angle), var(--warm-1), var(--warm-2), var(--warm-3));
   -webkit-background-clip: text;
   background-clip: text; */
   color: orange;

   /* 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: 5px;
   flex-direction: row;
   color: var(--fg-text);
 }

 .infoData {
   display: flex;
   flex-direction: column;
   font-size: 12px;
 }

 .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)
 }

 .social-icons {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 10px;
 }

 /* .social-icons a {
   color: rgb(190, 190, 190); 
   transition: transform 0.2s, color 0.2s;
   will-change: transform;
 } */

 .social-icons a:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 152, 0, 0.6);
 }

 .social-icons a:hover svg {
   filter: drop-shadow(0 0 10px rgba(255, 152, 0, 0.45));
 }

 /* -------- 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;
 }

 #Nuestrolocal_R {
   display: none;
 }

 #Nuestrolocal_L {
   display: inline;
 }

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

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

 #texto2 {
   width: 330px;
   text-align: end;
   margin-left: auto;
   margin-right: 101px;
 }

 #LocalFG {
   width: 60%;
   height: 70%;
   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;
 }

 #descLocalText {
   margin-left: 6px;
   text-align: start;
   font-size: 12px;
 }

 .social-container-hor {
   display: none;
 }