/* ============================================================
   911 STUDIO — Iconos profesionales (SVG mask)
   Sustituye emojis tipo WhatsApp
   ============================================================ */

.ico {
  --ico-size: 1.35em;
  width: var(--ico-size);
  height: var(--ico-size);
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  vertical-align: -0.15em;
}

.ico-lg {
  --ico-size: 28px;
}

.ico-xl {
  --ico-size: 32px;
}

.ico-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--azul), #2a74d4);
  color: #fff;
  flex-shrink: 0;
}
.ico-box .ico {
  --ico-size: 26px;
  color: #fff;
  background: #fff;
}

.ico-box-soft {
  background: rgba(25, 92, 181, 0.1);
  color: var(--azul);
}
.ico-box-soft .ico {
  background: currentColor;
}

/* Nav dropdown icons */
.dropdown-link,
.mobile-dropdown-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.dropdown-link .ico,
.mobile-dropdown-link .ico {
  --ico-size: 18px;
  color: var(--azul);
  opacity: 0.9;
}

/* Value / feature cards — solo cuando el icono es el bloque centrado */
.card > .ico-box {
  margin: 0 auto 18px;
}

/* Cabecera de tarjeta de servicio: icono + título juntos */
.svc-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.svc-card-head .ico-box {
  margin: 0;
  flex-shrink: 0;
}
.svc-card-head h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

/* Icon paths */
.ico-wallet   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M16 3H8a2 2 0 0 0-2 2v2h12V5a2 2 0 0 0-2-2Z'/%3E%3Ccircle cx='16.5' cy='13' r='1.25' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.ico-eye      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ico-bolt     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E"); }
.ico-key      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9 2 2-2 2-2-1-1 2-2-1'/%3E%3C/svg%3E"); }
.ico-camera   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3v11H4V8Z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); }
.ico-video    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='m15 10 6-3v10l-6-3'/%3E%3C/svg%3E"); }
.ico-id       { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='12' r='2.25'/%3E%3Cpath d='M14 10h5M14 14h4'/%3E%3C/svg%3E"); }
.ico-stream   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.5 7.5a6.5 6.5 0 0 1 0 9M7.5 7.5a6.5 6.5 0 0 0 0 9M19.5 4.5a11 11 0 0 1 0 15M4.5 4.5a11 11 0 0 0 0 15'/%3E%3C/svg%3E"); }
.ico-building { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16M14 10h5a1 1 0 0 1 1 1v10M8 8h2M8 12h2M8 16h2M17 14h1M17 17h1'/%3E%3C/svg%3E"); }
.ico-party    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21 14 3l5 3-9 15H5Z'/%3E%3Cpath d='M10.5 9.5 8 15M16 5l2.5-3M18 8l3-.5M14 12l3 1'/%3E%3C/svg%3E"); }
.ico-clapper  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 7 4-3 3.5 4.5L8 11 4 7Z'/%3E%3Crect x='3' y='10' width='18' height='10' rx='1.5'/%3E%3Cpath d='M3 14h18'/%3E%3C/svg%3E"); }
.ico-ring     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='6'/%3E%3Cpath d='M9 8.5 12 4l3 4.5'/%3E%3C/svg%3E"); }
.ico-portrait { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.ico-plane    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h7l2-7 2 7h7l-5 4 2 7-6-4-6 4 2-7-5-4Z'/%3E%3C/svg%3E"); }
.ico-doc      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.ico-booth    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E"); }
.ico-mic      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v4M8 22h8'/%3E%3C/svg%3E"); }
.ico-print    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V4h10v5'/%3E%3Crect x='4' y='9' width='16' height='8' rx='2'/%3E%3Cpath d='M7 17h10v4H7v-4Z'/%3E%3C/svg%3E"); }

/* Espaciado más aireado */
.section-py { padding: clamp(88px, 12vw, 140px) 0; }
.section-header { margin-bottom: clamp(40px, 6vw, 64px); }
.grid-2 { gap: clamp(1.75rem, 3vw, 2.75rem); }
.grid-3 { gap: clamp(1.75rem, 3vw, 2.75rem); }
.grid-4, .grid-services { gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.card {
  padding: 28px 24px;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.price-table th,
.price-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.price-table th {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-soft);
  font-weight: 700;
}
.price-table td strong {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.05rem;
  color: var(--azul);
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.75);
  padding: 28px 24px;
  height: 100%;
}
.price-card .amount {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--azul);
  margin: 12px 0 8px;
}
.measure-table td:first-child { font-weight: 700; }
.yt-thumb-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255,255,255,.7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.yt-thumb-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.yt-thumb-card .media {
  position: relative;
  aspect-ratio: 16/9;
  background: #111;
}
.yt-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-thumb-card .play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10,15,26,.72);
  color: #fff;
  display: grid;
  place-items: center;
}
.yt-thumb-card .body {
  padding: 14px 16px 18px;
}
.yt-thumb-card h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}
.yt-thumb-card p {
  margin: 0;
  color: var(--texto-soft);
  font-size: .88rem;
}