﻿:root {
      --color-rojo: #e42f2f;
      --color-rojo-oscuro: #b71919;
      --color-negro: #080808;
      --color-negro-2: #111111;
      --color-blanco: #ffffff;
      --color-gris: #f4f4f4;
      --color-texto: #202020;
      --borde: rgba(255, 255, 255, .22);
      --sombra: 0 20px 50px rgba(0, 0, 0, .35);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Montserrat', Arial, sans-serif;
      color: var(--color-texto);
      background: var(--color-blanco);
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
    }

    .texto-rojo {
      color: var(--color-rojo);
    }

    .btn-rojo {
      background: linear-gradient(135deg, var(--color-rojo), var(--color-rojo-oscuro));
      color: var(--color-blanco);
      border: 0;
      border-radius: 5px;
      font-weight: 900;
      text-transform: uppercase;
      font-size: .88rem;
      padding: .85rem 1.3rem;
      box-shadow: 0 10px 25px rgba(228, 47, 47, .28);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .btn-rojo:hover {
      color: var(--color-blanco);
      transform: translateY(-2px);
      box-shadow: 0 14px 34px rgba(228, 47, 47, .38);
    }

    .btn-outline-light-custom {
      color: var(--color-blanco);
      border: 2px solid rgba(255, 255, 255, .85);
      border-radius: 5px;
      font-weight: 900;
      text-transform: uppercase;
      font-size: .88rem;
      padding: .75rem 1.15rem;
      transition: all .25s ease;
    }

    .btn-outline-light-custom:hover {
      color: var(--color-negro);
      background: var(--color-blanco);
    }

    .section-title {
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -.04em;
      text-align: center;
      margin-bottom: .5rem;
    }

    .section-title::after {
      content: '';
      display: block;
      width: 58px;
      height: 4px;
      background: var(--color-rojo);
      margin: .65rem auto 0;
      border-radius: 999px;
    }

    .navbar-custom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      padding: 1.4rem 0;
    }

    .logo-mp {
      display: flex;
      align-items: center;
      gap: .65rem;
      color: var(--color-blanco);
      line-height: 1;
    }

    .logo-mark {
      font-weight: 900;
      font-size: 2.4rem;
      letter-spacing: -.16em;
    }

    .logo-mark span:first-child {
      color: var(--color-blanco);
    }

    .logo-mark span:last-child {
      color: var(--color-rojo);
    }

    .logo-text {
      text-transform: uppercase;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .logo-text small {
      display: block;
      font-size: .46rem;
      font-weight: 700;
      opacity: .82;
      margin-top: .16rem;
    }

    .nav-link-custom {
      color: var(--color-blanco);
      font-weight: 900;
      text-transform: uppercase;
      font-size: .72rem;
      margin: 0 .75rem;
      opacity: .95;
    }

    .nav-link-custom:hover {
      color: var(--color-rojo);
    }

    .hero {
      position: relative;
      min-height: 690px;
      display: flex;
      align-items: center;
      background:
        radial-gradient(circle at 74% 38%, rgba(228, 47, 47, .18), transparent 25%),
        linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .86) 35%, rgba(0, 0, 0, .38) 70%, rgba(0, 0, 0, .8) 100%),
        url('https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=1800&q=80') center right/cover no-repeat;
      color: var(--color-blanco);
      overflow: hidden;
    }

    .hero::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 120px;
      background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding-top: 5rem;
    }

    .hero h1 {
      font-weight: 900;
      text-transform: uppercase;
      line-height: .94;
      letter-spacing: -.06em;
      font-size: clamp(3rem, 6vw, 5.55rem);
      max-width: 650px;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.16rem;
      max-width: 490px;
      font-weight: 500;
      line-height: 1.55;
      opacity: .95;
      margin-bottom: 1.3rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      margin-bottom: 2.5rem;
    }

    .hero-badges {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      max-width: 900px;
      position: relative;
      z-index: 3;
    }

    .hero-badge {
      display: flex;
      align-items: center;
      gap: .8rem;
      padding: .9rem 1rem;
      border-left: 1px solid rgba(228, 47, 47, .8);
      color: var(--color-blanco);
      min-height: 72px;
    }

    .hero-badge:first-child {
      border-left: 0;
    }

    .icono-linea {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      color: var(--color-blanco);
    }

    .hero-badge strong {
      display: block;
      font-size: .88rem;
      line-height: 1.15;
      text-transform: uppercase;
      font-weight: 900;
    }

    .identificacion {
      background: #f7f7f7;
      padding: 2.2rem 0 1.8rem;
    }

    .pain-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1.2rem;
      margin-top: 1.8rem;
      align-items: start;
    }

    .pain-item {
      text-align: center;
      font-weight: 800;
      font-size: .85rem;
      line-height: 1.25;
    }

    .pain-icon {
      height: 72px;
      width: 72px;
      margin: 0 auto .55rem;
      display: grid;
      place-items: center;
      color: #101010;
      position: relative;
    }

    .pain-icon .circle-red {
      position: absolute;
      width: 34px;
      height: 34px;
      border: 4px solid var(--color-rojo);
      border-radius: 50%;
      right: 7px;
      bottom: 9px;
      opacity: .9;
    }

    .identificacion-frase {
      text-align: center;
      font-weight: 800;
      font-size: 1.25rem;
      margin-top: 1.7rem;
    }

    .servicios {
      background: var(--color-negro);
      color: var(--color-blanco);
      padding: 2.5rem 0 3.2rem;
    }

    .servicio-card {
      position: relative;
      min-height: 300px;
      border: 1px solid var(--borde);
      border-radius: 8px;
      overflow: hidden;
      background: #171717;
      box-shadow: var(--sombra);
      display: flex;
      align-items: flex-end;
      transition: transform .25s ease, border-color .25s ease;
    }

    a.servicio-link,
    a.post-link {
      display: block;
      color: inherit;
      text-decoration: none;
      height: 100%;
    }

    a.servicio-link:hover,
    a.post-link:hover {
      color: inherit;
      text-decoration: none;
    }

    .servicio-card:hover {
      transform: translateY(-6px);
      border-color: rgba(228, 47, 47, .75);
    }

    .servicio-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg) center/cover no-repeat;
      opacity: .78;
      transition: transform .35s ease;
    }

    .servicio-card:hover::before {
      transform: scale(1.06);
    }

    .servicio-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.30) 60%, rgba(0,0,0,.05));
    }

    .servicio-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 1.2rem .85rem 1.1rem;
      text-align: center;
    }

    .servicio-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin: 0 auto .7rem;
      background: linear-gradient(135deg, var(--color-rojo), var(--color-rojo-oscuro));
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, .24);
      color: var(--color-blanco);
    }

    .servicio-content h3 {
      font-size: .97rem;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.1;
      margin-bottom: .55rem;
    }

    .servicio-content p {
      font-size: .76rem;
      line-height: 1.35;
      margin: 0;
      opacity: .94;
    }

    .metodo {
      background: #f4f4f4;
      padding: 2.5rem 0;
    }

    .foto-profesional {
      border-radius: 8px;
      min-height: 310px;
      background:
        linear-gradient(to top, rgba(0,0,0,.45), transparent),
        url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1000&q=80') center/cover no-repeat;
      box-shadow: 0 15px 35px rgba(0,0,0,.20);
    }

    .metodo h2 {
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -.04em;
      font-size: clamp(1.8rem, 3.6vw, 2.7rem);
      line-height: 1;
    }

    .metodo p {
      font-size: 1rem;
      line-height: 1.55;
      max-width: 720px;
      margin-bottom: 2rem;
    }

    .metodo-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1rem;
    }

    .metodo-item {
      text-align: center;
      font-weight: 800;
      font-size: .78rem;
      line-height: 1.2;
    }

    .metodo-item svg {
      width: 50px;
      height: 50px;
      margin-bottom: .55rem;
      color: #151515;
    }

    .testimonios {
      background: var(--color-negro);
      color: var(--color-blanco);
      padding: 2.1rem 0 2.4rem;
    }

    .testimonio-card {
      border: 1px solid var(--borde);
      border-radius: 8px;
      padding: .75rem;
      min-height: 150px;
      display: flex;
      gap: .8rem;
      align-items: center;
      background: #151515;
    }

    .video-mini {
      width: 95px;
      height: 118px;
      flex: 0 0 95px;
      border-radius: 6px;
      background: url('https://images.unsplash.com/photo-1546483875-ad9014c88eba?auto=format&fit=crop&w=500&q=80') center/cover no-repeat;
      position: relative;
      overflow: hidden;
    }

    .video-mini.video-mini--media {
      background: #111;
    }

    .video-mini.video-mini--media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .video-mini.video-mini--media::after {
      display: none;
    }

    .video-mini::after {
      content: 'â–¶';
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.25);
      font-size: 1.5rem;
      text-shadow: 0 5px 20px rgba(0,0,0,.7);
    }

    .testimonio-card p {
      font-size: .72rem;
      line-height: 1.35;
      margin: 0 0 .45rem;
      font-style: italic;
    }

    .testimonio-card strong {
      display: block;
      font-size: .72rem;
      line-height: 1.2;
    }

    .whatsapp-shot {
      background: #e8f7e6;
      color: #1f3320;
      border-radius: 8px;
      padding: 1rem;
      min-height: 150px;
      font-size: .82rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

    .educacion {
      background: #f7f7f7;
      padding: 2.2rem 0;
    }

    .post-card {
      position: relative;
      min-height: 210px;
      border-radius: 8px;
      overflow: hidden;
      background: #161616;
      display: flex;
      align-items: flex-end;
      box-shadow: 0 12px 30px rgba(0,0,0,.20);
    }

    .post-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--bg) center/cover no-repeat;
      opacity: .84;
    }

    .post-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.92), transparent 72%);
    }

    .post-icon {
      position: absolute;
      top: .6rem;
      right: .6rem;
      z-index: 3;
      width: 25px;
      height: 25px;
      border-radius: 5px;
      background: rgba(255,255,255,.90);
      color: #111;
      display: grid;
      place-items: center;
      font-size: .8rem;
      font-weight: 900;
    }

    .post-card h3 {
      position: relative;
      z-index: 2;
      width: 100%;
      color: var(--color-blanco);
      text-align: center;
      font-size: 1rem;
      line-height: 1;
      text-transform: uppercase;
      font-weight: 900;
      padding: 0 .7rem 1rem;
      margin: 0;
      text-shadow: 0 5px 18px rgba(0,0,0,.8);
    }

    .cta-final {
      position: relative;
      color: var(--color-blanco);
      padding: 3.4rem 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.84) 48%, rgba(0,0,0,.25)),
        url('https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=1600&q=80') center right/cover no-repeat;
      overflow: hidden;
    }

    .cta-final h2 {
      font-weight: 900;
      text-transform: uppercase;
      line-height: .98;
      letter-spacing: -.05em;
      font-size: clamp(2rem, 5vw, 4.2rem);
      margin-bottom: 1.1rem;
    }

    .cta-final p {
      opacity: .9;
      font-size: .9rem;
      margin-top: .85rem;
    }

    .footer {
      background: #070707;
      color: var(--color-blanco);
      padding: 1.5rem 0;
      border-top: 1px solid rgba(255,255,255,.12);
    }

    .footer-title {
      color: var(--color-rojo);
      text-transform: uppercase;
      font-size: .72rem;
      font-weight: 900;
      margin-bottom: .5rem;
    }

    .footer p,
    .footer a {
      color: rgba(255,255,255,.86);
      font-size: .78rem;
      line-height: 1.45;
      margin-bottom: .25rem;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: all .65s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 991.98px) {
      .navbar-custom {
        position: fixed;
        background: rgba(0,0,0,.92);
        padding: .85rem 0;
        backdrop-filter: blur(10px);
      }

      .navbar-collapse {
        background: rgba(0,0,0,.96);
        margin-top: .9rem;
        padding: 1rem;
        border-radius: 10px;
      }

      .hero {
        min-height: auto;
        padding: 9rem 0 3rem;
        background-position: 65% center;
      }

      .hero-badges {
        grid-template-columns: 1fr;
      }

      .hero-badge,
      .hero-badge:first-child {
        border-left: 1px solid rgba(228, 47, 47, .8);
        background: rgba(255,255,255,.05);
      }

      .pain-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .metodo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 575.98px) {
      .hero h1 {
        font-size: 3.1rem;
      }

      .hero-actions .btn-rojo,
      .hero-actions .btn-outline-light-custom {
        width: 100%;
        text-align: center;
      }

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

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

      .servicio-card {
        min-height: 270px;
      }
    }
