/* ============================================================
   AUDIX.CL — REFINEMENTS LAYER
   Sobreescribe styles.css con polish visual + mobile fine-tuning
   Importar DESPUÉS de styles.css para que tome precedencia
   ============================================================ */

/* ---- SVG illustration system (replace emoji placeholders) ---- */
.svg-bg {
  position: relative;
  overflow: hidden;
}
.svg-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18) 0, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.08) 0, transparent 25%);
  pointer-events: none;
}
.svg-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><circle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.15)'/><circle cx='40' cy='40' r='1.5' fill='rgba(255,255,255,0.12)'/><circle cx='70' cy='15' r='1' fill='rgba(255,255,255,0.15)'/><circle cx='20' cy='65' r='1.5' fill='rgba(255,255,255,0.12)'/><circle cx='60' cy='70' r='1' fill='rgba(255,255,255,0.15)'/></svg>");
  pointer-events: none;
  opacity: 0.6;
}

/* Decorative ear waveform SVG used as hero illustration */
.illu-waveform {
  position: relative;
  background: linear-gradient(135deg, var(--audix-coral) 0%, var(--audix-coral-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.illu-waveform::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' fill='none'><path d='M200 80c50 0 90 40 90 90 0 35-20 60-50 80-15 10-25 25-25 45 0 25 20 45 45 45' stroke='rgba(255,255,255,0.15)' stroke-width='3' stroke-linecap='round'/><circle cx='200' cy='170' r='12' fill='rgba(255,255,255,0.2)'/><path d='M120 250c0-20 10-30 30-30M280 250c0-20-10-30-30-30M150 320c10-20 30-25 50-25M250 320c-10-20-30-25-50-25' stroke='rgba(255,255,255,0.2)' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-size: cover;
  background-position: center;
}
.illu-waveform .play-btn,
.illu-waveform .caption {
  position: relative;
  z-index: 2;
}

/* Audífono shape illustration */
.illu-aid {
  background: linear-gradient(135deg, var(--audix-blue-light), var(--white));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-aid::before {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none'><path d='M100 30c-40 0-65 30-65 70 0 25 12 45 12 65 0 25 18 45 50 45 28 0 50-18 50-50 0-15-10-25-10-50 0-30-15-50-25-60-2-3-7-5-12-5z' fill='%234A3D33' opacity='0.8'/><circle cx='100' cy='95' r='10' fill='%23E26B4B'/><circle cx='100' cy='95' r='5' fill='%23FFC72C'/><path d='M100 130v50' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Doctor/HCP illustration */
.illu-doctor {
  background: linear-gradient(135deg, var(--audix-coral-light), var(--audix-coral));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-doctor::before {
  content: '';
  position: absolute;
  inset: 15%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><circle cx='100' cy='70' r='28' fill='%23FFFFFF' opacity='0.9'/><path d='M50 175c0-28 22-50 50-50s50 22 50 50' fill='%23FFFFFF' opacity='0.9'/><path d='M85 165v15M115 165v15' stroke='%232A1F19' stroke-width='2'/><circle cx='90' cy='65' r='2' fill='%232A1F19'/><circle cx='110' cy='65' r='2' fill='%232A1F19'/><path d='M92 80c2 4 6 6 8 6s6-2 8-6' stroke='%232A1F19' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Family illustration */
.illu-family {
  background: linear-gradient(135deg, var(--audix-blue-deep), var(--audix-blue));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
}
.illu-family::before {
  content: '';
  position: absolute;
  inset: 20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none'><circle cx='80' cy='60' r='22' fill='%23FFC72C' opacity='0.85'/><circle cx='160' cy='60' r='22' fill='%23E26B4B' opacity='0.85'/><circle cx='120' cy='110' r='16' fill='%23FFFFFF' opacity='0.9'/><path d='M40 175c0-22 18-40 40-40s40 18 40 40M120 175c0-22 18-40 40-40s40 18 40 40M85 175c0-15 16-30 35-30s35 15 35 30' fill='%23FFFFFF' opacity='0.7'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Map illustration */
.illu-map {
  background: linear-gradient(135deg, #FAEDE3, var(--audix-coral-light));
  position: relative;
  overflow: hidden;
}
.illu-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' fill='none'><path d='M50 100 Q 200 80 350 120 T 700 100 L 750 200 L 700 350 Q 500 400 350 380 T 100 400 L 50 300 Z' fill='rgba(42,31,25,0.06)' stroke='rgba(42,31,25,0.15)' stroke-width='1.5'/><path d='M150 200 L 250 180 L 350 220 L 500 200 L 600 240' stroke='rgba(226,107,75,0.4)' stroke-width='2' stroke-dasharray='4 4' fill='none'/><path d='M180 330 L 280 310 L 380 340 L 530 320' stroke='rgba(42,31,25,0.25)' stroke-width='2' stroke-dasharray='3 5' fill='none'/></svg>");
  background-size: cover;
  background-position: center;
}
.illu-map > * {
  position: relative;
  z-index: 2;
}

/* Tech / smartphone illustration */
.illu-phone {
  background: linear-gradient(160deg, #1a1a1a, #2a2a2a);
  border-radius: 36px;
  border: 8px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-phone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 480' fill='none'><circle cx='120' cy='120' r='40' fill='rgba(255,199,44,0.3)'/><circle cx='120' cy='120' r='20' fill='rgba(255,199,44,0.6)'/><circle cx='120' cy='120' r='8' fill='%23FFC72C'/><path d='M60 250 Q 90 240 120 250 T 180 250' stroke='rgba(255,255,255,0.3)' stroke-width='3' fill='none'/><path d='M40 280 Q 90 265 120 280 T 200 280' stroke='rgba(255,255,255,0.2)' stroke-width='3' fill='none'/><path d='M20 310 Q 90 290 120 310 T 220 310' stroke='rgba(255,255,255,0.15)' stroke-width='3' fill='none'/><rect x='80' y='380' width='80' height='12' rx='6' fill='rgba(255,255,255,0.4)'/><rect x='100' y='400' width='40' height='8' rx='4' fill='rgba(255,255,255,0.2)'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Consultation illustration */
.illu-consult {
  background: linear-gradient(135deg, var(--audix-blue-light), var(--audix-coral-light));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-consult::before {
  content: '';
  position: absolute;
  inset: 10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 240' fill='none'><circle cx='90' cy='80' r='26' fill='%23E26B4B' opacity='0.85'/><path d='M40 180c0-28 22-50 50-50s50 22 50 50' fill='%23E26B4B' opacity='0.85'/><circle cx='210' cy='75' r='28' fill='%232A1F19' opacity='0.9'/><path d='M155 180c0-31 25-55 55-55s55 25 55 55' fill='%232A1F19' opacity='0.9'/><rect x='130' y='100' width='40' height='30' rx='4' fill='%23FFFFFF' opacity='0.9'/><circle cx='150' cy='115' r='8' fill='%23FFC72C'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Wave / sound visualization */
.illu-sound {
  background: linear-gradient(135deg, var(--audix-coral) 0%, var(--audix-blue-deep) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-sound::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none'><path d='M40 150 Q 80 50 120 150 T 200 150 T 280 150 T 360 150' stroke='rgba(255,255,255,0.25)' stroke-width='3' fill='none'/><path d='M40 150 Q 80 80 120 150 T 200 150 T 280 150 T 360 150' stroke='rgba(255,255,255,0.4)' stroke-width='4' fill='none'/><path d='M40 150 Q 80 110 120 150 T 200 150 T 280 150 T 360 150' stroke='rgba(255,255,255,0.6)' stroke-width='5' fill='none'/></svg>");
  background-size: cover;
  background-position: center;
}

/* Ear shape */
.illu-ear {
  background: linear-gradient(135deg, var(--yellow-soft), var(--interton-yellow));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-ear::before {
  content: '';
  position: absolute;
  inset: 20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none'><path d='M100 25c-30 0-55 22-55 55 0 22 8 35 8 50 0 25 12 45 25 55 8 6 14 16 14 28 0 18 14 32 32 32' stroke='%232A1F19' stroke-width='5' fill='none' stroke-linecap='round'/><path d='M75 80c0-15 12-25 25-25M85 110c0-12 8-20 20-20' stroke='%232A1F19' stroke-width='4' fill='none' stroke-linecap='round' opacity='0.7'/></svg>");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   REAL ASSETS — Mood B con activos reales de Interton brand
   Reemplaza los SVG placeholders por imágenes reales
   ============================================================ */

/* Hero visual: usar video real con overlay coral */
.hero-visual {
  background: linear-gradient(135deg, var(--audix-coral) 0%, var(--audix-coral-dark) 100%) !important;
  position: relative;
  overflow: hidden;
}
.hero-visual::after {
  content: '' !important;
  background: linear-gradient(135deg, rgba(226,107,75,0.45) 0%, rgba(42,31,25,0.3) 100%) !important;
  font-size: 0 !important;
  opacity: 1 !important;
  inset: 0 !important;
  z-index: 2;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-visual .play-btn,
.hero-visual .caption {
  position: relative;
  z-index: 3;
}

/* Product images: removed SVG overlay — real renderings injected via inline style on product cards */
.product-image,
.product-img-large {
  font-size: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.product-image::after,
.product-img-large::after {
  content: none !important;
}

/* Reset font-size for placeholders */
.team-photo,
.pro-photo,
.suc-card .suc-map,
.gallery-grid > div,
.testi-video,
.video-thumb,
.maria-visual,
.equipo-collage > div,
.mod-icon,
.ben-icon,
.feature-icon,
.mot-icon,
.pro-feature .pro-photo {
  font-size: 0 !important;
  position: relative;
}

/* Map placeholder — usar lifestyle real con overlay */
.suc-map {
  background:
    linear-gradient(135deg, rgba(42,31,25,0.6), rgba(226,107,75,0.4)),
    url('../lifestyle-park.jpg') center/cover no-repeat !important;
}

/* Team / pro photos — usar HCP real (clinical scenes) */
/* Equipo / fonoaudiólogas — fotos reales (Home #equipo) */
.team-photo {
  background: url('../fono-amara.jpg') center 18%/cover no-repeat !important;
}
.team-grid .team-card:nth-child(1) .team-photo { background: url('../fono-amara.jpg') center 18%/cover no-repeat !important; }
.team-grid .team-card:nth-child(2) .team-photo { background: url('../fono-noemi.jpg') center 18%/cover no-repeat !important; }
.team-grid .team-card:nth-child(3) .team-photo { background: url('../fono-danitza.jpg') center 18%/cover no-repeat !important; }
.team-grid .team-card:nth-child(4) .team-photo { background: url('../fono-valentina.jpg') center 18%/cover no-repeat !important; }

/* Pro card photos en /equipo/ + fono feature en páginas de sucursal */
.pro-card .pro-photo,
.pro-card-suc .photo,
.pro-feature .pro-photo {
  background-size: cover !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
}
.pros-grid > .pro-card:nth-child(1) .pro-photo { background-image: url('../fono-amara.jpg') !important; }
.pros-grid > .pro-card:nth-child(2) .pro-photo { background-image: url('../fono-noemi.jpg') !important; }
.pros-grid > .pro-card:nth-child(3) .pro-photo { background-image: url('../fono-danitza.jpg') !important; }
.pros-grid > .pro-card:nth-child(4) .pro-photo { background-image: url('../fono-valentina.jpg') !important; }

/* Las fotos de fono por sucursal (.pro-feature / .pro-card-suc) se definen INLINE en cada página:
   Vitacura → Danitza · Santiago Centro → Valentina · Providencia → Amara + Noemi */

/* Maria visual — Lady holding phone */
.maria-visual {
  background:
    linear-gradient(135deg, rgba(42,31,25,0.45), rgba(42,31,25,0.15)),
    url('../maria-phone.jpg') center/cover no-repeat !important;
  border-radius: var(--r-lg);
  min-height: 240px;
}

/* Equipo collage — definido INLINE en equipo.html con las 4 fonoaudiólogas */

/* Gallery — fotos reales de cada sucursal (definidas inline por página) */
.gallery-grid > div {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}
.gallery-grid > div .ic { display: none; }

/* Testi videos en Home — usar imágenes reales con overlay */
.testimonios .testi-card .testi-video {
  background-size: cover !important;
  background-position: center !important;
}
.testimonios .testi-card:nth-child(1) .testi-video {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%), image-set(url('../lifestyle-1.webp') type('image/webp'), url('../lifestyle-1.png') type('image/png')) !important;
}
.testimonios .testi-card:nth-child(2) .testi-video {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%), image-set(url('../lifestyle-2.webp') type('image/webp'), url('../lifestyle-2.png') type('image/png')) !important;
}
.testimonios .testi-card:nth-child(3) .testi-video {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%), image-set(url('../lifestyle-3.webp') type('image/webp'), url('../lifestyle-3.png') type('image/png')) !important;
}
.testimonios .testi-card:nth-child(4) .testi-video {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%), image-set(url('../lifestyle-4.webp') type('image/webp'), url('../lifestyle-4.png') type('image/png')) !important;
}

/* LP-4 retargeting videos — usar 6 imágenes lifestyle reales */
.video-thumb.bg1 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-1.webp') type('image/webp'), url('../lifestyle-1.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}
.video-thumb.bg2 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-2.webp') type('image/webp'), url('../lifestyle-2.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}
.video-thumb.bg3 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-3.webp') type('image/webp'), url('../lifestyle-3.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}
.video-thumb.bg4 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-4.webp') type('image/webp'), url('../lifestyle-4.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}
.video-thumb.bg5 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-5.webp') type('image/webp'), url('../lifestyle-5.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}
.video-thumb.bg6 {
  background-image: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%), image-set(url('../lifestyle-6.webp') type('image/webp'), url('../lifestyle-6.png') type('image/png')) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Suc map container — ahora usa iframe real de Google Maps definido inline en cada página */

/* Sucursal map (alternative) */
.illu-map {
  background:
    linear-gradient(135deg, rgba(255,248,244,0.85), rgba(250,217,205,0.85)),
    image-set(url('../lifestyle-7.webp') type('image/webp'), url('../lifestyle-7.png') type('image/png')) center/cover no-repeat !important;
}

/* PRODUCT CARD IMAGES — Real renderings via specific selectors */
.products .product-card:nth-child(1) .product-image {
  background:
    url('../product-esencial-move2.jpg') center/55% no-repeat,
    linear-gradient(135deg, var(--audix-blue-light), var(--white)) !important;
}
.products .product-card:nth-child(2) .product-image {
  background:
    url('../product-connect-move4.jpg') center/55% no-repeat,
    linear-gradient(135deg, var(--audix-blue-light), var(--white)) !important;
}
.products .product-card:nth-child(3) .product-image {
  background:
    url('../product-connect-pro-spark262.jpg') center/cover no-repeat,
    linear-gradient(135deg, var(--audix-blue-light), var(--white)) !important;
}
.products .product-card:nth-child(4) .product-image {
  background:
    image-set(url('../product-pro-spark360s.webp') type('image/webp'), url('../product-pro-spark360s.png') type('image/png')) center/55% no-repeat,
    linear-gradient(135deg, var(--audix-coral-light), var(--white)) !important;
}

/* Producto page hero — Audix Pro rendering */
.product-img-large {
  background:
    image-set(url('../product-pro-spark360s.webp') type('image/webp'), url('../product-pro-spark360s.png') type('image/png')) center/50% no-repeat,
    linear-gradient(135deg, var(--audix-coral) 0%, var(--audix-coral-dark) 100%) !important;
}

/* Auracast section — iPhone 16 Pro real mockup */
.auracast-visual {
  background:
    image-set(url('../auracast-iphone.webp') type('image/webp'), url('../auracast-iphone.png') type('image/png')) center/contain no-repeat,
    linear-gradient(160deg, #1a1a1a, #2a2a2a) !important;
  border-radius: 32px;
  border: 8px solid #1a1a1a;
}
.auracast-visual::before {
  display: none !important;
}

/* Hero visual override — keep but simpler since we use lifestyle */
.hero-visual .play-btn {
  z-index: 3;
}
.hero-visual .caption {
  z-index: 3;
}

/* LP-4 Retargeting — videos reales en testimonios */
.testi-video-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-thumb {
  position: relative;
  overflow: hidden;
}
.video-thumb::before,
.video-thumb .video-info {
  z-index: 2;
  position: relative;
}
/* Overlay gradient sobre el video */
.video-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

/* GES Router hero video */
.ges-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.18;
}
.ges-hero {
  position: relative;
  overflow: hidden;
}
.ges-hero > .container {
  position: relative;
  z-index: 1;
}

/* (Removed old .lp-hero-bg / .lp-hero-with-image rules — the new full-bleed
   cinematic hero defines its own .lp-hero-bg per page with no opacity dim) */

/* Sucursal page — .pro-feature .pro-photo styled by the rule at line ~287 (size cover, position center 18%) */

/* Sucursal hero backgrounds — usar lifestyle real */
.suc-hero {
  position: relative;
  overflow: hidden;
}
.suc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(url('../lifestyle-2.webp') type('image/webp'), url('../lifestyle-2.png') type('image/png'));
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.suc-hero > .container { position: relative; z-index: 1; }

/* GES code page heros — lifestyle backdrop */
.ges-hero {
  position: relative;
  overflow: hidden;
}
.ges-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: image-set(url('../family-2.webp') type('image/webp'), url('../family-2.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
}
.ges-hero > .container { position: relative; z-index: 1; }

/* Maria-section: enhance with real photo as side visual */
.maria-section .maria-visual {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

/* ============================================================
   3-PASOS SECTION (#audicion) — Glass Morphism Modern
   ============================================================ */
#audicion {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 15% 25%, rgba(255,199,44,0.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(226,107,75,0.22), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(250,217,205,0.25), transparent 70%),
    linear-gradient(135deg, #FFF8F4 0%, #FFF4D1 50%, #FAEDE3 100%) !important;
  overflow: hidden;
}
#audicion::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,199,44,0.35), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-1 18s ease-in-out infinite;
  z-index: 0;
}
#audicion::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(226,107,75,0.28), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-2 22s ease-in-out infinite;
  z-index: 0;
}
@keyframes blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}
#audicion > .container {
  position: relative;
  z-index: 1;
}

#audicion .steps {
  position: relative;
  gap: var(--sp-xl) !important;
}
@media (min-width: 768px) {
  #audicion .steps {
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items: stretch;
  }
}

#audicion .step-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 24px !important;
  padding: var(--sp-2xl) var(--sp-xl) !important;
  position: relative;
  box-shadow:
    0 4px 12px rgba(42,31,25,0.04),
    0 16px 48px rgba(226,107,75,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
}
#audicion .step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
#audicion .step-card:hover {
  transform: translateY(-12px) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(226,107,75,0.4) !important;
  box-shadow:
    0 4px 12px rgba(42,31,25,0.06),
    0 24px 64px rgba(226,107,75,0.20),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
#audicion .step-card > * {
  position: relative;
  z-index: 1;
}

/* Modern step number with pulse rings */
#audicion .step-num {
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, #E26B4B 0%, #cc5a3d 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
  margin-bottom: var(--sp-lg) !important;
  position: relative;
  box-shadow:
    0 8px 24px rgba(226,107,75,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
  flex-shrink: 0;
}
#audicion .step-num::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(226,107,75,0.4);
  border-radius: 50%;
  animation: pulse-ring 2.8s ease-out infinite;
}
#audicion .step-num::after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1.5px solid rgba(226,107,75,0.2);
  border-radius: 50%;
  animation: pulse-ring 2.8s ease-out infinite;
  animation-delay: 1.4s;
}
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
#audicion .step-card:nth-child(1) .step-num::before { animation-delay: 0s; }
#audicion .step-card:nth-child(2) .step-num::before { animation-delay: 0.4s; }
#audicion .step-card:nth-child(3) .step-num::before { animation-delay: 0.8s; }

#audicion .step-card h3 {
  color: var(--audix-blue-deep) !important;
  font-size: 1.35rem !important;
  margin-bottom: var(--sp-sm) !important;
  letter-spacing: -0.01em;
}
#audicion .step-card p {
  color: var(--n-700) !important;
  font-size: 0.96rem !important;
  line-height: 1.55;
}

/* Dotted connector between cards (desktop only) */
@media (min-width: 768px) {
  #audicion .step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--sp-2xl) + 32px);
    right: -32px;
    width: 48px;
    height: 2px;
    background-image: linear-gradient(to right, rgba(226,107,75,0.5) 50%, transparent 50%);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    z-index: 2;
  }
}

/* Eyebrow with pill style */
#audicion .section-head .eyebrow {
  background: linear-gradient(135deg, rgba(226,107,75,0.15), rgba(255,199,44,0.15));
  padding: 6px 18px;
  border-radius: var(--r-pill);
  display: inline-block;
  border: 1px solid rgba(226,107,75,0.2);
  backdrop-filter: blur(10px);
}
#audicion .section-head h2 {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  letter-spacing: -0.02em;
}

/* Mobile */
@media (max-width: 640px) {
  #audicion::before { width: 260px; height: 260px; }
  #audicion::after { width: 320px; height: 320px; }
  #audicion .step-card {
    padding: var(--sp-xl) var(--sp-lg) !important;
    border-radius: 20px !important;
  }
  #audicion .step-num {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.25rem !important;
  }
  #audicion .step-card h3 { font-size: 1.15rem !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #audicion::before,
  #audicion::after,
  #audicion .step-num::before,
  #audicion .step-num::after {
    animation: none;
  }
}

/* 5 motivadores small cards (#2-5) — clean white circles with coral icons */
.motivadores .mot-card:nth-child(2) .mot-icon,
.motivadores .mot-card:nth-child(3) .mot-icon,
.motivadores .mot-card:nth-child(4) .mot-icon,
.motivadores .mot-card:nth-child(5) .mot-icon {
  background: var(--white) !important;
  border: 1px solid var(--audix-coral-light);
  box-shadow: var(--shadow-sm);
  font-size: 1.5rem !important;
  color: var(--audix-coral-dark) !important;
}
.motivadores .mot-card:nth-child(2) .mot-icon .ic,
.motivadores .mot-card:nth-child(3) .mot-icon .ic,
.motivadores .mot-card:nth-child(4) .mot-icon .ic,
.motivadores .mot-card:nth-child(5) .mot-icon .ic {
  width: 28px !important;
  height: 28px !important;
}
.motivadores .mot-card:nth-child(2):hover .mot-icon,
.motivadores .mot-card:nth-child(3):hover .mot-icon,
.motivadores .mot-card:nth-child(4):hover .mot-icon,
.motivadores .mot-card:nth-child(5):hover .mot-icon {
  background: var(--audix-coral) !important;
  color: var(--white) !important;
  transform: scale(1.05);
}

/* ---- Mobile fine-tuning ---- */
@media (max-width: 640px) {
  /* Header tighter on mobile */
  .header-inner { padding: 12px 0; gap: 8px; }
  .header-cta .btn { padding: 8px 14px !important; font-size: 0.85rem !important; min-height: 40px !important; }
  .logo { font-size: 1.3rem; }

  /* Banner — smaller text wrap better */
  .banner-trust { padding: 10px 0; font-size: 0.78rem; }
  .banner-trust .banner-items { gap: 8px 16px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 4px; }
  .banner-trust .banner-items > span { white-space: nowrap; }

  /* Hero tighter */
  .hero { padding: var(--sp-2xl) 0 var(--sp-3xl); }
  .hero-tagline { font-size: 0.75rem; padding: 5px 12px; }
  .hero h1 { font-size: 1.85rem; line-height: 1.15; }
  .hero p, .text-lg { font-size: 1rem; }
  .hero-stats { gap: var(--sp-lg); margin: var(--sp-lg) 0; }
  .hero-stat .num { font-size: 1.6rem; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; }

  /* Section spacing tighter */
  .section { padding: var(--sp-2xl) 0; }
  .section-head { margin-bottom: var(--sp-xl); }
  .section-head h2 { font-size: 1.5rem; }

  /* Trust strip cards tighter */
  .trust-cards { gap: 10px; }
  .trust-card { padding: 10px 6px; }
  .trust-card .num { font-size: 1.5rem; }
  .trust-card .lbl { font-size: 0.7rem; line-height: 1.2; }

  /* Steps */
  .step-card { padding: var(--sp-md); }
  .step-num { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 10px; }
  .step-card h3 { font-size: 1.05rem; }
  .step-card p { font-size: 0.85rem; }

  /* Motivadores 2-col grid en mobile pero más compacto */
  .motivadores { gap: 8px; }
  .mot-card { padding: var(--sp-md) 8px; }
  .mot-icon { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 8px; }
  .mot-card h4 { font-size: 0.85rem; line-height: 1.2; }

  /* Product cards tighter */
  .product-card { border-radius: var(--r-md); }
  .product-body { padding: var(--sp-md); }
  .product-body h4 { font-size: 1.05rem; }
  .product-body .features { font-size: 0.85rem; }
  .product-image { aspect-ratio: 5/3; }
  .badge { padding: 3px 8px !important; font-size: 0.65rem !important; }

  /* GES paths tighter */
  .ges-path { padding: var(--sp-md); }
  .ges-path-num { width: 30px; height: 30px; font-size: 0.85rem; }
  .ges-path h4 { font-size: 0.95rem; }

  /* Testimonios tighter */
  .testimonios { gap: 10px; }
  .testi-video .name { font-size: 0.8rem; }
  .testi-video .meta { font-size: 0.7rem; }

  /* Maria section tighter */
  .maria-section { padding: var(--sp-xl); border-radius: var(--r-md); }
  .maria-section h2 { font-size: 1.3rem; }
  .maria-section p { font-size: 0.95rem; }
  .maria-visual { padding: var(--sp-lg); }

  /* Circulo banner */
  .circulo-banner { padding: var(--sp-xl); border-radius: var(--r-md); }
  .circulo-banner h2 { font-size: 1.3rem; }

  /* Equipo team grid */
  .team-card { border-radius: var(--r-md); }
  .team-info { padding: var(--sp-sm); }
  .team-info h4 { font-size: 0.9rem; }
  .team-info .role { font-size: 0.75rem; }
  .team-info .branch { font-size: 0.6rem; }

  /* Universities */
  .unis { padding: var(--sp-xl) var(--sp-md); }
  .uni-logo { padding: 6px 12px; font-size: 0.8rem; }
  .uni-logos { gap: 6px; }

  /* Sucursales cards */
  .suc-body { padding: var(--sp-md); }
  .suc-body h4 { font-size: 1.05rem; }
  .suc-body .addr, .suc-body .hours { font-size: 0.8rem; }

  /* Footer tighter */
  .footer { padding: var(--sp-2xl) 0 var(--sp-md); margin-top: var(--sp-2xl); }
  .footer-grid { gap: var(--sp-lg); }
  .footer-brand { font-size: 1.4rem; }
  .footer h5 { font-size: 0.9rem; }
  .footer ul a { font-size: 0.85rem; }
  .footer-bottom { font-size: 0.75rem; gap: 6px; }

  /* WA float */
  .wa-float { width: 52px; height: 52px; bottom: 16px; right: 16px; font-size: 1.5rem; }

  /* Demo banner */
  .demo-banner { font-size: 0.7rem; padding: 8px 12px; }

  /* Nav main hidden, hamburger needed */
  .nav-main { display: none !important; }

  /* Buttons across the site */
  .btn { font-size: 0.95rem; padding: 12px 20px; min-height: 44px; }
  .btn-lg { font-size: 1rem; padding: 14px 22px; min-height: 50px; }

  /* Form fields more touch-friendly */
  .field-group input, .field-group select, .form-row input {
    padding: 12px 14px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* Form gateway tighter */
  .form-gateway { padding: var(--sp-lg); }
  .form-card { padding: var(--sp-lg); }
  .test-container { padding: var(--sp-lg); }

  /* GES Router selector */
  .ges-paths { gap: 8px; }

  /* Path detail cards */
  .path-detail { padding: var(--sp-lg); border-radius: var(--r-md); }
  .step-row { padding: var(--sp-sm); gap: var(--sp-sm); grid-template-columns: 1fr; }
  .step-row .icon-box { width: 44px; height: 44px; font-size: 1.2rem; }
  .step-row h4 { font-size: 0.95rem; }
  .step-row p { font-size: 0.85rem; }
  .step-row ul { font-size: 0.8rem; }

  /* Dual CTA stack */
  .dual-cta { grid-template-columns: 1fr !important; gap: 8px; }
  .dual-cta .btn { padding: 14px !important; font-size: 0.9rem !important; min-height: 56px; }

  /* Modalities cards */
  .mod-card { padding: var(--sp-lg); }
  .mod-icon { width: 60px; height: 60px; font-size: 1.8rem; }
  .mod-card h3 { font-size: 1.15rem; }

  /* Benefits cards */
  .ben-card { padding: var(--sp-lg); }
  .ben-icon { width: 60px; height: 60px; font-size: 1.8rem; }
  .ben-card h3 { font-size: 1.2rem; }

  /* Quick info card */
  .quick-info-card { padding: var(--sp-md); }
  .quick-info-row { flex-wrap: wrap; padding: 8px 0; }
  .quick-info-row .lbl { min-width: auto; }
  .quick-info-row .val { font-size: 0.85rem; width: 100%; margin-top: 2px; }

  /* Copay table */
  .copay-row { padding: var(--sp-sm) var(--sp-md); }
  .copay-row .plan { font-size: 0.9rem; }
  .copay-row .val { font-size: 0.95rem; }

  /* Niveles cards */
  .nivel-card { padding: var(--sp-lg); }
  .nivel-card .num { font-size: 2rem; }

  /* Cubre grid */
  .cubre-card { padding: var(--sp-md); }

  /* Pago section */
  .pago-section { padding: var(--sp-xl); border-radius: var(--r-md); }

  /* Auracast section mobile */
  .auracast-section { padding: var(--sp-xl); }
  .auracast-visual { max-width: 200px; }

  /* Feature box smaller */
  .feature-box { padding: var(--sp-md); }
  .feature-icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .feature-box h3 { font-size: 1rem; }
  .feature-box p { font-size: 0.85rem; }

  /* Equipo collage smaller */
  .equipo-collage { aspect-ratio: 1; gap: 8px; }
  .equipo-collage > div { font-size: 2rem; }

  /* Pro card */
  .pro-card .pro-body { padding: var(--sp-md); }
  .pro-card h3 { font-size: 1.15rem; }
  .pro-card .bio { font-size: 0.85rem; }

  /* Sucursal hero */
  .suc-hero { padding: var(--sp-xl) 0; }
  .suc-meta-card { padding: var(--sp-md); }

  /* Sucursal pro feature */
  .pro-feature { padding: var(--sp-md); }
  .pro-feature .pro-photo { font-size: 3rem; }

  /* Otras sucursales */
  .otra-card { padding: var(--sp-md); }

  /* Reduce padding on cards globally on mobile */
  .review-body { padding: var(--sp-md); }
  .review-body h3 { font-size: 1.1rem; }

  /* Schema note */
  .schema-note { font-size: 0.75rem; padding: 10px; }
}

/* Tablet fine-tuning (641-1023px) */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-content { gap: var(--sp-xl); }
  .nav-main { display: none; }
  .header-cta .btn { padding: 10px 18px; }
}

/* ---- Polish: subtle micro-interactions ---- */
.product-card,
.team-card,
.suc-card,
.post-card,
.mod-card,
.ben-card,
.feature-box,
.review-card,
.code-card-other {
  will-change: transform;
}

/* Smooth fade-in on scroll (CSS-only, requires no JS) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-head, .step-card, .product-card, .team-card, .suc-card, .testi-card,
.mod-card, .ben-card, .nivel-card, .ped-card, .paso-card, .pro-card, .video-card {
  animation: fadeIn 0.6s ease-out backwards;
}

/* Stagger for grids */
.products .product-card:nth-child(2) { animation-delay: 0.1s; }
.products .product-card:nth-child(3) { animation-delay: 0.2s; }
.products .product-card:nth-child(4) { animation-delay: 0.3s; }
.team-grid .team-card:nth-child(2) { animation-delay: 0.1s; }
.team-grid .team-card:nth-child(3) { animation-delay: 0.2s; }
.team-grid .team-card:nth-child(4) { animation-delay: 0.3s; }

/* Better focus states for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--audix-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print friendly */
@media print {
  .demo-banner, .wa-float, .header-cta, .banner-trust { display: none !important; }
  .header { position: static; }
  body { background: white; }
}

/* ============================================================
   MODERN ICON LIBRARY — Lucide-style outline icons
   Use: <span class="ic ic-NAME"></span>
   Color inherits from currentColor via CSS mask
   ============================================================ */
.ic {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}
.ic-lg { width: 1.6em; height: 1.6em; }
.ic-xl { width: 2em; height: 2em; }
.ic-2xl { width: 2.5em; height: 2.5em; }
.ic-3xl { width: 3em; height: 3em; vertical-align: middle; }

/* Phone */
.ic-phone { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }

/* Message-circle (WhatsApp/chat) */
.ic-message { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>"); }

/* Calendar */
.ic-calendar { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>"); }

/* Map-pin */
.ic-pin { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }

/* Clock */
.ic-clock { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }

/* Document */
.ic-document { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='14' y2='17'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='8' y1='13' x2='16' y2='13'/><line x1='8' y1='17' x2='14' y2='17'/></svg>"); }

/* Building / Institution */
.ic-building { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='8' y1='6' x2='8' y2='6'/><line x1='12' y1='6' x2='12' y2='6'/><line x1='16' y1='6' x2='16' y2='6'/><line x1='8' y1='10' x2='8' y2='10'/><line x1='12' y1='10' x2='12' y2='10'/><line x1='16' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='8' y2='14'/><line x1='12' y1='14' x2='12' y2='14'/><line x1='16' y1='14' x2='16' y2='14'/><path d='M10 22v-4h4v4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='8' y1='6' x2='8' y2='6'/><line x1='12' y1='6' x2='12' y2='6'/><line x1='16' y1='6' x2='16' y2='6'/><line x1='8' y1='10' x2='8' y2='10'/><line x1='12' y1='10' x2='12' y2='10'/><line x1='16' y1='10' x2='16' y2='10'/><line x1='8' y1='14' x2='8' y2='14'/><line x1='12' y1='14' x2='12' y2='14'/><line x1='16' y1='14' x2='16' y2='14'/><path d='M10 22v-4h4v4'/></svg>"); }

/* Ear */
.ic-ear { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0'/><path d='M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0'/><path d='M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4'/></svg>"); }

/* Package / Box */
.ic-package { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16.5 9.4 7.55 4.24'/><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>"); }

/* Battery */
.ic-battery { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='6' width='18' height='12' rx='2' ry='2'/><line x1='23' y1='13' x2='23' y2='11'/><polyline points='6 14 8 12 6 10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='6' width='18' height='12' rx='2' ry='2'/><line x1='23' y1='13' x2='23' y2='11'/><polyline points='6 14 8 12 6 10'/></svg>"); }

/* Target */
.ic-target { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }

/* Sparkles (automated) */
.ic-sparkles { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z'/><path d='M5 3v4'/><path d='M19 17v4'/><path d='M3 5h4'/><path d='M17 19h4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z'/><path d='M5 3v4'/><path d='M19 17v4'/><path d='M3 5h4'/><path d='M17 19h4'/></svg>"); }

/* Smartphone */
.ic-smartphone { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2' ry='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2' ry='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>"); }

/* Wifi / Auracast */
.ic-wifi { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.55a11 11 0 0 1 14.08 0'/><path d='M1.42 9a16 16 0 0 1 21.16 0'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.55a11 11 0 0 1 14.08 0'/><path d='M1.42 9a16 16 0 0 1 21.16 0'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>"); }

/* Globe */
.ic-globe { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); }

/* Car */
.ic-car { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2'/><circle cx='6.5' cy='16.5' r='2.5'/><circle cx='16.5' cy='16.5' r='2.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 16H9m10 0h3v-3.15a1 1 0 0 0-.84-.99L16 11l-2.7-3.6a1 1 0 0 0-.8-.4H5.24a2 2 0 0 0-1.8 1.1l-.8 1.63A6 6 0 0 0 2 12.42V16h2'/><circle cx='6.5' cy='16.5' r='2.5'/><circle cx='16.5' cy='16.5' r='2.5'/></svg>"); }

/* Train / Metro */
.ic-train { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='16' rx='2'/><path d='M4 11h16'/><circle cx='8.5' cy='15' r='.5' fill='black'/><circle cx='15.5' cy='15' r='.5' fill='black'/><path d='m8 19-2 3'/><path d='m18 22-2-3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='16' rx='2'/><path d='M4 11h16'/><circle cx='8.5' cy='15' r='.5' fill='black'/><circle cx='15.5' cy='15' r='.5' fill='black'/><path d='m8 19-2 3'/><path d='m18 22-2-3'/></svg>"); }

/* User-circle (doctor/team) */
.ic-user { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='10' r='3'/><path d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='10' r='3'/><path d='M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662'/></svg>"); }

/* Stethoscope */
.ic-stethoscope { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2v2'/><path d='M5 2v2'/><path d='M5 3a2 2 0 0 0-2 2v4a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2'/><path d='M8 15v1a6 6 0 0 0 6 6h0a6 6 0 0 0 6-6v-4'/><circle cx='20' cy='10' r='2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2v2'/><path d='M5 2v2'/><path d='M5 3a2 2 0 0 0-2 2v4a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2'/><path d='M8 15v1a6 6 0 0 0 6 6h0a6 6 0 0 0 6-6v-4'/><circle cx='20' cy='10' r='2'/></svg>"); }

/* Heart-handshake (referral) */
.ic-heart { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); }

/* Handshake */
.ic-handshake { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17 2 2a1 1 0 1 0 3-3'/><path d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/><path d='m21 3 1 11h-2'/><path d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/><path d='M3 4h8'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17 2 2a1 1 0 1 0 3-3'/><path d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/><path d='m21 3 1 11h-2'/><path d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/><path d='M3 4h8'/></svg>"); }

/* Family / users */
.ic-users { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }

/* Credit-card */
.ic-card { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>"); }

/* Home / house */
.ic-home { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>"); }

/* Briefcase */
.ic-briefcase { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2' ry='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2' ry='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>"); }

/* Graduation Cap */
.ic-cap { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10v6M2 10l10-5 10 5-10 5z'/><path d='M6 12v5c3 3 9 3 12 0v-5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10v6M2 10l10-5 10 5-10 5z'/><path d='M6 12v5c3 3 9 3 12 0v-5'/></svg>"); }

/* Hospital cross */
.ic-cross { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2z'/></svg>"); }

/* Volume / Sound */
.ic-volume { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/><path d='M15.54 8.46a5 5 0 0 1 0 7.07'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/><path d='M15.54 8.46a5 5 0 0 1 0 7.07'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14'/></svg>"); }

/* Sparkle small */
.ic-spark { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/></svg>"); }

/* Eye (visible/invisible) */
.ic-eye { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* Wind (cómodo como el aire) */
.ic-wind { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2'/><path d='M9.6 4.6A2 2 0 1 1 11 8H2'/><path d='M12.6 19.4A2 2 0 1 0 14 16H2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2'/><path d='M9.6 4.6A2 2 0 1 1 11 8H2'/><path d='M12.6 19.4A2 2 0 1 0 14 16H2'/></svg>"); }

/* TV streamer */
.ic-tv { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='15' rx='2' ry='2'/><polyline points='17 2 12 7 7 2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='15' rx='2' ry='2'/><polyline points='17 2 12 7 7 2'/></svg>"); }

/* Microphone */
.ic-mic { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='8' y1='23' x2='16' y2='23'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='8' y1='23' x2='16' y2='23'/></svg>"); }

/* Settings (gear) */
.ic-settings { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* Award (premium) */
.ic-award { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>"); }

/* Check-circle */
.ic-check-circle { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>"); }

/* Baby */
.ic-baby { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 12h.01'/><path d='M15 12h.01'/><path d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/><path d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 12h.01'/><path d='M15 12h.01'/><path d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/><path d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1'/></svg>"); }

/* Brain */
.ic-brain { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z'/><path d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z'/><path d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/></svg>"); }

/* School */
.ic-school { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 22v-4a2 2 0 1 0-4 0v4'/><path d='m18 10 4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2'/><path d='M18 5v17'/><path d='m4 6 8-4 8 4'/><path d='M6 5v17'/><circle cx='12' cy='9' r='2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 22v-4a2 2 0 1 0-4 0v4'/><path d='m18 10 4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2'/><path d='M18 5v17'/><path d='m4 6 8-4 8 4'/><path d='M6 5v17'/><circle cx='12' cy='9' r='2'/></svg>"); }

/* WhatsApp brand icon */
.ic-whatsapp { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>"); }

/* Money / dollar */
.ic-money { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); }

/* Alert */
.ic-alert { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>"); }

/* Bot */
.ic-bot { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8V4H8'/><rect width='16' height='12' x='4' y='8' rx='2'/><path d='M2 14h2'/><path d='M20 14h2'/><path d='M15 13v2'/><path d='M9 13v2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8V4H8'/><rect width='16' height='12' x='4' y='8' rx='2'/><path d='M2 14h2'/><path d='M20 14h2'/><path d='M15 13v2'/><path d='M9 13v2'/></svg>"); }

/* Lock (security) */
.ic-lock { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }

/* Star */
.ic-star { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"); }

/* Gift */
.ic-gift { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>"); }

/* Music note */
.ic-music { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>"); }

/* Clipboard list */
.ic-clipboard { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M12 11h4'/><path d='M12 16h4'/><path d='M8 11h.01'/><path d='M8 16h.01'/></svg>"); }

/* Reset font-size on icon-box parents to allow SVG */
.icon-box .ic, .feature-icon .ic, .step-row .icon-box .ic,
.mod-icon .ic, .mot-icon .ic, .ben-icon .ic,
.suc-meta-row .ic, .quick-info-row .ic {
  font-size: 1.4rem;
}
.icon-box, .feature-icon, .mod-icon, .mot-icon, .ben-icon { font-size: 1.4rem; }
.icon-box .ic { width: 28px; height: 28px; color: var(--white); }
.feature-icon .ic { width: 32px; height: 32px; color: var(--audix-coral-dark); }
.mod-icon .ic { width: 24px; height: 24px; color: var(--audix-coral-dark); }

/* WhatsApp float — make it the full SVG instead of emoji */
.wa-float { font-size: 0; }
.wa-float::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/></svg>") center/contain no-repeat;
}

/* Search */
.ic-search { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); }

/* Pin / sticky note */
.ic-note { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2-1.5 4.5L6 8l4.5 1.5L12 14l1.5-4.5L18 8l-4.5-1.5L12 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2-1.5 4.5L6 8l4.5 1.5L12 14l1.5-4.5L18 8l-4.5-1.5L12 2z'/></svg>"); }

/* Lightbulb */
.ic-lightbulb { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>"); }

/* Compass / navigation */
.ic-compass { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/></svg>"); }

/* Palette */
.ic-palette { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='13.5' cy='6.5' r='.5'/><circle cx='17.5' cy='10.5' r='.5'/><circle cx='8.5' cy='7.5' r='.5'/><circle cx='6.5' cy='12.5' r='.5'/><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='13.5' cy='6.5' r='.5'/><circle cx='17.5' cy='10.5' r='.5'/><circle cx='8.5' cy='7.5' r='.5'/><circle cx='6.5' cy='12.5' r='.5'/><path d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/></svg>"); }

/* ============================================================
   ICON RENDERING — Final adjustments per context
   ============================================================ */

/* Product image: hide redundant icon span (we have real renderings) */
.product-image .ic { display: none !important; }

/* Mot-icon (5 motivadores): show icon clean, remove lifestyle bg conflict */
.motivadores .mot-icon {
  background: var(--white) !important;
  font-size: 1.4rem !important;
  color: var(--audix-coral-dark);
  border: 2px solid var(--audix-coral-light);
}
.motivadores .mot-card:hover .mot-icon {
  background: var(--audix-coral) !important;
  color: var(--white);
  transform: scale(1.05);
}
.motivadores .mot-icon .ic {
  width: 26px;
  height: 26px;
}

/* Feature box icons (Producto features) — coral icon on yellow circle */
.feature-icon {
  font-size: 1.6rem !important;
  color: var(--audix-coral-dark);
}
.feature-icon .ic {
  width: 32px;
  height: 32px;
}
.feature-box[style*="audix-coral"] .feature-icon,
.feature-box.featured .feature-icon {
  color: var(--white) !important;
}

/* Step icon-box (GES Router 5 pasos) — white icon on coral square */
.step-row .icon-box {
  font-size: 1.6rem !important;
  color: var(--white);
}
.step-row .icon-box .ic {
  width: 32px;
  height: 32px;
}

/* Quick info card rows — coral inline icons */
.quick-info-row .ic {
  width: 20px;
  height: 20px;
  color: var(--audix-coral-dark);
}

/* Suc meta card rows */
.suc-meta-row .ic {
  width: 22px;
  height: 22px;
  color: var(--audix-coral);
}

/* Deadline / important boxes */
.deadline-box .ic {
  width: 24px;
  height: 24px;
  color: var(--warning);
  vertical-align: -0.3em;
  margin-right: 8px;
}

/* Important note */
.important-note .ic {
  width: 48px;
  height: 48px;
  color: var(--audix-coral);
  display: block;
  margin: 0 auto var(--sp-sm);
}
.important-note .ic-3xl,
.important-note > .ic {
  width: 48px;
  height: 48px;
}

/* Pago section icons (when visible) */
.pago-callout .ic { color: var(--interton-yellow); }

/* Ben-icon (Círculo de Confianza beneficios) */
.ben-icon {
  font-size: 2rem !important;
}
.ben-icon .ic {
  width: 40px;
  height: 40px;
}

/* Mod-icon (LP-2 prueba modalities) */
.mod-icon {
  font-size: 2rem !important;
  color: var(--audix-coral);
}
.mod-icon .ic {
  width: 40px;
  height: 40px;
}

/* Hero badge inline icons (for "⏱ 3 minutos" type badges) */
.lp-hero .badge .ic,
.hero-tagline .ic {
  width: 14px;
  height: 14px;
  vertical-align: -0.2em;
  margin-right: 4px;
}

/* Inline icons within paragraphs/cards */
p .ic, span .ic, li .ic {
  width: 1.1em;
  height: 1.1em;
}

/* Card category labels */
.post-cat .ic, .badge .ic {
  width: 0.95em;
  height: 0.95em;
}

/* Hero stats — keep numeric only, no icons */
.hero-stat .ic { display: none; }

/* Trust card numbers — no icons */
.trust-card .ic { display: none; }

/* Footer brand icons in copyright lines */
.footer-bottom .ic { width: 0.9em; height: 0.9em; vertical-align: -0.15em; }

/* ============================================================
   EDITORIAL REDESIGN LAYER — 2026 Magazine Aesthetic
   Full-bleed sections, serif accents, asymmetric layouts,
   curved dividers, dramatic typography mixing
   ============================================================ */

/* Editorial typography helpers */
.serif-italic {
  font-family: 'Fraunces', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}
em.serif-italic, .serif-italic em {
  font-style: italic;
}

/* HERO — Full viewport cinematic */
.hero {
  min-height: 100vh !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 768px) {
  .hero { min-height: 80vh !important; }
}
.hero > .container {
  width: 100%;
  padding-top: var(--sp-3xl);
  padding-bottom: var(--sp-3xl);
}
.hero .hero-content {
  gap: var(--sp-3xl) !important;
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}
.hero h1 .accent {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.hero-tagline {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226,107,75,0.25);
  font-size: 0.78rem !important;
  padding: 8px 18px !important;
}
.hero p.text-lg {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
  max-width: 540px;
}

/* Cinematic hero visual */
.hero-visual {
  aspect-ratio: 4/5 !important;
  border-radius: 24px !important;
  box-shadow:
    0 30px 80px -20px rgba(42,31,25,0.35),
    0 12px 30px -10px rgba(226,107,75,0.25) !important;
}
.hero-visual::after {
  background: linear-gradient(180deg, transparent 50%, rgba(42,31,25,0.4) 100%) !important;
}

/* Scroll cue */
.hero::after {
  content: '';
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 2px solid rgba(42,31,25,0.4);
  border-radius: 999px;
  display: block;
  pointer-events: none;
}
.hero::before {
  content: '';
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--audix-coral);
  border-radius: 999px;
  z-index: 5;
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(10px); opacity: 0.4; }
}
@media (max-width: 768px) {
  .hero::after, .hero::before { display: none; }
}

/* ============================================================
   TRUST STRIP V2 — Full-bleed image with editorial typography
   ============================================================ */
.trust-strip { display: none !important; } /* hide old */

.trust-strip-v2 {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(120px, 14vw, 200px);
  overflow: hidden;
  color: var(--white);
  margin-top: var(--sp-2xl);
}
.trust-bg {
  position: absolute;
  inset: 0;
  background: url('../hcp-2.jpg') center/cover no-repeat;
  z-index: 0;
}
.trust-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(42,31,25,0.92) 0%, rgba(74,61,51,0.85) 50%, rgba(226,107,75,0.75) 100%),
    radial-gradient(ellipse at 75% 35%, rgba(255,199,44,0.2), transparent 50%);
  z-index: 1;
}
.trust-content {
  position: relative;
  z-index: 2;
}
.trust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  margin-bottom: var(--sp-lg);
}
.trust-eyebrow .ic { width: 14px; height: 14px; color: var(--interton-yellow); }

.trust-headline {
  color: var(--white) !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--sp-2xl) !important;
  max-width: 16ch;
}
.trust-headline em {
  color: var(--interton-yellow);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

.trust-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-md);
  align-items: stretch;
  padding-top: var(--sp-xl);
  border-top: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 900px) {
  .trust-stats-row {
    grid-template-columns: repeat(9, 1fr);
  }
  .trust-stats-row .ts-stat { grid-column: span 1.6; }
  .trust-stats-row .ts-divider { grid-column: span 0.1; }
}
.ts-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ts-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 0.95;
  color: var(--white);
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 144;
}
.ts-num span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.55em;
  color: var(--interton-yellow);
  letter-spacing: 0;
  margin-left: 2px;
}
.ts-stat-hl .ts-num { color: var(--interton-yellow); }
.ts-lbl {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  font-weight: 500;
}
.ts-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.25), transparent);
  display: none;
}
@media (min-width: 900px) {
  .ts-divider { display: block; }
}

/* Curved divider at bottom of trust strip */
.section-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 3;
  display: block;
}

/* ============================================================
   MARÍA EDITORIAL SPLIT — Full-bleed asymmetric
   ============================================================ */
.maria-section { display: none !important; } /* hide old card */

.maria-editorial {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 600px;
  margin: var(--sp-3xl) 0;
}
@media (min-width: 900px) {
  .maria-editorial { grid-template-columns: 5fr 7fr; min-height: 720px; }
}

.maria-image-side {
  background: linear-gradient(135deg, rgba(42,31,25,0.25), rgba(226,107,75,0.15)),
              url('../maria-phone.jpg') center/cover no-repeat;
  position: relative;
  min-height: 320px;
}
.maria-image-side::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--white) 100%);
}
@media (max-width: 899px) {
  .maria-image-side::after {
    background: linear-gradient(to bottom, transparent 70%, var(--white) 100%);
  }
}

.maria-content-side {
  background: linear-gradient(135deg, #FFF8F4 0%, #FFFFFF 60%);
  display: flex;
  align-items: center;
  padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 80px);
  position: relative;
}
.maria-content-side::before {
  content: '';
  position: absolute;
  top: 40px;
  right: 40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255,199,44,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.maria-content-inner {
  position: relative;
  max-width: 540px;
}
.maria-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--audix-coral);
  margin-bottom: var(--sp-lg);
}
.maria-eyebrow .ic { width: 16px; height: 16px; }

.maria-h {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--audix-blue-deep) !important;
  margin-bottom: var(--sp-lg) !important;
}
.maria-h .serif-italic {
  display: block;
  color: var(--audix-coral);
}

.maria-lead {
  font-size: 1.2rem;
  color: var(--n-700);
  line-height: 1.55;
  margin-bottom: var(--sp-xl);
  max-width: 480px;
}

.maria-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--sp-xl);
}
.mb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--n-700);
  font-weight: 500;
}
.mb .ic {
  width: 22px;
  height: 22px;
  color: var(--audix-coral);
  flex-shrink: 0;
}

.maria-ctas .btn .ic {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}

/* ============================================================
   TESTIMONIOS — Magazine spread (1 feature + 3 stack)
   ============================================================ */
.testi-editorial {
  background: linear-gradient(180deg, #1a1410 0%, #0f0a08 100%);
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
}
.testi-editorial::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(226,107,75,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.testi-editorial::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,199,44,0.12), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.testi-header {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 720px;
  margin-bottom: var(--sp-3xl);
}
.testi-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(226,107,75,0.18);
  border: 1px solid rgba(226,107,75,0.3);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--audix-coral);
  margin-bottom: var(--sp-md);
}
.testi-header .eyebrow .ic { width: 14px; height: 14px; }
.testi-h {
  color: var(--white) !important;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: var(--sp-md) !important;
}
.testi-h .serif-italic {
  display: block;
  color: var(--interton-yellow);
}
.testi-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  max-width: 600px;
}

.testi-spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .testi-spread {
    grid-template-columns: 5fr 4fr;
    gap: var(--sp-xl);
  }
}

.testi-feature {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  background: #1a1a1a;
}
.testi-feature video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.testi-feature::before { content: none; display: none; }
.testi-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.92) 100%);
  z-index: 1;
}

.testi-feature-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(24px, 4vw, 56px);
  z-index: 3;
  color: var(--white);
}
.testi-quote {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-md);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.testi-quote em {
  color: var(--interton-yellow);
  font-style: italic;
}
.testi-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testi-attribution strong {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
}
.testi-attribution span {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

.testi-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.testi-mini {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
  background: #1a1a1a;
  transition: transform 0.4s ease;
}
.testi-mini:hover { transform: translateY(-4px); }
.testi-mini video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.testi-mini::before { content: none; display: none; }
.testi-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
}
.testi-mini-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-lg);
  z-index: 3;
  color: var(--white);
}
.testi-mini-overlay p {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 6px;
  font-variation-settings: 'opsz' 144;
}
.testi-mini-overlay span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
}
.testi-mini-overlay span strong { color: var(--white); }

/* ============================================================
   CATÁLOGO — Asymmetric bento horizontal
   Audix Pro = wide hero card (2 cols, image | content split)
   No row stretch, no empty space
   ============================================================ */
@media (min-width: 1024px) {
  .products {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    grid-template-areas:
      "pro pro connectpro"
      "essential connect connect" !important;
    gap: var(--sp-md) !important;
    align-items: stretch;
  }
  .products .product-card:nth-child(4) { grid-area: pro; }
  .products .product-card:nth-child(3) { grid-area: connectpro; }
  .products .product-card:nth-child(1) { grid-area: essential; }
  .products .product-card:nth-child(2) { grid-area: connect; }

  /* Audix Pro: horizontal split image | body */
  .products .product-card:nth-child(4) {
    border-width: 2px !important;
    background: linear-gradient(135deg, #FFF8F4 0%, #FAEDE3 60%, #FAD9CD 100%) !important;
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    grid-template-rows: 1fr !important;
    overflow: hidden;
    position: relative;
    min-height: 360px;
  }
  .products .product-card:nth-child(4) .product-image {
    aspect-ratio: auto !important;
    height: 100% !important;
    border-radius: 0 !important;
    /* Override inline gradient + bigger product render */
    background:
      image-set(url('../product-pro-spark360s.webp') type('image/webp'), url('../product-pro-spark360s.png') type('image/png')) center/contain no-repeat,
      transparent !important;
  }
  /* Hide redundant tier3 badge — we use PREMIUM ::before */
  .products .product-card:nth-child(4) .product-image .badge,
  .products .product-card:nth-child(4) .product-image .badge-tier3 {
    display: none !important;
  }
  /* Hide the ic-ear overlay on featured card since we have real render */
  .products .product-card:nth-child(4) .product-image .ic {
    display: none !important;
  }
  .products .product-card:nth-child(4) .product-body {
    padding: var(--sp-2xl) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .products .product-card:nth-child(4) .product-body h4 {
    font-size: 2rem !important;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .products .product-card:nth-child(4) .product-body .model {
    font-size: 1rem;
    margin-bottom: var(--sp-md);
  }
  .products .product-card:nth-child(4) .product-body .features {
    font-size: 1rem;
    margin-bottom: var(--sp-lg);
  }
  .products .product-card:nth-child(4) .product-body .features li {
    padding: 6px 0 6px 24px;
  }
  .products .product-card:nth-child(4)::before {
    content: 'PREMIUM';
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--audix-coral);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(226,107,75,0.3);
  }
  /* Non-Pro cards as flex column: image grows to fill, body fixed */
  .products .product-card:nth-child(1),
  .products .product-card:nth-child(2),
  .products .product-card:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 460px !important;
  }
  /* Image flex-grows to fill remaining card height = no empty space */
  .products .product-card:nth-child(1) .product-image,
  .products .product-card:nth-child(2) .product-image,
  .products .product-card:nth-child(3) .product-image {
    flex: 1 1 auto !important;
    aspect-ratio: auto !important;
    min-height: 220px !important;
    background-size: cover !important;
    background-position: center !important;
  }
  /* Body stays at bottom, fixed height to its content */
  .products .product-card:nth-child(1) .product-body,
  .products .product-card:nth-child(2) .product-body,
  .products .product-card:nth-child(3) .product-body {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Button sits right after content (no auto-margin space) */
  .products .product-card:nth-child(1) .product-body .btn,
  .products .product-card:nth-child(2) .product-body .btn,
  .products .product-card:nth-child(3) .product-body .btn {
    margin-top: var(--sp-md) !important;
  }
}

/* ============================================================
   5 MOTIVADORES — Bento with featured big card
   ============================================================ */
@media (min-width: 768px) {
  .motivadores {
    grid-template-columns: 2fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    grid-template-areas:
      "feat invisible auto"
      "feat comodo conectado" !important;
    gap: var(--sp-md) !important;
  }
  .motivadores .mot-card:nth-child(1) { grid-area: feat; }
  .motivadores .mot-card:nth-child(2) { grid-area: invisible; }
  .motivadores .mot-card:nth-child(3) { grid-area: comodo; }
  .motivadores .mot-card:nth-child(4) { grid-area: auto; }
  .motivadores .mot-card:nth-child(5) { grid-area: conectado; }

  /* Featured "Escuchar en ruido" — clean coral gradient */
  .motivadores .mot-card:nth-child(1) {
    background:
      linear-gradient(135deg, var(--audix-coral) 0%, #D04E2E 100%) !important;
    color: var(--white);
    padding: var(--sp-2xl) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    position: relative;
    overflow: hidden;
  }
  /* Strip ::before (sound-wave deco) — kept the clean gradient only */
  .motivadores .mot-card:nth-child(1)::before {
    content: none !important;
    background: none !important;
  }
  .motivadores .mot-card:nth-child(1) .mot-icon {
    width: 64px !important;
    height: 64px !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: var(--white) !important;
    margin: 0 0 var(--sp-md) 0 !important;
    backdrop-filter: none !important;
  }
  .motivadores .mot-card:nth-child(1) .mot-icon .ic {
    width: 32px; height: 32px;
  }
  .motivadores .mot-card:nth-child(1) h4 {
    color: var(--white) !important;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 2rem !important;
    line-height: 1.05;
    margin: 0;
  }
  .motivadores .mot-card:nth-child(1)::after {
    content: '#1 motivador de pacientes con audífono';
    position: absolute;
    top: 24px;
    left: 24px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--white);
  }
}

/* ============================================================
   GENERAL TYPOGRAPHY POLISH — Editorial mix
   ============================================================ */
.section-head h2 {
  letter-spacing: -0.025em;
}
.section-head h2 .serif-italic,
.section-head h2 em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--audix-coral);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

/* Eyebrows globally — pill style */
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(226,107,75,0.1);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(226,107,75,0.18);
  margin-bottom: var(--sp-md);
}
.section-head .eyebrow .ic { width: 14px; height: 14px; }

/* Mobile fine-tunes for new sections */
@media (max-width: 767px) {
  .trust-strip-v2 { padding: 60px 0 100px; }
  .trust-headline { font-size: 1.8rem !important; }
  .ts-num { font-size: 2rem; }

  .maria-editorial { gap: 0; }
  .maria-image-side { aspect-ratio: 4/3; min-height: auto; }
  .maria-h { font-size: 1.8rem !important; }
  .maria-lead { font-size: 1.05rem; }

  .testi-editorial { padding: 60px 0; }
  .testi-h { font-size: 2rem !important; }
  .testi-feature { aspect-ratio: 4/5; }
  .testi-mini { aspect-ratio: 16/9; }
  .testi-quote { font-size: 1.2rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .testi-feature::before, .testi-mini { transition: none; }
}

/* ============================================================
   SUCURSALES — Differentiate 3 cards on Home with distinct imagery
   ============================================================ */
.sucursales .suc-card:nth-child(1) .suc-map {
  background: url('../suc-vitacura-1.jpg') center/cover no-repeat !important;
}
.sucursales .suc-card:nth-child(2) .suc-map {
  background: url('../suc-providencia-1.jpg') center/cover no-repeat !important;
}
.sucursales .suc-card:nth-child(3) .suc-map {
  background: url('../suc-santiago-1.jpg') center/cover no-repeat !important;
}

/* Add comuna name visible on the map area */
.sucursales .suc-map {
  position: relative;
}
.sucursales .suc-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.sucursales .suc-card:nth-child(1) .suc-map::before {
  content: 'VITACURA';
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sucursales .suc-card:nth-child(2) .suc-map::before {
  content: 'PROVIDENCIA';
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sucursales .suc-card:nth-child(3) .suc-map::before {
  content: 'SANTIAGO CENTRO';
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Sucursal card hover lift */
.sucursales .suc-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sucursales .suc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(42,31,25,0.15);
  border-color: var(--audix-coral);
}

/* Hero — wider video aspect for more cinematic on desktop */
@media (min-width: 1024px) {
  .hero-visual {
    aspect-ratio: 5/6 !important;
  }
}

/* ============================================================
   HERO CINEMATIC — Full-bleed video background
   align-items: center to avoid header overlap
   ============================================================ */
.hero-cinematic {
  position: relative;
  min-height: calc(100vh - 60px) !important;
  height: auto !important;
  padding: clamp(40px, 6vh, 80px) 0 clamp(40px, 6vh, 80px) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
  background: var(--audix-blue-deep) !important;
}

/* Background video covers entire hero */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Cinematic vignette — multi-layer dim for guaranteed text legibility
   Left-side stronger dim (text sits there) + bottom dim + coral tint */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* LEFT-side dim — makes text area legible no matter what frame plays */
    linear-gradient(90deg,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.5) 30%,
      rgba(0,0,0,0.18) 65%,
      transparent 100%
    ),
    /* Vertical: light top, more bottom */
    linear-gradient(180deg,
      rgba(42,31,25,0.4) 0%,
      rgba(42,31,25,0.15) 30%,
      rgba(42,31,25,0.55) 75%,
      rgba(42,31,25,0.96) 100%
    ),
    /* Coral warmth bottom */
    linear-gradient(135deg, rgba(226,107,75,0.2) 0%, transparent 55%);
  pointer-events: none;
}

/* Corner vignette as second layer on .hero-vignette */
.hero-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 75% at 50% 45%, transparent 55%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
}

/* Hide old hero structures */
.hero-cinematic .hero-content { display: none !important; }
.hero-cinematic .hero-visual { display: none !important; }

/* New cinematic content layout — compact */
.hero-content-cinema {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  padding: 0;
  color: var(--white);
}

/* Tagline pill — glass style on video — compact */
.hero-cinematic .hero-tagline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: var(--white) !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  padding: 6px 14px !important;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.hero-cinematic .hero-tagline .ic {
  width: 12px;
  height: 12px;
  color: var(--interton-yellow);
}

/* Hero headline — compact size */
.hero-cinematic h1 {
  color: var(--white) !important;
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  margin-bottom: var(--sp-md) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.hero-cinematic h1 .accent.serif-italic {
  color: var(--interton-yellow);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}

/* Lead paragraph — compact + readable */
.hero-cinematic .hero-content-cinema .hero-lead,
.hero-cinematic p.hero-lead {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  max-width: 540px !important;
  margin-bottom: var(--sp-lg) !important;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.7),
    0 1px 3px rgba(0,0,0,0.5) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Stats inline with dividers — compact */
.hero-cinematic .hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
  margin: var(--sp-md) 0 var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-cinematic .hero-stat .num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem) !important;
  color: var(--white) !important;
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
  font-variation-settings: 'opsz' 144;
  text-shadow:
    0 2px 12px rgba(0,0,0,0.7),
    0 1px 3px rgba(0,0,0,0.5);
}
.hero-cinematic .hero-stat .num small {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.55em;
  color: var(--interton-yellow);
  margin-left: 2px;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    0 1px 2px rgba(0,0,0,0.4);
}
.hero-cinematic .hero-stat .lbl {
  font-size: 0.74rem !important;
  color: var(--white) !important;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
  display: block;
  font-weight: 500;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.65),
    0 1px 2px rgba(0,0,0,0.4);
  opacity: 0.9;
}
.hero-stat-divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), transparent);
  display: none;
}
@media (min-width: 768px) {
  .hero-stat-divider { display: block; }
}

/* CTAs — compact */
.hero-cinematic .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}
.hero-cinematic .btn-primary {
  font-size: 0.95rem !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  box-shadow:
    0 8px 24px rgba(226,107,75,0.45),
    0 0 0 1px rgba(255,255,255,0.1);
}
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  color: var(--white) !important;
  font-weight: 600;
  font-size: 0.95rem !important;
  padding: 14px 24px !important;
  border-radius: var(--r-md);
  min-height: 48px;
  transition: var(--t-base);
}
.btn-glass:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
}

/* Override the old .hero::before/::after scroll cue with white */
.hero-cinematic::after {
  border-color: rgba(255,255,255,0.5) !important;
}
.hero-cinematic::before {
  background: var(--white) !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

/* Make sticky header semi-transparent over video */
.hero-cinematic + .banner-trust,
body:has(.hero-cinematic) .header {
  /* keep current */
}

/* Mobile fine-tune */
@media (max-width: 768px) {
  .hero-cinematic { min-height: 90vh !important; height: auto; }
  .hero-cinematic h1 { font-size: 2.4rem !important; }
  .hero-content-cinema { padding: var(--sp-2xl) 0; }
  .hero-cinematic .hero-stat .num { font-size: 1.5rem !important; }
  .hero-stat-divider { display: none; }
  .hero-cinematic .hero-stats { gap: var(--sp-md); padding-top: var(--sp-md); }
  .hero-cinematic .hero-ctas { flex-direction: column; }
  .hero-cinematic .hero-ctas .btn { width: 100%; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-cinematic { background: image-set(url('../lifestyle-1.webp') type('image/webp'), url('../lifestyle-1.png') type('image/png')) center/cover no-repeat var(--audix-blue-deep) !important; }
}

/* ============================================================
   GES SELECTOR MODERN — Editorial bento with serif numbers
   ============================================================ */
.ges-selector-modern {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
  background:
    radial-gradient(ellipse 60% 50% at 25% 20%, rgba(226,107,75,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(255,199,44,0.12), transparent 70%),
    linear-gradient(135deg, #FFF8F4 0%, #FAEDE3 50%, #FFF4D1 100%);
  overflow: hidden;
}
.ges-blob-1 {
  position: absolute;
  top: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(226,107,75,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-1 20s ease-in-out infinite;
}
.ges-blob-2 {
  position: absolute;
  bottom: -200px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,199,44,0.18), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: blob-float-2 24s ease-in-out infinite;
}

.ges-selector-modern > .container {
  position: relative;
  z-index: 1;
}

.ges-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-3xl);
}
.ges-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(226,107,75,0.12);
  border: 1px solid rgba(226,107,75,0.25);
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--audix-coral-dark);
  margin-bottom: var(--sp-md);
}
.ges-head .eyebrow .ic { width: 14px; height: 14px; }
.ges-headline {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: var(--audix-blue-deep) !important;
  margin-bottom: var(--sp-md) !important;
}
.ges-headline .serif-italic {
  display: block;
  color: var(--audix-coral);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
}
.ges-sub {
  font-size: 1.1rem;
  color: var(--n-700);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto;
}

/* Cards bento — asymmetric */
.ges-paths-modern {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .ges-paths-modern {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "isapre fonasa"
      "singes unsure";
    gap: var(--sp-lg);
  }
  .gpm-isapre { grid-area: isapre; }
  .gpm-fonasa { grid-area: fonasa; }
  .gpm-singes { grid-area: singes; }
  .gpm-unsure { grid-area: unsure; }
}

/* Each path card — glass morphism with gradient + huge serif number */
.gpm {
  position: relative;
  display: block;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 24px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.7);
  box-shadow:
    0 4px 12px rgba(42,31,25,0.05),
    0 16px 48px rgba(226,107,75,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  text-decoration: none;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.gpm:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.85);
  border-color: rgba(226,107,75,0.45);
  box-shadow:
    0 8px 16px rgba(42,31,25,0.08),
    0 32px 64px rgba(226,107,75,0.22),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* Huge serif number in top-right corner */
.gpm-num {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--audix-coral);
  opacity: 0.18;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
  transition: all 0.4s ease;
  pointer-events: none;
}
.gpm:hover .gpm-num {
  opacity: 0.35;
  transform: scale(1.05);
}

/* Icon — small but prominent */
.gpm-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--audix-coral) 0%, var(--audix-coral-dark) 100%);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-md);
  box-shadow: 0 8px 20px rgba(226,107,75,0.3);
  flex-shrink: 0;
}
.gpm-icon .ic {
  width: 26px;
  height: 26px;
}

/* Title */
.gpm-title {
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--audix-blue-deep) !important;
  margin-bottom: var(--sp-xs) !important;
  letter-spacing: -0.015em;
  max-width: 90%;
}

/* Tag (small descriptor) */
.gpm-tag {
  font-size: 0.85rem;
  color: var(--n-700);
  margin: 0 0 var(--sp-md) 0;
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
}

/* CTA at bottom */
.gpm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--audix-coral);
  margin-top: auto;
  letter-spacing: 0.01em;
}
.gpm-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
  font-weight: 700;
}
.gpm:hover .gpm-arrow {
  transform: translateX(6px);
}

/* Featured ISAPRE card — coral gradient bg */
.gpm-isapre {
  background:
    linear-gradient(135deg, rgba(226,107,75,0.25) 0%, rgba(255,199,44,0.15) 100%),
    rgba(255,255,255,0.6) !important;
  border-color: rgba(226,107,75,0.3) !important;
}
.gpm-isapre::before {
  content: 'MÁS ELEGIDO';
  position: absolute;
  top: 22px;
  left: 28px;
  background: var(--audix-coral);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  z-index: 2;
}
.gpm-isapre .gpm-icon {
  margin-top: var(--sp-md);
}

/* FONASA cansado — warm yellow tint */
.gpm-fonasa {
  background:
    linear-gradient(135deg, rgba(255,199,44,0.18) 0%, rgba(226,107,75,0.1) 100%),
    rgba(255,255,255,0.6) !important;
}
.gpm-fonasa .gpm-icon {
  background: linear-gradient(135deg, var(--interton-yellow) 0%, #F59E0B 100%);
  color: var(--audix-blue-deep);
  box-shadow: 0 8px 20px rgba(255,199,44,0.4);
}

/* Sin GES — neutral cream */
.gpm-singes {
  background:
    linear-gradient(135deg, rgba(245,237,227,0.6) 0%, rgba(250,217,205,0.4) 100%),
    rgba(255,255,255,0.55) !important;
}
.gpm-singes .gpm-icon {
  background: linear-gradient(135deg, var(--audix-coral-light) 0%, var(--audix-coral) 100%);
}

/* No sé qué tengo — soft neutral */
.gpm-unsure {
  background:
    linear-gradient(135deg, rgba(255,244,209,0.4) 0%, rgba(245,237,227,0.5) 100%),
    rgba(255,255,255,0.6) !important;
}
.gpm-unsure .gpm-icon {
  background: linear-gradient(135deg, var(--audix-blue) 0%, var(--audix-blue-deep) 100%);
}

/* Legacy ges-paths styles cleanup (hide if visible) */
.ges-selector-modern .ges-paths { display: none !important; }

/* Mobile */
@media (max-width: 767px) {
  .ges-selector-modern { padding: 60px 0; }
  .ges-headline { font-size: 2rem !important; }
  .gpm { padding: 24px; min-height: auto; }
  .gpm-num { font-size: 3rem; top: 18px; right: 22px; }
  .gpm-title { font-size: 1.05rem !important; }
  .gpm-isapre::before { font-size: 0.6rem; padding: 3px 10px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ges-blob-1, .ges-blob-2 { animation: none; }
}

/* ============================================================
   TIPOS DE AUDÍFONOS — BTE vs RIC
   ============================================================ */
.tipos-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--n-100);
  position: relative;
}
.tipos-grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .tipos-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
}
.tipo-card {
  background: var(--white);
  border: 1px solid var(--n-300);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tipo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(42,31,25,0.10);
  border-color: var(--audix-coral);
}
.tipo-ric {
  border-color: var(--audix-coral);
  border-width: 2px;
  box-shadow: 0 12px 32px rgba(226,107,75,0.15);
}
.tipo-recommended-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  background: linear-gradient(135deg, var(--interton-yellow), #FFB800);
  color: var(--audix-blue-deep);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(255,199,44,0.4);
}
.tipos-note {
  margin-top: var(--sp-xl);
  padding: 18px 24px;
  background: rgba(42,31,25,0.04);
  border-left: 3px solid var(--audix-coral);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--n-700);
  line-height: 1.6;
}
.tipos-note .ic { color: var(--audix-coral); margin-right: 6px; vertical-align: -2px; }
.tipo-tag {
  background: linear-gradient(135deg, var(--audix-blue-deep), var(--audix-blue));
  color: var(--white);
  padding: 12px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tipo-tag-coral {
  background: linear-gradient(135deg, var(--audix-coral), var(--audix-coral-dark));
}
.tipo-image {
  aspect-ratio: 16/9;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.tipo-bte .tipo-image {
  background: linear-gradient(135deg, rgba(42,31,25,0.35), rgba(74,61,51,0.15)),
              url('../product-esencial-move2.jpg') center/contain no-repeat,
              linear-gradient(135deg, #F5F0EA, #EAE3DA);
}
.tipo-ric .tipo-image {
  background: linear-gradient(135deg, rgba(226,107,75,0.15), rgba(255,199,44,0.10)),
              url('../product-connect-pro-spark262.jpg') center/contain no-repeat,
              linear-gradient(135deg, #FFF4ED, #FFFAEB);
}
.tipo-body {
  padding: var(--sp-2xl);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tipo-body h3 {
  font-size: 1.6rem !important;
  margin-bottom: var(--sp-sm) !important;
  color: var(--audix-blue-deep) !important;
}
.tipo-lead {
  color: var(--n-700);
  margin-bottom: var(--sp-lg);
  line-height: 1.55;
}
.tipo-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-lg) 0;
}
.tipo-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--n-300);
  color: var(--n-700);
  font-size: 0.95rem;
}
.tipo-features li:last-child { border-bottom: 0; }
.tipo-features .ic {
  width: 20px;
  height: 20px;
  color: var(--audix-coral);
  flex-shrink: 0;
}
.tipo-models {
  margin: 0;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--n-300);
  font-size: 0.9rem;
  color: var(--n-700);
}
.tipo-models strong { color: var(--audix-blue-deep); }

/* ============================================================
   RESEÑAS GOOGLE
   ============================================================ */
.resenas-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background: linear-gradient(180deg, #FFF8F4 0%, #FFFFFF 100%);
}
.resenas-grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) { .resenas-grid { grid-template-columns: repeat(3, 1fr); } }
.resena-card {
  background: var(--white);
  border: 1px solid var(--n-300);
  border-radius: 20px;
  padding: var(--sp-2xl);
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
}
.resena-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(42,31,25,0.08);
  border-color: var(--audix-coral-light);
}
.resena-featured {
  background: linear-gradient(135deg, var(--audix-coral-light) 0%, #FFF8F4 100%);
  border-color: var(--audix-coral);
  border-width: 2px;
}
.resena-stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-md);
  color: var(--interton-yellow);
}
.resena-stars .ic { width: 18px; height: 18px; }
.resena-quote {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--audix-blue-deep);
  margin-bottom: var(--sp-lg);
  flex: 1;
}
.resena-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--n-300);
}
.resena-author strong {
  color: var(--audix-blue-deep);
  font-size: 0.95rem;
}
.resena-author span {
  color: var(--n-500);
  font-size: 0.82rem;
}
.resenas-footer {
  text-align: center;
  margin-top: var(--sp-2xl);
}
.resenas-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--audix-coral);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid var(--audix-coral);
  padding-bottom: 4px;
}
.resenas-link .ic {
  width: 16px;
  height: 16px;
  color: var(--interton-yellow);
}

/* ============================================================
   CONVENIOS ISAPRES
   ============================================================ */
.convenios-section {
  padding: clamp(80px, 10vw, 140px) 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,199,44,0.18), transparent 60%),
    linear-gradient(135deg, var(--audix-blue-deep), var(--audix-blue));
  color: var(--white);
}
.convenios-inner {
  display: grid;
  gap: var(--sp-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .convenios-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); }
}
.convenios-text .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--interton-yellow);
  margin-bottom: var(--sp-md);
}
.convenios-text .eyebrow .ic { width: 14px; height: 14px; color: var(--interton-yellow); }
.convenios-text h2 {
  color: var(--white) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--sp-md) !important;
}
.convenios-text p {
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: var(--sp-xl);
}
.convenios-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.conv-chip {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  transition: all 0.3s ease;
}
.conv-chip:hover {
  background: rgba(255,255,255,0.18);
  border-color: var(--interton-yellow);
  transform: translateY(-2px);
}
.conv-chip-fonasa {
  background: rgba(255,199,44,0.18) !important;
  border-color: var(--interton-yellow) !important;
  color: var(--interton-yellow) !important;
  font-weight: 700;
}
.conv-chip-pending {
  background: rgba(255,255,255,0.04) !important;
  border: 1px dashed rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.55) !important;
  font-style: italic;
  font-size: 0.82rem !important;
}
.conv-chip-pending:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* ============================================================
   FRAUNCES REDUCTION — Felipe finds it weird, keep minimal
   Only use in:
   - Hero accent "volver a vivir" (brand essence)
   - Testimonios pull-quotes (editorial magazine moment)
   Remove from numbers, generic italics, etc.
   ============================================================ */

/* Trust strip numbers — use Sora display, not Fraunces */
.ts-num,
.hero-cinematic .hero-stat .num {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-variation-settings: normal !important;
}

/* Trust strip italic accent — use Sora italic instead */
.trust-headline em,
.trust-headline .serif-italic {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
  color: var(--interton-yellow);
}

/* GES headline accent — Sora italic */
.ges-headline .serif-italic,
.ges-head .serif-italic {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
}

/* Maria h — Sora italic */
.maria-h .serif-italic,
.maria-editorial .serif-italic {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
}

/* Bento Pro card title — Sora not Fraunces */
.products .product-card:nth-child(4) .product-body h4 {
  font-family: var(--font-display) !important;
  font-style: normal !important;
}

/* GES path numbers — Sora not Fraunces italic */
.gpm-num {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-variation-settings: normal !important;
}

/* Testi feature quote — keep Fraunces (editorial moment) */
/* Testi mini quotes — Sora italic */
.testi-mini-overlay p {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
}

/* Testi spread headline accent — Sora */
.testi-h .serif-italic {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
}

/* GPM tag — Sora italic instead of Fraunces */
.gpm-tag {
  font-family: var(--font-body) !important;
  font-style: italic !important;
  font-variation-settings: normal !important;
  font-weight: 500;
}

/* KEEP FRAUNCES ONLY ON: */
/* 1. Hero accent "volver a vivir" — already set in .hero-cinematic h1 .accent.serif-italic */
/* 2. Testi feature quote (.testi-quote) — already set */
/* These are intentional editorial moments */

/* ==========================================================================
   LOGO IMAGE — official Audix logo (red+yellow on transparent)
   ========================================================================== */
.logo {
  display: inline-flex !important;
  align-items: center;
  line-height: 0;
  font-size: 0; /* hide any leftover text */
}
.logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity 0.2s ease;
}
.logo:hover .logo-img { opacity: 0.85; }

/* sticky header — slightly smaller logo */
.header.scrolled .logo-img,
.site-header.scrolled .logo-img {
  height: 34px;
}

@media (max-width: 768px) {
  .logo-img { height: 32px; }
}

/* ============================================================
   FIX — global `a:hover { color: var(--audix-coral) }` (styles.css:88)
   leaks into custom CTA buttons that are <a> tags and don't
   re-declare color on :hover, turning the label coral on a coral
   background (invisible). Pin the correct hover color per button
   group. `a.CLASS:hover` = specificity (0,2,1) > `a:hover` (0,1,1).
   ============================================================ */

/* Buttons with coral/espresso/dark background → text stays WHITE on hover */
a.ges-hero-cta-primary:hover,
a.pg-hero-cta-primary:hover,
a.circ-hero-cta:hover,
a.lp-hero-cta:hover,
a.p-cta-primary:hover,
a.pasos-help-cta:hover,
a.callout-action:hover,
a.mod-cta-mod:hover,
a.btn-submit-mod:hover,
a.lp-sticky-mobile-btn:hover,
button.btn-submit-mod:hover {
  color: #fff !important;
}

/* Buttons with yellow/gold background → text stays DARK espresso on hover */
a.auracast-cta:hover,
a.maria-cta:hover {
  color: var(--audix-blue-deep) !important;
}

/* Secondary / glass-on-dark CTAs → keep white on hover ON THE DARK HERO.
   NO !important here on purpose: secondary buttons also live on light
   cards (e.g. `.agendar-card`) where the page rule
   `.agendar-card .X:hover` (specificity 0,3,0) must win and turn the
   label coral. `a.X:hover` (0,2,1) still beats the global `a:hover`
   (0,1,1) on the dark hero, so both contexts render correctly without
   forcing the color. */
a.ges-hero-cta-secondary:hover,
a.pg-hero-cta-secondary:hover,
a.p-cta-secondary:hover {
  color: #fff;
}

/* Keep the arrow/icon glyph in sync with the (white) label on hover */
a.ges-hero-cta-primary:hover .ic,
a.pg-hero-cta-primary:hover .ic,
a.circ-hero-cta:hover .ic,
a.lp-hero-cta:hover .ic,
a.p-cta-primary:hover .ic,
a.pasos-help-cta:hover .ic,
a.callout-action:hover .ic,
a.mod-cta-mod:hover .ic,
a.lp-sticky-mobile-btn:hover .ic {
  background: #fff;
}
a.auracast-cta:hover .ic,
a.maria-cta:hover .ic {
  background: var(--audix-blue-deep);
}

/* ============================================================
   Active nav highlight — body_class hooks from inc/body-class.php
   ============================================================ */
body.audix-nav-equipo      .audix-nav-link-equipo,
body.audix-nav-audifonos   .audix-nav-link-audifonos,
body.audix-nav-ges         .audix-nav-link-ges,
body.audix-nav-sucursales  .audix-nav-link-sucursales {
  color: var(--audix-coral) !important;
  font-weight: 700;
}

/* Skip link (a11y) — bulletproof "visually hidden until focused" pattern.
   1×1px clipped until KEYBOARD focus (:focus-visible only — mouse click won't show it).
   This is the WCAG-recommended pattern; older `top:-40px` could leak on click. */
.audix-skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.audix-skip-link:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  clip: auto !important;
  background: var(--audix-coral, #E26B4B) !important;
  color: #fff !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  z-index: 99999 !important;
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* Footer column titles — replaced <h5> with <p> for a11y heading hierarchy. */
.footer .footer-col-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--interton-yellow, #FFC72C);
  margin: 0 0 14px;
}

/* a11y heading-hierarchy fix (axe heading-order P1 #9):
   Templates now use <h3> in card titles to bridge the page h1→section h2→card jump.
   These selectors mirror the existing card h4 rules so the visual styling stays
   identical when markup migrates h4 → h3. */
h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--audix-blue-deep); font-family: var(--font-display); }
.mot-card     h3 { font-size: 1rem; margin: 0; line-height: 1.3; }
.product-body h3 { color: var(--audix-blue-deep); margin-bottom: 4px; font-size: 1.2rem; }
.ges-path     h3 { color: var(--audix-blue-deep); margin-bottom: var(--sp-xs); font-size: 1.05rem; line-height: 1.4; }
.team-info    h3 { color: var(--audix-blue-deep); margin-bottom: 2px; font-size: 1.05rem; }
.suc-body     h3 { color: var(--audix-blue-deep); margin-bottom: var(--sp-xs); }
.post-body    h3 { color: var(--audix-blue-deep); margin-bottom: var(--sp-xs); font-size: 1.1rem; line-height: 1.35; }
.step-row     h3 { font-size: 0.95rem; }

/* P0 #4 a11y residual fixes (after token darken from #E26B4B → #C84D2D): */

/* Footer mailto: + tel: links inherit default link color (blue) which fails 1.53:1 on
   espresso bg. Force on-brand yellow for visibility (~5.4:1 vs #2A1F19). */
.footer .footer-tag a,
.footer .footer-tag a:hover {
  color: var(--interton-yellow);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Branch tag inside team card has small text; even var(--audix-coral)=#C84D2D at 4.61:1
   can dip under 4.5 with sub-pixel AA. Use the darker coral variant for safety. */
.team-info .branch { color: var(--audix-coral-dark) !important; }

/* Team card role text was using --n-500; even our darkened token (#6B7280, 4.83:1) can
   drop to ~3.7 with sub-pixel AA on tinted bg. Use blue-deep (the brand dark) for crisp readability. */
.team-info .role { color: #555555 !important; }   /* flat ~7:1 on white, opacity removed (was blending fg→fg+bg) */

/* .product-card .btn-primary: sub-pixel AA of the small button text reads as ~#ce6145 (3.87:1).
   Force the darker coral variant inside product cards (#A93F23 ≈ 6.3:1 vs white) for safety. */
.product-card .btn-primary { background: var(--audix-coral-dark); }
.product-card .btn-primary:hover { background: #8c2f15; }

/* ============================================================
   MAUTIC FORM STYLING (Interton CRM forms — formId=3 + formId=5)
   The form HTML matches audix.cl verbatim; this restyles the Mautic-default classes
   to fit the new theme's coral pill / rounded card design while keeping the field names
   (mauticform[X]), UTM tracking, and Mautic JS validation intact.
   ============================================================ */
.mauticform_wrapper { width: 100%; }
#mauticform_formularioprueba,
#mauticform_formulariolp {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
.mauticform-innerform,
.mauticform-page-wrapper { display: contents; }

/* Row layout: wide spans 2 cols, left/right take 1 each */
.mauticform-row { display: flex; flex-direction: column; gap: 6px; }
.mauticform-wide { grid-column: 1 / -1; }
.row-left  { grid-column: 1 / 2; }
.row-right { grid-column: 2 / 3; }
@media (max-width: 720px) {
  #mauticform_formularioprueba,
  #mauticform_formulariolp { grid-template-columns: 1fr; }
  .row-left, .row-right { grid-column: 1 / -1; }
}

/* Labels */
.mauticform-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--audix-blue-deep);
  letter-spacing: 0.02em;
}
.mauticform-required .mauticform-label::after {
  content: ' *';
  color: var(--audix-coral);
  font-weight: 700;
}

/* Inputs + selects — match our .field-group-mod look */
.mauticform-input,
.mauticform-selectbox {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--n-300, #E5E7EB);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-body, inherit);
  color: var(--audix-blue-deep);
  background: #FAFAFA;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.mauticform-input:focus,
.mauticform-selectbox:focus {
  outline: none;
  border-color: var(--audix-coral);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(200, 77, 45, 0.15);
}
.mauticform-input::placeholder { color: var(--n-500); opacity: 0.7; }

/* Error messages — hidden by default; Mautic JS unhides on validation fail */
.mauticform-errormsg { display: none; font-size: 0.82rem; color: var(--audix-coral); margin-top: 4px; }
.mauticform-row.mauticform-has-error .mauticform-errormsg { display: block; }
.mauticform-row.mauticform-has-error .mauticform-input,
.mauticform-row.mauticform-has-error .mauticform-selectbox { border-color: var(--audix-coral); }

/* GDPR checkbox row */
.mauticform-checkboxgrp-row { display: flex; align-items: flex-start; gap: 10px; }
.mauticform-checkboxgrp-checkbox {
  margin-top: 4px;
  width: 18px; height: 18px;
  accent-color: var(--audix-coral);
  cursor: pointer;
}
.mauticform-checkboxgrp-label {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--n-700);
  cursor: pointer;
}
.mauticform-checkboxgrp-label a { color: var(--audix-coral-dark); text-decoration: underline; }

/* Submit pill — large coral CTA, full-width */
.mauticform-button-wrapper { margin-top: 8px; text-align: center; }
.mauticform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 16px 36px;
  background: var(--audix-coral);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 32px -8px rgba(226,107,75,0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.mauticform-button:hover {
  background: var(--audix-coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -8px rgba(226,107,75,0.55);
}
.mauticform-button:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(200,77,45,0.35);
}

/* Mautic message banners (success + error after submit) */
.mauticform-message {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
}
.mauticform-message.mauticform-message-success {
  background: rgba(34,197,94,0.12); color: #166534; border: 1px solid rgba(34,197,94,0.3);
}
.mauticform-message.mauticform-message-error {
  background: rgba(226,107,75,0.12); color: var(--audix-coral-dark); border: 1px solid var(--audix-coral);
}

/* ==========================================================================
 * Aggressive underline reset — defeat Bluehost/legacy plugin overrides
 * Date: 2026-06-15 post-deploy hotfix
 * ========================================================================== */
html body a,
html body a:link,
html body a:visited,
html body .btn,
html body .btn-cta,
html body button,
html body .header-nav a,
html body .hero-cta,
html body .floating-wa-btn,
html body .lp-hero-cta,
html body nav a,
html body .agenda-btn,
html body .hdr-cta,
html body .nav-link,
html body .menu-item a {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-underline-offset: 0 !important;
}
html body a:hover { text-decoration: none !important; }
/* Keep ONLY explicit policy / privacy links underlined (NOT footer tel/mailto, NOT nav, NOT generic <p> links) */
html body a.legal-link,
html body .mauticform-checkboxgrp-label a { text-decoration: underline !important; }
/* Footer contact info: tel + mailto must NEVER have underline */
html body footer a[href^="tel:"],
html body footer a[href^="mailto:"],
html body .site-footer a[href^="tel:"],
html body .site-footer a[href^="mailto:"],
html body a[href^="tel:"],
html body a[href^="mailto:"] { text-decoration: none !important; }