/* Landpage marca */

 html {
     font-size: 16px;
 }

 :root {
     --primary: #c8a46b;
     --primary-dark: #a6854d;
     --bg: #0b0b0b;
     --surface: #1a1a1a;
     --text: #ffffff;
     --text-dim: rgba(255, 255, 255, 0.7);
     --glass: rgba(255, 255, 255, 0.05);
     --glass-border: rgba(255, 255, 255, 0.1);
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: 'Outfit', sans-serif;
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
     overflow-x: hidden;
 }
a     {
     color: var(--primary);
     text-decoration: none;
     transition: color 0.3s ease;
 }                      
 /* UTILS */
 .container {
     max-width: 75rem;
     margin: 0 auto;
     padding: 0 1.25rem;
 }

 .impacto-home-logo {
     position: absolute;
     top: 32px;
     left: 32px;
     width: 150px;
     height: auto;
     z-index: 20;
     filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6));
 }

 /* HERO */
 .hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 7.5rem 1.25rem 5rem;
     overflow: hidden;
 }

 .hero-bg-container {
     position: absolute;
     inset: 0;
     z-index: -1;
 }

 .hero-bg-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.4;
     filter: brightness(0.6) contrast(1.1);
 }

 .hero-bg-container::after {
     content: '';
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 40%;
     background: linear-gradient(to top, var(--bg), transparent);
 }

 .hero-logo {
     width: 18.75rem;
     margin-bottom: 2.5rem;
     filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
 }

 .hero-content {
     max-width: 800px;
     position: relative;
     z-index: 10;
 }

 h1 {
     font-size: clamp(2.5rem, 8vw, 4rem);
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 20px;
     letter-spacing: -0.02em;
 }

 .subtitle {
     font-size: clamp(1.1rem, 3vw, 1.4rem);
     color: var(--text-dim);
     margin-bottom: 2.5rem;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 /* BOTONES */
 .cta-group {
     display: flex;
     gap: 15px;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 30px;
 }

 .cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 16px 32px;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s;
 }

 .cta.call {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
 }

 .cta.whatsapp:hover {
     background: #20bd5a;
 }

 .microcopy {
     font-size: 0.9rem;
     color: var(--text-dim);
     margin-top: 20px;
 }

 /* TRUST */
 .trust,
 .benefits {
     padding: 4rem 1.25rem;
 }

 .trust {
     background: var(--surface);
     border-top: 1px solid var(--glass-border);
     border-bottom: 1px solid var(--glass-border);
 }

 .trust-grid,
 .benefits-grid {
     display: grid;
     gap: 30px;
 }

 .trust-grid {
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 }

 /* BENEFITS */

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 40px;
 }

 .benefit-card {
     background: var(--glass);
     border: 1px solid var(--glass-border);
     padding: 40px;
     border-radius: 24px;
     transition: transform 0.3s ease;
 }

 .benefit-card:hover {
     transform: translateY(-10px);
     border-color: var(--primary);
 }

 .benefit-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
     color: var(--primary);
 }

 .benefit-card p {
     color: var(--text-dim);
 }

 /* ARAVACA - HERO AUTHORITY LAYER */

 .madrid-page .hero {
     position: relative;
 }

 .madrid-hero-authority {
     position: absolute;
     top: clamp(148px, 5vw, 58px);
     left: 50%;
     transform: translateX(-50%);
     z-index: 6;

     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px;

     width: min(980px, 90vw);
     padding: 18px 26px;

     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 999px;
     background: transparent;
     border: none;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     box-shadow: none;
 }

 .madrid-hero-authority span {
     color: #ffb876;
     font-size: clamp(.76rem, 1vw, .95rem);
     font-weight: 700;
     letter-spacing: .22em;
     text-transform: uppercase;

     text-shadow:
         0 0 12px rgba(255, 184, 118, .22),
         0 0 28px rgba(255, 184, 118, .10);

     opacity: .92;
     transition: all .3s ease;
 }

 .madrid-hero-authority span:hover {
     color: #ffd2a8;
     transform: translateY(-1px);
     text-shadow:
         0 0 18px rgba(255, 184, 118, .38),
         0 0 36px rgba(255, 184, 118, .18);
 }

 /* ARAVACA - BRANDS AUTHORITY SECTION */

 .madrid-page .brands {
     position: relative;
     padding: 7rem 1.25rem;
     text-align: center;
     overflow: hidden;
     background:
         radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 34%),
         linear-gradient(180deg, #090909 0%, #111 52%, #0b0b0b 100%);
     opacity: 1;
 }

 .madrid-page .brands::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
     opacity: .5;
     pointer-events: none;
 }

 .madrid-page .brands .container {
     position: relative;
     z-index: 2;
 }

 .madrid-page .brands-label {
     display: block;
     margin-bottom: 18px;
     text-transform: uppercase;
     letter-spacing: .32em;
     font-size: .82rem;
     color: rgba(200, 164, 107, .95);
 }

 .madrid-page .brands-title {
     max-width: 980px;
     margin: 0 auto 58px;
     font-size: clamp(2rem, 4.5vw, 3.4rem);
     line-height: 1.08;
     color: rgba(245, 245, 245, .92);
     text-shadow: 0 12px 40px rgba(0, 0, 0, .8);
 }

 .madrid-page .brands-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(200px, 1fr));
     gap: 20px;
     max-width: 850px;
     margin: 0 auto;
 }

 .madrid-page .brand-card {
     position: relative;
     min-height: 120px;
     padding: 24px 20px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, .06);
     background:
         radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .04), transparent 55%),
         linear-gradient(145deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005));

     box-shadow:
         0 15px 35px rgba(0, 0, 0, .25),
         inset 0 1px 0 rgba(255, 255, 255, .06);

     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);

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

 .madrid-page .brand-card:hover {
     transform: translateY(-5px);
     border-color: rgba(200, 164, 107, .4);
     box-shadow:
         0 20px 45px rgba(0, 0, 0, .4),
         0 0 30px rgba(200, 164, 107, .08),
         inset 0 1px 0 rgba(255, 255, 255, .15);
 }

 .madrid-page .brand-card img {
     display: block;
     width: auto;
     max-width: 150px;
     height: auto;
     max-height: 55px;
     object-fit: contain;

     mix-blend-mode: normal;
     filter:
         grayscale(1) brightness(2.4) contrast(.92) drop-shadow(0 0 12px rgba(255, 255, 255, .15));

     opacity: .75;
     transition: transform .35s ease, opacity .35s ease, filter .35s ease;
 }

 .madrid-page .brand-card:hover img {
     transform: scale(1.05);
     opacity: 1;
     filter:
         grayscale(1) brightness(3) contrast(1) drop-shadow(0 0 16px rgba(255, 255, 255, .25));
 }

 .madrid-page .brand-card img[src*="smeg"] {
     transform: scale(1.3);
 }

 .madrid-page .brand-card:hover img[src*="smeg"] {
     transform: scale(1.35);
 }

 /* MOBILE */

 @media (max-width: 900px) {
     .madrid-page .brands-grid {
         grid-template-columns: repeat(2, minmax(150px, 1fr));
     }
 }

 @media (max-width: 768px) {
     .madrid-hero-authority {
         top: 18px;
         width: calc(100% - 32px);
         border-radius: 24px;
         gap: 10px;
         padding: 14px 16px;
     }

     .madrid-hero-authority span {
         font-size: .66rem;
         letter-spacing: .12em;
     }

     .madrid-page .brands {
         padding: 4rem 1rem;
     }

     .madrid-page .brands-grid {
         gap: 12px;
     }

     .madrid-page .brand-card {
         min-height: 100px;
         padding: 16px;
         border-radius: 12px;
     }

     .madrid-page .brand-card img {
         width: auto;
         max-width: 120px;
         height: auto;
         max-height: 45px;
     }
 }

 /* móvil */

 @media (max-width: 768px) {

     .hero {
         min-height: auto;
         padding-top: 120px;
         /*  clave para mobile-first real */
         padding-bottom: 60px;
     }
 }

 /* FOCUS SECTION */

 .appliance-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
     gap: 40px;
     max-width: 1400px;
     margin: 0 auto;
 }

 .appliance-card:hover {
     transform: translateY(-15px) scale(1.02);
     border-color: #8b1538;
     box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
 }

 .appliance-img-container {
     height: 23.75rem;
     background: #000;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     position: relative;
 }

 .appliance-img-container::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 40%;
     background: linear-gradient(to top, var(--surface), transparent);
     z-index: 2;
 }

 .appliance-img-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1s ease;
     z-index: 1;
 }

 .appliance-card:hover .appliance-img-container img {
     transform: scale(1.1);
 }

 .appliance-info {
     padding: 2.8125rem;
     text-align: left;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .appliance-info h3 {
     font-size: 2rem;
     margin-bottom: 12px;
     color: var(--text);
     font-weight: 700;
 }

 .appliance-info p {
     color: var(--text-dim);
     margin-bottom: 35px;
     font-size: 1.1rem;
     line-height: 1.5;
 }

 .appliance-cta {
     align-self: flex-start;
     padding: 15px 35px;
     background: transparent;
     border: 2px solid #8b1538;
     color: #fff;
     text-decoration: none;
     border-radius: 50px;
     font-weight: 700;
     transition: all 0.3s ease;
     text-transform: uppercase;
     font-size: 0.9rem;
     letter-spacing: 0.15em;
 }

 .appliance-cta:hover {
     background: #8b1538;
     box-shadow: 0 15px 30px rgba(139, 21, 56, 0.3);
     transform: translateX(5px);
 }

 /* PAIN SECTION */
 .pain-section {
     padding: 7.5rem 1.25rem;
     background: radial-gradient(circle at center, #1a1a1a 0%, #0b0b0b 100%);
     text-align: center;
     border-top: 1px solid var(--glass-border);
 }

 .pain-section h2 {
     font-size: clamp(2rem, 5vw, 3rem);
     max-width: 900px;
     margin: 0 auto 15px;
     line-height: 1.2;
     color: var(--text);
 }

 .pain-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 30px;
     margin: 60px auto;
     max-width: 1240px;
 }

 .pain-card {
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid var(--glass-border);
     padding: 45px 35px;
     border-radius: 28px;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     position: relative;
     text-align: left;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .pain-card:hover {
     background: rgba(255, 255, 255, 0.04);
     border-color: rgba(200, 164, 107, 0.3);
     transform: translateY(-10px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
 }

 .pain-icon {
     width: 50px;
     height: 50px;
     color: #ff6b6b;
     /* Accent color for pain points */
     opacity: 0.8;
     transition: all 0.3s ease;
 }

 .pain-card:hover .pain-icon {
     color: var(--primary);
     transform: scale(1.1) rotate(-5deg);
     opacity: 1;
 }

 .pain-card h3 {
     font-size: 1.4rem;
     color: var(--text);
     font-weight: 600;
     margin: 0;
 }

 .pain-card p {
     color: var(--text-dim);
     font-size: 1.05rem;
     line-height: 1.5;
     margin: 0;
 }

 .pain-section .subtitle {
     margin-bottom: 0;
 }

 .pain-section .closing {
     font-size: 1.3rem;
     color: var(--text);
     margin: 40px auto;
     max-width: 700px;
     font-weight: 500;
     opacity: 0.9;
 }

 .pain-section .cta {
     background: var(--primary);
     color: black;
     padding: 20px 50px;
     border-radius: 50px;
     font-weight: 700;
     font-size: 1.1rem;
     text-decoration: none;
     display: inline-flex;
     transition: all 0.3s ease;
     box-shadow: 0 10px 30px rgba(200, 164, 107, 0.2);
 }

 .pain-section .cta:hover {
     transform: translateY(-3px) scale(1.02);
     background: #d4b584;
     box-shadow: 0 15px 40px rgba(200, 164, 107, 0.3);
 }

 /* FORM */
 .form-section {
     padding: 6.25rem 1.25rem;
     background: linear-gradient(to bottom, transparent, var(--surface));
 }

 .form-container {
     max-width: 600px;
     margin: 0 auto;
     background: var(--surface);
     padding: 50px;
     border-radius: 32px;
     border: 1px solid var(--glass-border);
     box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
 }


 @media (max-width: 768px) {
     .impacto-home-logo {
         top: 20px;
         left: 20px;
         width: 110px;
     }

     .brand-hero-logo {
         width: min(240px, 75vw);
     }
 }

 h2 {
     font-size: 2.2rem;
     margin-bottom: 30px;
     text-align: center;
 }

 .form-group {
     margin-bottom: 20px;
 }

 /* UNIFIED CONTACT SECTION */
 .unified-contact {
     display: flex;
     max-width: 1240px;
     margin: 80px auto;
     border-radius: 40px;
     overflow: hidden;
     background: rgba(26, 26, 26, 0.4);
     backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
 }

 .contact-info-panel {
     flex: 1;
     padding: 5rem 3.75rem;
     background: linear-gradient(135deg, rgba(200, 164, 107, 0.1) 0%, transparent 100%);
     border-right: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contact-form-panel {
     flex: 1;
     padding: 5rem 3.75rem;
     background: var(--surface);
 }

 .contact-header {
     margin-bottom: 2.5rem;
 }

 .contact-header h2 {
     font-size: 2.5rem;
     text-align: left;
     margin-bottom: 10px;
     line-height: 1.2;
 }

 .contact-header p {
     color: var(--text-dim);
     font-size: 1.1rem;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 20px;
     padding: 20px;
     background: var(--glass);
     border-radius: 24px;
     border: 1px solid var(--glass-border);
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     text-decoration: none;
     color: inherit;
 }

 .contact-item:hover {
     border-color: var(--primary);
     transform: translateX(10px);
     background: rgba(255, 255, 255, 0.05);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .contact-icon {
     width: 56px;
     height: 56px;
     background: var(--primary);
     color: black;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 16px;
     font-size: 1.5rem;
     flex-shrink: 0;
 }

 .contact-icon svg {
     width: 32px;
     height: 32px;
 }

 .contact-text h4 {
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     color: var(--primary);
     margin-bottom: 4px;
 }

 .contact-text p {
     font-size: 1.2rem;
     font-weight: 600;
 }

 .ops-center {
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid var(--glass-border);
 }

 .ops-center h3 {
     font-size: 1.2rem;
     margin-bottom: 20px;
     color: var(--text);
     font-weight: 600;
 }

 .ops-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
 }

 .ops-tag {
     font-size: 0.85rem;
     background: var(--glass);
     border-radius: 10px;
     text-align: center;
     border: 1px solid var(--glass-border);
     transition: all 0.3s ease;
     overflow: hidden;
 }

 .ops-tag a {
     display: block;
     padding: 10px 15px;
     color: var(--text-dim);
     text-decoration: none;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .ops-tag:hover {
     border-color: var(--primary);
     background: rgba(200, 164, 107, 0.05);
     transform: translateY(-2px);
 }

 .ops-tag:hover a {
     color: var(--primary);
 }

 .security-badge {
     margin-top: 40px;
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 20px;
     background: rgba(200, 164, 107, 0.05);
     border: 1px solid rgba(200, 164, 107, 0.2);
     border-radius: 20px;
 }

 .security-badge span {
     color: var(--primary);
     font-size: 1.8rem;
 }

 .security-badge p {
     font-size: 0.95rem;
     font-weight: 500;
     line-height: 1.4;
 }

 /* FORM STYLES */
 .contact-form-panel h2 {
     font-size: 2rem;
     margin-bottom: 35px;
     text-align: left;
 }

 form input,
 form textarea {
     width: 100%;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: 18px;
     color: white;
     font-family: inherit;
     font-size: 1rem;
     transition: all 0.3s ease;
     margin-bottom: 20px;
 }

 form input:focus,
 form textarea:focus {
     outline: none;
     border-color: var(--primary);
     background: rgba(255, 255, 255, 0.07);
     box-shadow: 0 0 0 4px rgba(200, 164, 107, 0.1);
 }

 form textarea {
     height: 140px;
     resize: vertical;
 }

 .submit-btn {
     width: 100%;
     padding: 20px;
     background: var(--primary);
     color: black;
     border: none;
     border-radius: 16px;
     font-weight: 700;
     font-size: 1.1rem;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     margin-top: 10px;
     box-shadow: 0 10px 20px rgba(200, 164, 107, 0.2);
 }

 .submit-btn:hover {
     background: #d4b584;
     transform: translateY(-3px);
     box-shadow: 0 15px 30px rgba(200, 164, 107, 0.3);
 }

 .submit-btn:active {
     transform: translateY(-1px);
 }

 @media (max-width: 968px) {
     .unified-contact {
         flex-direction: column;
         margin: 40px 20px;
         border-radius: 30px;
     }

     .contact-info-panel,
     .contact-form-panel {
         padding: 50px 30px;
     }

     .contact-info-panel {
         border-right: none;
         border-bottom: 1px solid var(--glass-border);
     }

     .contact-header h2 {
         font-size: 2rem;
     }

     .ops-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* FLOATING CTA */

 .floating-cta {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 9999;
 }

 .float-btn {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: 24px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s ease;
     position: relative;
     color: white;
 }

 @media (max-width: 768px) {

     /* oculta el texto flotante en móvil */
     .float-label {
         display: none;
     }

     /*  círculos un poco más pequeños en móvil */
     .float-btn {
         width: 52px;
         height: 52px;
     }

     /* deja más margen */
     .floating-cta {
         bottom: 16px;
         right: 16px;
     }

 }

 .float-btn svg {
     width: 28px;
     height: 28px;
 }

 .float-btn {
     animation: floatPulse 2.5s infinite;
 }

 @keyframes floatPulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.08);
     }

     100% {
         transform: scale(1);
     }
 }

 .float-btn:hover {
     transform: scale(1.1);
 }

 .float-btn.call-btn {
     background: var(--primary);
 }

 .float-btn.wa-btn {
     background: #25D366;
 }

 .float-label {
     position: absolute;
     right: 75px;
     background: white;
     color: black;
     padding: 8px 16px;
     border-radius: 10px;
     font-size: 0.9rem;
     font-weight: 600;
     white-space: nowrap;
     opacity: 0;
     transform: translateX(10px);
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .float-btn:hover .float-label {
     opacity: 1;
     transform: translateX(0);
 }

 @media (max-width: 768px) {
     .hero {
         padding-top: 80px;
     }

     .form-container {
         padding: 30px;
     }

     .floating-cta {
         bottom: 20px;
         right: 20px;
     }

     .cta {
         width: 100%;
     }

     .footer-container {
         flex-direction: column;
         text-align: center;
         gap: 60px;
     }

     .footer-col h2 {
         text-align: center;
     }
 }
.footer-bottom {
    margin-top: 10px;
    text-align: ;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid var(--glass-border);
}
 .cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 16px 32px;
     text-decoration: none;
     font-weight: 600;
     border-radius: 50px;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     font-size: 1.05rem;
     cursor: pointer;
 }

 .cta.primary {
     background: var(--primary);
     color: black;
     box-shadow: 0 10px 20px rgba(200, 164, 107, 0.2);
 }

 .cta.primary:hover {
     transform: translateY(-3px);
     background: #d4b584;
     box-shadow: 0 15px 30px rgba(200, 164, 107, 0.3);
 }

 .cta.call {
     background: rgba(255, 255, 255, 0.1);
     color: white;
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
 }

 .cta.call:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .cta.whatsapp {
     background: #25D366;
     color: white;
 }

 /* TRUST */
 .trust {
     padding: 3.75rem 1.25rem;
     background: var(--surface);
     border-top: 1px solid var(--glass-border);
     border-bottom: 1px solid var(--glass-border);
 }

 .trust-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:3rem;
    align-items:center;
}

@media (max-width:992px){
    .trust-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:576px){
    .trust-grid{
        grid-template-columns:1fr;
    }
}

 .trust-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    height:100%;
}

.trust-item p,
.trust-item span+*{
    margin:0;
}

 .trust-item span {
     color: var(--primary);
     font-size: 1.4rem;
 }

 h2 {
     font-size: 2.2rem;
     margin-bottom: 30px;
     text-align: center;
 }

 footer {
     background: #000;
     color: #fff;
     padding: 5rem 1.25rem 7.5rem;
     border-top: 1px solid var(--glass-border);
 }

 .footer-container {
     max-width: 75rem;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     gap: 40px;
 }

 .footer-col {
     flex: 1;
     text-align: center;
 }

 .footer-logo-col img {
     width: 180px;
     margin-bottom: 20px;
 }

 .footer-col h2 {
     font-size: 1.2rem;
     color: var(--primary);
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
 }

 .footer-col h4 {
     font-size: 0.9rem;
     color: var(--text-dim);
     margin-bottom: 8px;
     text-transform: uppercase;
 }

 .footer-col p {
     font-size: 1.1rem;
     color: var(--text);
     margin-bottom: 10px;
 }
.footer-legal a{
    color:rgba(255,255,255,.75);
    font-weight:500;
    letter-spacing:.02em;
}

.footer-legal a:hover{
    color:#c8a46b;
}
.footer-legal ul,
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-legal li,
.footer-links li {
    margin-bottom: 10px;
}
.developer{
    margin-top:12px;
    font-size:.85rem;
    color:rgba(255,255,255,.45);
}

.developer strong{
    color:#c8a46b;
    font-weight:600;
}
 /* UNIFIED CONTACT SECTION */
 .unified-contact {
     display: flex;
     max-width: 1240px;
     margin: 80px auto;
     background: rgba(26, 26, 26, 0.4);
     backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     border-radius: 40px;
     overflow: hidden;
     box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
     position: relative;
     z-index: 10;
 }
 }

 /* FLOATING CTA */
 .floating-cta {
     position: fixed;
     bottom: 30px;
     right: 30px;
     display: flex;
     flex-direction: column;
     gap: 15px;
     z-index: 999;
     ;
 }

 .float-btn svg {
     width: 28px;
     height: 28px;
 }

 .floating-buttons {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
 }

 .float-btn:hover {
     transform: scale(1.1);
 }

 /* land index */
 html {
     font-size: 16px;
 }

 html {
     font-size: 16px;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: #0e0e0e;
     color: #f5f5f5;
     line-height: 1.6;
 }

 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
     padding: 1.25rem;
 }

 .hero .hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     z-index: -1;
     filter: brightness(0.5);
 }

 .hero-logo {
     position: absolute;
     top: 4.5rem;
     height: 5rem;
     z-index: 10;
 }

 .cta-primary {
     background: #c8a46b;
     color: #000;
     padding: 0.875rem 1.75rem;
     font-weight: 600;
     border-radius: 0.25rem;
     display: inline-block;
 }

 .microcopy {
     margin-top: 0.625rem;
     font-size: 0.9rem;
     opacity: 0.8;
 }

 h1 {
     font-size: 2.5rem;

 }

 p {
     font-size: 1.2rem;
 }

 .container {
     max-width: 75rem;
     margin: 0 auto;
     padding: 2.5rem 1.25rem;
     width: 100%;
     box-sizing: border-box;
 }

 .container-hero {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     max-width: 50rem;
 }

 main {
     inline-size: 100%;
     height: auto;
 }

 .section {
     padding: 3.75rem 8%;
 }

 main section {
     inline-size: 100%;
     height: auto;
     margin-bottom: 2rem;
 }

 .main-Img {
     inline-size: 50%;
     height: auto;
     object-fit: cover;
 }

 main img {
     inline-size: 100%;
     height: auto;
     object-fit: cover;
 }

 .mainContent {
     font-family: sans-serif;
     font-size: 1.2rem;
     line-height: 1.6em;
     padding: 0 5%;
 }

 .mainContent span {
     font-size: 1.2rem;
     font-weight: bold;
     color: #c89b5e;
 }

 h2 {
     font-family: 'Playfair Display', serif;
     font-size: 2rem;
     margin-bottom: 1.875rem;
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.5625rem;
 }

 .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3.75rem;
     align-items: center;
 }

 @media (max-width: 768px) {
     .grid-2 {
         grid-template-columns: 1fr;
         gap: 1.875rem;
     }
 }

 @media (max-width: 768px) {

     .floating-cta {
         bottom: 15px;
         right: 15px;
         gap: 10px;
     }

     .float-btn {
         width: 55px;
         height: 55px;
     }

     .float-btn svg {
         width: 24px;
         height: 24px;
     }

     /*  ocultar texto flotante en móvil */
     .float-label {
         display: none;
     }
 }

 .visualBlock {
     height: 25rem;
     background-color: #1a1a1a;
     border-radius: 1.25rem;
     overflow: hidden;
     border: 1px solid rgba(212, 175, 55, 0.2);
     box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4);
     position: relative;
 }

 .visualBlock img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s ease;
 }

 .visualBlock:hover img {
     transform: scale(1.05);
 }

 /* ZONAS */
 .card-zone {
     position: relative;
     height: 17.5rem;
     border-radius: 1.125rem;
     overflow: hidden;
     cursor: pointer;
 }

 .card-zone img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s;
 }

 .card-zone:hover img {
     transform: scale(1.08);
 }

 .card {
     transition: all 0.3s ease;
 }

 .card:hover {
     transform: translateY(-0.375rem);
     box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4);
 }

 .brand-card {
     padding: 1.875rem;
     text-align: center;
     transition: 0.3s;
 }

 .brand-card:hover {
     border: 1px solid #c8a46b;
     transform: scale(1.05);
 }

 .overlay {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding: 1.25rem;
     background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
 }

 .overlay h3 {
     margin: 0;
     font-size: 1.25rem;
 }

 .overlay p {
     font-size: 0.8125rem;
     opacity: 0.8;
 }

 /* MARCAS */
 .card-brand {
     background: #1a1a1a;
     border-radius: 1.125rem;
     padding: 1.875rem;
     text-align: center;
     transition: 0.3s;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .card-brand:hover {
     transform: translateY(-5px);
     border: 1px solid rgba(212, 175, 55, 0.5);
 }

 .brand-logo {
     font-size: 1.75rem;
     margin-bottom: 0.9375rem;
     color: #d4af37;
 }

 .card-brand h4 {
     margin: 0.625rem 0 0.3125rem;
 }

 .card-brand p {
     font-size: 0.8125rem;
     opacity: 0.7;
 }

 .logo-marcas img {
     transition: all 0.3s ease;
     width: 70%;
     height: auto;
     object-fit: cover;
 }

 .logo-marcas img:hover {
     transform: scale(1.05);
 }

 /* BENEFICIOS */
 .card-benefit {
     padding: 1.5625rem;
     border-left: 0.125rem solid #d4af37;
 }

 .number {
     font-size: 1.75rem;
     color: #d4af37;
     font-family: 'Playfair Display', serif;
 }

 /*  Mapa de Cobertura*/
 .cobertura {
     width: 90%;
     max-width: 93.75rem;
     background: #1a1a1a;
     border-radius: 1.125rem;
     padding: 1.875rem;
     text-align: left;
     transition: 0.3s;
     border: 1px solid rgba(255, 255, 255, 0.05);
     background-image: url('images/Madrid.svg') !important;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 }

 /* CTA */

 .cta {
     background: #c89b5e;
     color: #fff;
     padding: 0.9375rem 1.875rem;
     text-decoration: none;
 }

 .cta button {
     background: #d4af37;
     border: none;
     padding: 0.9375rem 1.875rem;
     border-radius: 0.5rem;
     cursor: pointer;
     font-weight: 500;
 }

 footer {
     background: #000;
     color: #fff;
     padding: 5rem 1.25rem 7.5rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-container {
     max-width: 75rem;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     gap: 2.5rem;
 }

 .footer-logo-col img {
     width: 11.25rem;
     margin-bottom: 1.25rem;
 }

 .footer-col h2 {
     font-size: 1.2rem;
     color: #c8a46b;
     margin-bottom: 1.25rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
 }

 .footer-col h4 {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 0.5rem;
     text-transform: uppercase;
 }

 .footer-col p {
     font-size: 1.1rem;
     color: #fff;
     margin-bottom: 0.625rem;
 }

 .form-contact {
     display: flex;
     justify-content: center;
     align-items: stretch;
     background: #111;
     max-width: 75rem;
     margin: 5rem auto;
     border-radius: 1.25rem;
     overflow: hidden;
     border: 1px solid rgba(212, 175, 55, 0.3);
     box-shadow: 0 2.5rem 6.25rem rgba(0, 0, 0, 0.6);
     position: relative;
 }

 /* Subtle glow for the unified card */
 .form-contact::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
     pointer-events: none;
 }

 .left-contact {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 3.75rem;
     background: linear-gradient(135deg, #161616 0%, #0a0a0a 100%);
     border-right: 1px solid rgba(212, 175, 55, 0.1);
 }

 .left-contact ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .left-contact .cta {
     background: #111;
     color: #fff;
     padding: 0.9375rem 1.875rem;
     text-decoration: none;
 }

 .left-contact .cta ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .left-contact .cta ul li {
     padding: 0.9375rem 1.875rem;
     text-decoration: none;
 }

 .contact {
     flex: 1;
     padding: 3.75rem;
     background: #111;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .contact p {
     text-align: center;
 }

 form input,
 form textarea {
     width: 100%;
     padding: 0.75rem;
     margin-bottom: 0.625rem;
     border: 1px solid #ccc;
     border-radius: 0.5rem;
 }

 form button {
     background: #c89b5e;
     color: #fff;
     border: none;
     padding: 0.75rem;
     width: 100%;
 }

 /* Estilos Urgencia */
 .urgency {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: 0.9375rem;
     margin: 1.5625rem 0;
     width: 100%;
     border-top: 1px solid rgba(212, 175, 55, 0.1);
     padding-top: 1.25rem;
 }

 .urgency-item {
     display: flex;
     align-items: center;
     gap: 0.625rem;
     font-size: 0.8rem;
     color: #ffffff;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.0625rem;
 }

 .check-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 0.875rem;
     height: 0.875rem;
     border: 1px solid #eae9e4;
     border-radius: 0.125rem;
     color: #d4af37;
     font-size: 1.25rem;
     /* El símbolo sobresale del cuadro */
     position: relative;
     background: rgba(212, 175, 55, 0.1);
     line-height: 0;
     transition: all 0.3s ease;
     text-shadow: 0 0 0.3125rem rgba(212, 175, 55, 0.4);
 }

 .urgency-item:hover .check-box {
     transform: scale(1.1);
     background: rgba(212, 175, 55, 0.2);
 }

 @media screen and (max-width: 64rem) {
     .form-contact {
         margin: 2.5rem 1.25rem;
     }

     .left-contact,
     .contact {
         padding: 2.5rem;
     }
 }

 @media screen and (max-width: 48rem) {
     .hero {
         min-height: 60vh;
         padding-top: 6.25rem;
     }

     .hero .hero-bg {
         object-position: 70% center;
         /* Adjust to show focal point of hero.svg */
     }

     h1 {
         font-size: 1.6rem;
         padding: 0 0.9375rem;
     }

     .grid-2 {
         grid-template-columns: 1fr;
         gap: 2.5rem;
     }

     .visualBlock {
         height: 18.75rem;
         order: -1;
         /* Show image BEFORE text on mobile */
     }

     .form-contact {
         flex-direction: column;
         margin: 2.5rem 0.9375rem;
     }

     .left-contact {
         border-right: none;
         border-bottom: 1px solid rgba(212, 175, 55, 0.1);
         padding: 2.5rem 1.25rem;
         text-align: center;
     }

     .contact {
         padding: 2.5rem 1.25rem;
     }

     footer {
         padding: 3.75rem 1.25rem 6.25rem;
     }

     .footer-container {
         flex-direction: column;
         text-align: center;
         gap: 3.75rem;
     }

     .urgency {
         flex-direction: column;
         gap: 1.25rem;
         align-items: center;
     }
 }

 /* FLOATING CTA */
 .floating-cta {
     position: fixed;
     bottom: 1.875rem;
     right: 1.875rem;
     display: flex;
     flex-direction: column;
     gap: 0.9375rem;
     z-index: 999;
 }

 .float-btn {
     width: 3.75rem;
     height: 3.75rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     font-size: 1.5rem;
     box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.3);
     transition: transform 0.3s ease;
     position: relative;
     color: white;
 }

 .float-btn svg {
     width: 1.75rem;
     height: 1.75rem;
 }

 ia (max-width: 768px) {

     .floating-cta {
         bottom: 15px;
         right: 15px;
         gap: 10px;
     }
 }

 .float-label {
     position: absolute;
     right: 4.6875rem;
     background: white;
     color: black;
     padding: 0.5rem 1rem;
     border-radius: 0.625rem;
     font-size: 0.9rem;
     font-weight: 600;
     white-space: nowrap;
     opacity: 0;
     transform: translateX(0.625rem);
     transition: all 0.3s ease;
     pointer-events: none;
 }

 @media (max-width: 48rem) {
     .hero {
         padding-top: 5rem;
     }

     .form-container {
         padding: 1.875rem;
     }

     .floating-cta {
         bottom: 1.25rem;
         right: 1.25rem;
     }
 }

 /* === Ajuste premium hero gaggenau 
 / Impacto Home === */
 .hero {
     isolation: isolate;
     padding-top: clamp(9rem, 14vw, 12rem);
 }

 .hero-bg-container {
     z-index: -2;
 }

 .hero-bg-container img {
     opacity: 0.34;
     filter: brightness(0.54) contrast(1.12) saturate(0.9);
 }

 .hero-bg-container::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         radial-gradient(circle at 50% 18%, rgba(200, 164, 107, 0.20), transparent 34%),
         linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(11, 11, 11, 0.12) 42%, rgba(11, 11, 11, 0.88) 100%);
     z-index: 1;
     pointer-events: none;
 }

 .hero-bg-container::after {
     z-index: 2;
 }

 .impacto-home-logo {
     position: absolute;
     top: clamp(1.25rem, 3vw, 2rem);
     left: clamp(1.25rem, 3vw, 2rem);
     width: clamp(7.5rem, 12vw, 10rem);
     height: auto;
     z-index: 30;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.55rem 0.7rem;
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 1.15rem;
     background: rgba(0, 0, 0, 0.26);
     backdrop-filter: blur(14px);
     box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.35);
 }

 .impacto-home-logo img {
     width: 100%;
     height: auto;
     display: block;
     filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.6));
 }

 @media (max-width: 768px) {
     .hero {
         min-height: auto;
         padding-top: 7rem;
         padding-bottom: 3.75rem;
     }

     h1 {
         font-size: clamp(2rem, 8vw, 2.65rem);
     }

     .subtitle {
         font-size: 1.08rem;
         margin-bottom: 1.8rem;
     }
 }

 @media (max-width: 768px) {
     .hero {
         padding-top: 8.5rem;
     }

     .impacto-home-logo {
         width: 7rem;
         border-radius: 0.95rem;
     }

 }

 .floating-cta {
     position: fixed !important;
     right: 22px;
     bottom: 22px;
     z-index: 99999;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .float-btn {
     width: 58px;
     height: 58px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-decoration: none;
     box-shadow: 0 14px 35px rgba(0, 0, 0, .45);
     transition: transform .25s ease, box-shadow .25s ease;
     animation: premiumPulse 2.4s infinite;
 }

 .float-btn svg {
     width: 30px;
     height: 30px;
     display: block;
 }

 .float-btn:hover {
     transform: translateY(-3px) scale(1.08);
     box-shadow: 0 18px 45px rgba(0, 0, 0, .6);
 }

 .float-btn.call-btn {
     background: linear-gradient(135deg, #c8a46b, #a6854d);
 }

 .float-btn.wa-btn {
     background: linear-gradient(135deg, #25D366, #128C7E);
 }

 .float-label {
     position: absolute;
     right: 72px;
     background: #fff;
     color: #111;
     padding: 8px 14px;
     border-radius: 999px;
     font-size: .85rem;
     font-weight: 700;
     white-space: nowrap;
     opacity: 0;
     transform: translateX(8px);
     pointer-events: none;
     transition: all .25s ease;
 }

 @keyframes premiumPulse {
     0% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, .35), 0 14px 35px rgba(0, 0, 0, .45);
     }

     70% {
         box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 14px 35px rgba(0, 0, 0, .45);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 14px 35px rgba(0, 0, 0, .45);
     }
 }

 @media (max-width: 768px) {
     .floating-cta {
         right: 16px;
         bottom: 16px;
     }

     .float-btn {
         width: 54px;
         height: 54px;
     }

     .float-label {
         display: none;
     }
 }

 @media (max-width: 768px) {

     .container {
         padding-left: 20px;
         padding-right: 20px;
         /*  más aire lateral */
     }

     .hero,
     .benefits,
     .pain-section,
     .trust {
         padding-left: 20px;
         padding-right: 20px;
     }

 }

 @media (max-width: 768px) {

     .hero-content,
     .appliance-grid,
     .pain-grid {
         padding-right: 5px;
     }

 }

 .brand-hero-logo {
     padding: 6px 12px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
     background: rgba(255, 255, 255, 0.03);
 }

 @media (max-width: 768px) {

     .brand-card img {
         max-width: 135px;
         max-height: 50px;
     }

     .brand-card {
         min-height: 100px;
         padding: 22px 16px;
     }
 }
/* Impacto Home Logo Centered Modifier */
.impacto-home-logo.centered {
    left: 50%;
    transform: translateX(-50%);
}

/* Brand Hero Logo Styles extracted from gaggenau 
.html */
.brand-hero-brand {
    position: relative;
    width: min(24rem, 82vw);
    margin: 0 auto 2rem;
    padding: clamp(1rem, 3vw, 1.6rem) clamp(1.2rem, 4vw, 2.2rem);
    border-radius: 1.8rem;
    border: 1px solid rgba(200, 164, 107, 0.32);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 232, 185, 0.20), transparent 58%),
        radial-gradient(circle at 15% 50%, rgba(200, 164, 107, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018));
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.58),
        0 0 70px rgba(200, 164, 107, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(200, 164, 107, 0.12);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    overflow: hidden;
}

.brand-hero-brand::before {
    content: "";
    position: absolute;
    inset: 0.45rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    pointer-events: none;
}

.brand-hero-brand::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -30%;
    width: 70%;
    height: 190%;
    background: linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.16) 48%,
            transparent 72%);
    transform: rotate(10deg);
    opacity: 0.28;
    pointer-events: none;
}

.brand-hero-logo-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 120px;
    filter:
        brightness(1.18) contrast(1.08) drop-shadow(0 0 14px rgba(255, 255, 255, 0.10)) drop-shadow(0 0 30px rgba(200, 164, 107, 0.26));
}

.brand-light {
    position: absolute;
    top: 50%;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: rgba(200, 164, 107, 0.18);
    filter: blur(2rem);
    transform: translateY(-50%);
    pointer-events: none;
}

.brand-light-left {
    left: -2.8rem;
}

.brand-light-right {
    right: -2.8rem;
}

@media (max-width: 768px) {
    .brand-hero-brand {
        width: min(19rem, 84vw);
        margin-bottom: 1.5rem;
        border-radius: 1.45rem;
    }
}

/* ==========================================
   GENERALIZED BRAND STYLES (FROM INLINE)
   ========================================== */
.brand-focus {
    padding: 1.5rem 1.25rem;
    background: radial-gradient(circle at center, #121212 0%, #0b0b0b 100%);
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}

.brand-header {
    margin-bottom: 4.375rem;
}

.brand-main-logo {
    width: min(320px, 80vw);
    height: auto;
    margin-bottom: 25px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(139, 21, 56, 0.2));
}

.brand-tagline {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 600;
    opacity: 0.8;
}

.brand-hero-brand {
    position: relative;
    width: min(24rem, 82vw);
    margin: 0 auto 2rem;
    padding: clamp(1rem, 3vw, 1.6rem) clamp(1.2rem, 4vw, 2.2rem);
    border-radius: 1.8rem;
    border: 1px solid rgba(200, 164, 107, 0.32);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 232, 185, 0.20), transparent 58%),
        radial-gradient(circle at 15% 50%, rgba(200, 164, 107, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018));
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.58),
        0 0 70px rgba(200, 164, 107, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(200, 164, 107, 0.12);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    overflow: hidden;
}

.brand-hero-brand::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.brand-hero-brand::after {
    content: "";
    position: absolute;
    top: -45%;
    left: -30%;
    width: 70%;
    height: 190%;
    background: linear-gradient(115deg,
            transparent 20%,
            rgba(255, 255, 255, 0.16) 48%,
            transparent 72%);
    transform: rotate(10deg);
    opacity: 0.28;
    pointer-events: none;
}

.brand-hero-logo {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter:
        brightness(1.15) contrast(1.06) drop-shadow(0 0 0.9rem rgba(255, 255, 255, 0.08)) drop-shadow(0 0 1.8rem rgba(200, 164, 107, 0.22));
}

.brand-light {
    position: absolute;
    top: 50%;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: rgba(200, 164, 107, 0.17);
    filter: blur(2rem);
    transform: translateY(-50%);
    pointer-events: none;
}

.brand-light-left {
    left: -2.5rem;
}

.brand-light-right {
    right: -2.5rem;
}

@media (max-width: 768px) {
    .brand-hero-brand {
        width: min(19rem, 84vw);
        margin-bottom: 1.5rem;
        border-radius: 1.45rem;
    }
}