/* ═══════════════════════════════════════════════════════════
   CLÍNICA LAS LOICAS — Sistema de diseño
   Hoja de estilos única para todo el sitio.
   Editar acá cambia TODAS las páginas a la vez.
   ═══════════════════════════════════════════════════════════ */


    :root{
      --red: #E01A1A;
      --red-dark: #B81515;
      --black: #0D0D0D;
      --black2: #1A1A1A;
      --gray-dark: #4A4A4A;
      --gray: #6B6B6B;
      --gray-lt: #E5E5E5;
      --gray-xlt: #F0EEEA;
      --cream: #F8F6F3;
      --cream-deep: #F1ECE5;
      --white: #FFFFFF;
      --serif: 'Playfair Display', Georgia, serif;
      --sans: 'Montserrat', system-ui, sans-serif;
      --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
      --shadow-md: 0 8px 24px rgba(0,0,0,.08);
      --shadow-lg: 0 24px 60px rgba(0,0,0,.12);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body{
      font-family: var(--sans);
      color: var(--black);
      background: var(--white);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* ══════════════ NAV (misma que home) ══════════════ */
    .nav{
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 16px 32px;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(13,13,13,.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: box-shadow .3s ease;
    }
    .nav-brand{
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-brand img{ height: 36px; }
    .nav-brand-text{
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -.01em;
    }
    .nav-brand-text em{ font-style: italic; color: var(--red); }

    .nav-menu{
      display: flex;
      align-items: center;
      gap: 36px;
    }
    .nav-link{
      font-size: 13px;
      font-weight: 500;
      transition: color .2s ease;
      position: relative;
    }
    .nav-link.active{ color: var(--red); }
    .nav-link:hover{ color: var(--red); }
    .nav-link::after{
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 1px;
      background: var(--red);
      transition: width .3s ease;
    }
    .nav-link.active::after,
    .nav-link:hover::after{ width: 100%; }

    .nav-cta{
      background: var(--red);
      color: var(--white);
      padding: 11px 22px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      transition: all .25s ease;
    }
    .nav-cta:hover{ background: var(--black); transform: translateY(-1px); }

    /* ══════════════ HERO EDITORIAL ══════════════ */
    .page-hero{
      padding: 180px 32px 100px;
      background: var(--cream);
      position: relative;
      overflow: hidden;
    }
    .page-hero-photo{
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 50%;
      background: url('clinica-sala-espera.jpg') center right / cover no-repeat;
      z-index: 1;
    }
    .page-hero-photo::before{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
        var(--cream) 0%,
        rgba(248,246,243,.9) 20%,
        rgba(248,246,243,.5) 45%,
        rgba(248,246,243,.15) 75%,
        transparent 100%);
    }
    .page-hero-bird{
      display: none;
    }
    .page-hero-inner{
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .page-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 32px;
    }
    .page-eyebrow::before{
      content: '';
      width: 40px;
      height: 1px;
      background: var(--red);
    }
    .page-h1{
      font-family: var(--serif);
      font-size: clamp(48px, 8vw, 100px);
      line-height: 1.02;
      font-weight: 500;
      letter-spacing: -.02em;
      margin-bottom: 32px;
      max-width: 920px;
    }
    .page-h1 em{
      font-style: italic;
      color: var(--red);
      font-weight: 600;
    }
    .page-lead{
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(22px, 2.5vw, 30px);
      line-height: 1.4;
      color: var(--gray-dark);
      max-width: 720px;
      font-weight: 400;
    }

    /* ══════════════ SECCIÓN GENÉRICA ══════════════ */
    section{ padding: 120px 32px; }
    .section-inner{ max-width: 1200px; margin: 0 auto; }
    .section-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .section-eyebrow::before{
      content: '';
      width: 32px;
      height: 1px;
      background: var(--red);
    }
    .section-h2{
      font-family: var(--serif);
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1.05;
      font-weight: 500;
      letter-spacing: -.015em;
      margin-bottom: 24px;
      max-width: 820px;
    }
    .section-h2 em{ font-style: italic; color: var(--red); }

    /* ══════════════ HISTORIA — 2 columnas editoriales ══════════════ */
    .history{ background: var(--white); }
    .history-grid{
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 100px;
      align-items: flex-start;
    }
    .history-year{
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(80px, 14vw, 180px);
      line-height: .85;
      font-weight: 400;
      color: var(--red);
      letter-spacing: -.03em;
      position: sticky;
      top: 120px;
    }
    .history-year small{
      display: block;
      font-family: var(--sans);
      font-style: normal;
      font-size: 12px;
      letter-spacing: .28em;
      color: var(--gray);
      text-transform: uppercase;
      font-weight: 700;
      margin-top: 12px;
    }
    .history-text p{
      font-size: 19px;
      line-height: 1.75;
      color: var(--black);
      margin-bottom: 32px;
      font-weight: 400;
    }
    .history-text p:first-of-type::first-letter{
      font-family: var(--serif);
      font-size: 72px;
      font-weight: 500;
      float: left;
      line-height: .9;
      margin: 8px 14px -4px 0;
      color: var(--red);
    }
    .history-text p em{
      font-family: var(--serif);
      font-style: italic;
      color: var(--red);
      font-weight: 500;
    }
    .history-text .highlight{
      padding: 24px 0;
      border-top: 1px solid var(--gray-lt);
      border-bottom: 1px solid var(--gray-lt);
      margin: 40px 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: 22px;
      line-height: 1.4;
      color: var(--black);
    }

    /* ══════════════ TIMELINE ══════════════ */
    .timeline{
      background: var(--cream);
      padding: 120px 32px;
    }
    .timeline-grid{
      max-width: 1000px;
      margin: 60px auto 0;
      position: relative;
    }
    .timeline-grid::before{
      content: '';
      position: absolute;
      left: 100px;
      top: 20px;
      bottom: 20px;
      width: 1px;
      background: var(--red);
      opacity: .3;
    }
    .timeline-item{
      display: grid;
      grid-template-columns: 80px 40px 1fr;
      gap: 40px;
      padding: 40px 0;
      align-items: flex-start;
    }
    .timeline-year{
      font-family: var(--serif);
      font-style: italic;
      font-size: 32px;
      font-weight: 500;
      color: var(--red);
      line-height: 1;
      text-align: right;
    }
    .timeline-dot{
      width: 12px;
      height: 12px;
      background: var(--red);
      border-radius: 50%;
      margin: 12px 0 0 10px;
      position: relative;
      z-index: 2;
      box-shadow: 0 0 0 6px var(--cream);
    }
    .timeline-content h3{
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--black);
    }
    .timeline-content p{
      font-size: 15px;
      color: var(--gray-dark);
      line-height: 1.6;
    }

    /* ══════════════ VALORES — cards ══════════════ */
    .values{ background: var(--white); }
    .values-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 60px;
    }
    .value-card{
      padding: 40px 32px;
      background: var(--cream);
      transition: all .3s ease;
      border-top: 3px solid transparent;
    }
    .value-card:hover{
      border-top-color: var(--red);
      transform: translateY(-4px);
      background: var(--cream-deep);
    }
    .value-num{
      font-family: var(--serif);
      font-style: italic;
      font-size: 40px;
      color: var(--red);
      line-height: 1;
      margin-bottom: 20px;
    }
    .value-card h3{
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 12px;
      color: var(--black);
      line-height: 1.15;
    }
    .value-card p{
      font-size: 14px;
      color: var(--gray-dark);
      line-height: 1.6;
    }

    /* ══════════════ MINI MUSEO ══════════════ */
    .museum{
      background: var(--black);
      color: var(--white);
      padding: 140px 32px;
    }
    .museum-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .museum-text .section-eyebrow{
      color: var(--red);
      margin-bottom: 20px;
    }
    .museum-text .section-h2{
      color: var(--white);
      margin-bottom: 32px;
    }
    .museum-text .section-h2 em{ color: var(--red); }
    .museum-lead{
      font-family: var(--serif);
      font-style: italic;
      font-size: 22px;
      line-height: 1.5;
      color: rgba(255,255,255,.88);
      margin-bottom: 28px;
    }
    .museum-body{
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255,255,255,.72);
      margin-bottom: 20px;
    }
    .museum-body em{
      font-style: italic;
      color: var(--red);
    }
    .museum-visual{
      aspect-ratio: 4/5;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .museum-visual-placeholder{
      text-align: center;
      color: rgba(255,255,255,.4);
    }
    .museum-visual-placeholder span{
      font-family: var(--serif);
      font-style: italic;
      font-size: 22px;
      display: block;
      margin-bottom: 8px;
    }
    .museum-visual-placeholder small{
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .6;
    }

    /* ══════════════ MVV — Misión / Visión ══════════════ */
    .mvv{
      background: var(--cream);
      padding: 120px 32px;
    }
    .mvv-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-top: 60px;
    }
    .mvv-block{
      padding: 40px 32px 40px 40px;
      background: var(--white);
      border-left: 3px solid var(--red);
    }
    .mvv-label{
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .mvv-text{
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.4;
      color: var(--black);
      letter-spacing: -.005em;
    }
    .mvv-text em{
      font-style: italic;
      color: var(--red);
      font-weight: 500;
    }

    /* ══════════════ CITA GRANDE ══════════════ */
    .big-quote{
      background: var(--black);
      color: var(--white);
      padding: 160px 32px;
      text-align: center;
    }
    .big-quote-inner{ max-width: 900px; margin: 0 auto; }
    .big-quote blockquote{
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(32px, 4.5vw, 52px);
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: -.01em;
      margin-bottom: 32px;
    }
    .big-quote blockquote em{ color: var(--red); }
    .big-quote cite{
      display: block;
      font-family: var(--sans);
      font-style: normal;
      font-size: 11px;
      letter-spacing: .28em;
      color: rgba(255,255,255,.5);
      text-transform: uppercase;
    }

    /* ══════════════ EL NOMBRE — Sobre "Las Loicas" ══════════════ */
    .name-story{
      background: var(--cream);
      padding: 120px 32px;
    }
    .name-story-grid{
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .name-story-visual{
      aspect-ratio: 4/5;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .name-story-visual img{
      max-width: 70%;
      opacity: .95;
    }
    .name-story-text h2{
      font-family: var(--serif);
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.1;
      font-weight: 500;
      letter-spacing: -.015em;
      margin-bottom: 28px;
    }
    .name-story-text h2 em{ font-style: italic; color: var(--red); }
    .name-story-text p{
      font-size: 16px;
      line-height: 1.7;
      color: var(--gray-dark);
      margin-bottom: 20px;
    }
    .name-story-text p em{
      font-style: italic;
      color: var(--red);
    }

    /* ══════════════ CTA FINAL ══════════════ */
    .final-cta{
      background: var(--red);
      color: var(--white);
      padding: 120px 32px;
      text-align: center;
    }
    .final-cta h2{
      font-family: var(--serif);
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1.05;
      font-weight: 500;
      margin-bottom: 24px;
      letter-spacing: -.015em;
    }
    .final-cta h2 em{ font-style: italic; color: var(--black); }
    .final-cta p{
      font-size: 17px;
      line-height: 1.55;
      opacity: .92;
      margin-bottom: 44px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .btn-final{
      background: var(--white);
      color: var(--red);
      padding: 20px 40px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: all .25s ease;
    }
    .btn-final:hover{ background: var(--black); color: var(--white); transform: translateY(-2px); }

    /* ══════════════ FOOTER ══════════════ */
    footer{ background: var(--black); color: var(--white); padding: 80px 32px 32px; }
    .footer-inner{ max-width: 1200px; margin: 0 auto; }
    .footer-top{
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .footer-brand-block img{ height: 44px; margin-bottom: 20px; filter: brightness(0) invert(1); }
    .footer-brand-block h4{ font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 12px; }
    .footer-brand-block h4 em{ font-style: italic; color: var(--red); }
    .footer-brand-block p{ font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; max-width: 320px; }
    footer h5{
      font-size: 11px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 20px;
      font-weight: 700;
    }
    footer ul{ list-style: none; }
    footer li{ margin-bottom: 12px; font-size: 14px; }
    footer li a{ color: rgba(255,255,255,.75); transition: color .2s ease; }
    footer li a:hover{ color: var(--red); }
    .footer-bottom{
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255,255,255,.4);
      align-items: center;
    }
    .footer-social{ display: flex; gap: 16px; }
    .footer-social a{
      width: 32px; height: 32px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s ease;
    }
    .footer-social a:hover{ background: var(--red); }
    .footer-social svg{ width: 14px; height: 14px; fill: var(--white); }

    /* ══════════════ ANIMACIONES ══════════════ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .page-eyebrow { animation: fadeUp .8s ease both; }
    .page-h1 { animation: fadeUp .8s ease .15s both; }
    .page-lead { animation: fadeUp .8s ease .3s both; }

    /* Animaciones de entrada de la portada */
    .hero-eyebrow { animation: fadeUp .8s ease both; }
    .hero-h1 { animation: fadeUp .8s ease .15s both; }
    .hero-sub { animation: fadeUp .8s ease .3s both; }
    .hero-ctas { animation: fadeUp .8s ease .45s both; }
    .hero-trust { animation: fadeUp .8s ease .6s both; }

    .reveal{
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s ease, transform .8s ease;
    }
    .reveal.visible{ opacity: 1; transform: translateY(0); }

    /* ══════════════ RESPONSIVE ══════════════ */
    
  


    /* ══════════════ BOTÓN DE MENÚ MÓVIL ══════════════ */
    .nav-mobile-toggle{
      display: none;
      width: 32px;
      height: 32px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }
    .nav-mobile-toggle span{
      width: 22px;
      height: 1.5px;
      background: var(--black);
      transition: all .3s ease;
    }

    /* ══════════════ MENÚ MÓVIL DESPLEGADO ══════════════ */
    .nav-menu.abierto{
      display: flex !important;
      position: fixed;
      top: 61px;
      left: 0;
      right: 0;
      background: var(--white);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 8px 20px 20px;
      border-bottom: 1px solid var(--gray-lt);
      box-shadow: 0 12px 24px rgba(0,0,0,.06);
      z-index: 99;
    }
    .nav-menu.abierto .nav-link{
      width: 100%;
      padding: 14px 0;
      border-bottom: 1px solid var(--gray-lt);
      font-size: 15px;
    }
    .nav-menu.abierto .nav-link:last-child{ border-bottom: none; }

/* ═══════════════════════════════════════════════════════════
   COMPONENTES DE LA PORTADA (reutilizables en otras páginas)
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
       HERO PRINCIPAL
    ══════════════════════════════════════════════════ */
    .hero{
      min-height: 100vh;
      padding: 140px 32px 80px;
      background: var(--cream);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    /* Foto de fondo del hero: box con cordillera + logo */
    .hero-photo{
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 55%;
      background: url('box-cordillera-logo.jpg') center right / cover no-repeat;
      z-index: 1;
    }
    /* Gradient overlay para leer texto */
    .hero-photo::before{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
        var(--cream) 0%,
        rgba(248,246,243,.85) 15%,
        rgba(248,246,243,.4) 35%,
        rgba(248,246,243,.15) 60%,
        transparent 100%);
    }
    /* Efecto tint editorial */
    .hero-photo::after{
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(224,26,26,.05) 0%, transparent 50%);
      mix-blend-mode: multiply;
    }

    .hero-bird{
      display: none; /* Reemplazado por hero-photo */
    }

    .hero-inner{
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      position: relative;
      z-index: 2;
    }

    .hero-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 32px;
    }
    .hero-eyebrow::before{
      content: '';
      width: 40px;
      height: 1px;
      background: var(--red);
    }

    .hero-h1{
      font-family: var(--serif);
      font-size: clamp(44px, 8vw, 96px);
      line-height: 1.0;
      font-weight: 500;
      letter-spacing: -.02em;
      color: var(--black);
      margin-bottom: 32px;
      max-width: 920px;
    }
    .hero-h1 em{
      font-style: italic;
      color: var(--red);
      font-weight: 600;
    }

    .hero-sub{
      font-size: 19px;
      line-height: 1.55;
      color: var(--gray-dark);
      max-width: 560px;
      margin-bottom: 48px;
      font-weight: 400;
    }

    .hero-ctas{
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn-primary{
      background: var(--red);
      color: var(--white);
      padding: 18px 34px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: all .25s ease;
      box-shadow: 0 4px 14px rgba(224,26,26,.25);
      cursor: pointer;
    }
    .btn-primary:hover{
      background: var(--red-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(224,26,26,.35);
    }

    .btn-ghost{
      background: transparent;
      color: var(--black);
      padding: 18px 30px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      border: 1.5px solid var(--black);
      transition: all .25s ease;
    }
    .btn-ghost:hover{
      background: var(--black);
      color: var(--white);
    }

    /* Barra de confianza al pie del hero */
    .hero-trust{
      margin-top: 72px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      padding-top: 32px;
      border-top: 1px solid rgba(13,13,13,.1);
      max-width: 780px;
    }
    .trust-item{
      font-size: 12px;
      color: var(--gray-dark);
      line-height: 1.5;
    }
    .trust-item strong{
      display: block;
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 500;
      color: var(--black);
      margin-bottom: 4px;
      letter-spacing: -.01em;
    }
    .trust-item strong em{ font-style: italic; color: var(--red); }

    /* ══════════════════════════════════════════════════
       SECCIÓN GENÉRICA
    ══════════════════════════════════════════════════ */
    section{ padding: 120px 32px; }
    .section-inner{ max-width: 1200px; margin: 0 auto; }
    .section-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 20px;
    }
    .section-eyebrow::before{
      content: '';
      width: 32px;
      height: 1px;
      background: var(--red);
    }
    .section-h2{
      font-family: var(--serif);
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1.05;
      font-weight: 500;
      letter-spacing: -.015em;
      margin-bottom: 24px;
      max-width: 820px;
    }
    .section-h2 em{ font-style: italic; color: var(--red); }
    .section-lead{
      font-size: 19px;
      color: var(--gray-dark);
      max-width: 640px;
      margin-bottom: 64px;
      line-height: 1.55;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — POR QUÉ LAS LOICAS (4 pilares)
    ══════════════════════════════════════════════════ */
    .pillars{ background: var(--white); }
    .pillars-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
    }
    .pillar{
      padding: 48px 40px;
      border-top: 1px solid var(--gray-lt);
      display: flex;
      gap: 32px;
      align-items: flex-start;
      transition: background .25s ease;
    }
    .pillar:hover{ background: var(--cream); }
    .pillar:nth-child(odd){ border-right: 1px solid var(--gray-lt); }
    .pillar:nth-child(1), .pillar:nth-child(2){ padding-top: 40px; }
    .pillar-num{
      font-family: var(--serif);
      font-style: italic;
      font-size: 36px;
      font-weight: 400;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      min-width: 60px;
    }
    .pillar-content h3{
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 500;
      margin-bottom: 12px;
      line-height: 1.2;
      color: var(--black);
    }
    .pillar-content p{
      font-size: 15px;
      color: var(--gray-dark);
      line-height: 1.6;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — TRATAMIENTOS DESTACADOS (3 hero)
    ══════════════════════════════════════════════════ */
    .featured{
      background: var(--cream);
    }
    .featured-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 60px;
    }
    .featured-card{
      background: var(--white);
      padding: 48px 36px 40px;
      position: relative;
      transition: all .3s ease;
      border: 1px solid var(--gray-lt);
      display: flex;
      flex-direction: column;
      min-height: 480px;
    }
    .featured-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--red);
    }
    .featured-card::before{
      content: attr(data-num);
      position: absolute;
      top: 20px;
      right: 24px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--red);
    }

    /* Placeholder para imagen — se reemplaza cuando lleguen fotos */
    .featured-visual{
      height: 200px;
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
      border-radius: 0;
      overflow: hidden;
      position: relative;
    }
    .featured-visual img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .featured-card:hover .featured-visual img{
      transform: scale(1.05);
    }
    .featured-visual span{
      font-family: var(--serif);
      font-style: italic;
      font-size: 40px;
      color: var(--red);
    }

    .featured-eyebrow{
      font-size: 10px;
      letter-spacing: .26em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .featured-title{
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 500;
      line-height: 1.1;
      margin-bottom: 16px;
      color: var(--black);
    }
    .featured-title em{ font-style: italic; color: var(--red); }
    .featured-desc{
      font-size: 15px;
      color: var(--gray-dark);
      line-height: 1.6;
      margin-bottom: 28px;
      flex: 1;
    }
    .featured-link{
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--black);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: gap .25s ease;
      border-bottom: 1.5px solid var(--black);
      padding-bottom: 6px;
      align-self: flex-start;
    }
    .featured-card:hover .featured-link{
      color: var(--red);
      border-color: var(--red);
      gap: 16px;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — OTRAS ESPECIALIDADES (grid secundario)
    ══════════════════════════════════════════════════ */
    .other-specs{
      background: var(--white);
    }
    .other-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 48px;
      border-top: 1px solid var(--gray-lt);
    }
    .spec-item{
      padding: 32px 24px;
      border-bottom: 1px solid var(--gray-lt);
      border-right: 1px solid var(--gray-lt);
      transition: all .25s ease;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .spec-item:nth-child(3n){ border-right: none; }
    .spec-item:hover{
      background: var(--cream);
      padding-left: 32px;
    }
    .spec-item .arrow{
      font-size: 20px;
      color: var(--gray-lt);
      transition: all .25s ease;
      margin-left: auto;
    }
    .spec-item:hover .arrow{
      color: var(--red);
      transform: translateX(4px);
    }
    .spec-item-num{
      font-family: var(--serif);
      font-style: italic;
      font-size: 15px;
      color: var(--red);
      min-width: 30px;
    }
    .spec-item h4{
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 2px;
      color: var(--black);
    }
    .spec-item p{
      font-size: 12px;
      color: var(--gray);
      line-height: 1.4;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — CITA EDITORIAL
    ══════════════════════════════════════════════════ */
    .editorial-quote{
      background: var(--black);
      color: var(--white);
      padding: 140px 32px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .editorial-quote-inner{
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .editorial-quote blockquote{
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(28px, 4.5vw, 48px);
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: -.01em;
      margin-bottom: 32px;
    }
    .editorial-quote blockquote em{
      color: var(--red);
      font-style: italic;
    }
    .editorial-quote cite{
      display: block;
      font-family: var(--sans);
      font-style: normal;
      font-size: 11px;
      letter-spacing: .28em;
      color: rgba(255,255,255,.5);
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — EQUIPO (fotos + bios)
    ══════════════════════════════════════════════════ */
    .team{
      background: var(--cream);
    }
    .team-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 60px;
    }
    .team-member{
      text-align: left;
    }
    .team-photo{
      aspect-ratio: 3/4;
      background: var(--gray-xlt);
      margin-bottom: 20px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .team-photo-placeholder{
      font-family: var(--serif);
      font-style: italic;
      font-size: 48px;
      color: var(--gray-lt);
    }
    .team-role{
      font-size: 10px;
      letter-spacing: .24em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .team-name{
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--black);
    }
    .team-specialty{
      font-size: 13px;
      color: var(--gray-dark);
      line-height: 1.5;
    }

    /* ══════════════════════════════════════════════════
       SECCIÓN — UBICACIÓN + MAPA
    ══════════════════════════════════════════════════ */
    .location{
      background: var(--white);
      padding: 0;
    }
    .location-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 600px;
    }
    .location-info{
      padding: 100px 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .location-info-block{
      margin-bottom: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--gray-lt);
    }
    .location-info-block:last-of-type{
      border-bottom: none;
    }
    .location-info-label{
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .location-info-value{
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: var(--black);
      line-height: 1.35;
    }
    .location-info-value small{
      display: block;
      font-family: var(--sans);
      font-size: 14px;
      color: var(--gray-dark);
      font-weight: 400;
      margin-top: 4px;
    }
    .location-map{
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .location-map iframe{
      width: 100%;
      height: 100%;
      border: none;
    }

    /* ══════════════════════════════════════════════════
       CTA FINAL
    ══════════════════════════════════════════════════ */
    .final-cta{
      background: var(--red);
      color: var(--white);
      padding: 120px 32px;
      text-align: center;
    }
    .final-cta-inner{
      max-width: 720px;
      margin: 0 auto;
    }
    .final-cta h2{
      font-family: var(--serif);
      font-size: clamp(36px, 5vw, 60px);
      line-height: 1.05;
      font-weight: 500;
      margin-bottom: 24px;
      letter-spacing: -.015em;
    }
    .final-cta h2 em{
      font-style: italic;
      color: var(--black);
    }
    .final-cta p{
      font-size: 17px;
      line-height: 1.55;
      opacity: .92;
      margin-bottom: 44px;
    }
    .btn-final{
      background: var(--white);
      color: var(--red);
      padding: 20px 40px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      transition: all .25s ease;
    }
    .btn-final:hover{
      background: var(--black);
      color: var(--white);
      transform: translateY(-2px);
    }

    

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — todo junto
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){

      .nav { padding: 12px 20px; }
      .nav-menu { display: none; }
      .nav-cta { padding: 9px 16px; font-size: 10px; }

      .page-hero { padding: 130px 20px 70px; }
      .page-hero-photo { display: none; }
      .page-h1 { margin-bottom: 24px; }

      section { padding: 70px 20px; }

      .history-grid { grid-template-columns: 1fr; gap: 40px; }
      .history-year { position: static; }
      .history-text p { font-size: 17px; }
      .history-text p:first-of-type::first-letter { font-size: 56px; }

      .timeline-grid::before { left: 60px; }
      .timeline-item { grid-template-columns: 50px 30px 1fr; gap: 20px; }
      .timeline-year { font-size: 22px; }

      .values-grid { grid-template-columns: 1fr; gap: 16px; }

      .museum { padding: 70px 20px; }
      .museum-grid { grid-template-columns: 1fr; gap: 40px; }
      .museum-lead { font-size: 18px; }

      .mvv { padding: 70px 20px; }
      .mvv-grid { grid-template-columns: 1fr; gap: 20px; }
      .mvv-block { padding: 28px 24px 28px 28px; }
      .mvv-text { font-size: 18px; }

      .big-quote { padding: 80px 20px; }

      .name-story { padding: 70px 20px; }
      .name-story-grid { grid-template-columns: 1fr; gap: 40px; }
      .name-story-visual { aspect-ratio: 4/3; }

      .final-cta { padding: 80px 20px; }

      .footer-top { grid-template-columns: 1fr; gap: 40px; }
      .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }


      .nav { padding: 12px 20px; }
      .nav-menu { display: none; }
      .nav-mobile-toggle { display: flex; }
      .nav-cta { padding: 9px 16px; font-size: 10px; }

      .hero { padding: 110px 20px 60px; min-height: auto; }
      .hero-photo { display: none; }
      .hero-bird { width: 100%; right: -40%; opacity: .04; }
      .hero-h1 { margin-bottom: 20px; }
      .hero-sub { font-size: 17px; margin-bottom: 36px; }
      .hero-ctas { flex-direction: column; align-items: stretch; }
      .hero-ctas a, .hero-ctas button { justify-content: center; }
      .hero-trust { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
      .trust-item strong { font-size: 22px; }

      section { padding: 70px 20px; }
      .section-lead { font-size: 16px; margin-bottom: 40px; }

      .pillars-grid { grid-template-columns: 1fr; }
      .pillar { padding: 32px 24px; border-right: none !important; gap: 20px; }

      .featured-grid { grid-template-columns: 1fr; gap: 16px; }
      .featured-card { min-height: auto; padding: 36px 28px 32px; }

      .other-grid { grid-template-columns: 1fr; }
      .spec-item { border-right: none !important; }

      .editorial-quote { padding: 80px 20px; }

      .team-grid { grid-template-columns: 1fr; gap: 24px; }

      .location-grid { grid-template-columns: 1fr; }
      .location-info { padding: 60px 24px; }
      .location-map { min-height: 300px; }

      .final-cta { padding: 80px 20px; }

      .footer-top { grid-template-columns: 1fr; gap: 40px; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }

    }

/* ═══════════════════════════════════════════════════════════
   COMPONENTES DE PÁGINAS INTERIORES
   (especialidades · profesionales · contacto)
   ═══════════════════════════════════════════════════════════ */

/* ══════════════ GRID DE ESPECIALIDADES ══════════════ */
    .esp-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      margin-top: 60px;
      border-top: 1px solid var(--gray-lt);
    }
    .esp-card{
      padding: 44px 40px;
      border-bottom: 1px solid var(--gray-lt);
      transition: background .25s ease;
      display: block;
    }
    .esp-card:nth-child(odd){ border-right: 1px solid var(--gray-lt); }
    .esp-card:hover{ background: var(--cream); }
    .esp-card-top{
      display: flex;
      align-items: baseline;
      gap: 18px;
      margin-bottom: 14px;
    }
    .esp-num{
      font-family: var(--serif);
      font-style: italic;
      font-size: 28px;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
    }
    .esp-card h3{
      font-family: var(--serif);
      font-size: 27px;
      font-weight: 500;
      line-height: 1.12;
      color: var(--black);
    }
    .esp-card h3 em{ font-style: italic; color: var(--red); }
    .esp-desc{
      font-size: 15px;
      color: var(--gray-dark);
      line-height: 1.65;
      margin-bottom: 18px;
      padding-left: 46px;
    }
    .esp-meta{
      padding-left: 46px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      align-items: center;
    }
    .esp-doc{
      font-size: 12px;
      color: var(--gray);
      font-weight: 500;
    }
    .esp-doc strong{ color: var(--black); font-weight: 600; }
    .esp-link{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--red);
      border-bottom: 1.5px solid var(--red);
      padding-bottom: 4px;
      transition: all .2s ease;
    }
    .esp-card:hover .esp-link{ color: var(--black); border-color: var(--black); }

/* ══════════════ FICHAS DE PROFESIONALES ══════════════ */
    .prof-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px 32px;
      margin-top: 60px;
    }
    .prof-card{ text-align: left; }
    .prof-photo{
      aspect-ratio: 3/4;
      background: var(--gray-xlt);
      margin-bottom: 22px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .prof-photo img{ width: 100%; height: 100%; object-fit: cover; }
    .prof-photo-ph{
      font-family: var(--serif);
      font-style: italic;
      font-size: 42px;
      color: var(--gray-lt);
    }
    .prof-role{
      font-size: 10px;
      letter-spacing: .24em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .prof-name{
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 500;
      line-height: 1.15;
      margin-bottom: 10px;
      color: var(--black);
    }
    .prof-esp{
      font-size: 13px;
      color: var(--gray-dark);
      line-height: 1.5;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--gray-lt);
    }
    .prof-bio{
      font-size: 14px;
      color: var(--gray-dark);
      line-height: 1.65;
    }

/* ══════════════ PÁGINA DE CONTACTO ══════════════ */
    .cont-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .cont-block{
      padding-bottom: 32px;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--gray-lt);
    }
    .cont-block:last-child{ border-bottom: none; margin-bottom: 0; }
    .cont-label{
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--red);
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .cont-value{
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      line-height: 1.3;
      color: var(--black);
      margin-bottom: 6px;
    }
    .cont-value a{ color: var(--black); transition: color .2s ease; }
    .cont-value a:hover{ color: var(--red); }
    .cont-sub{
      font-size: 14px;
      color: var(--gray-dark);
      line-height: 1.55;
    }
    .cont-mapa{
      width: 100%;
      height: 420px;
      border: 1px solid var(--gray-lt);
      margin-top: 24px;
    }
    .cont-mapa iframe{ width: 100%; height: 100%; border: none; display: block; }
    .horario-tabla{
      width: 100%;
      border-collapse: collapse;
      margin-top: 4px;
    }
    .horario-tabla tr{ border-bottom: 1px solid var(--gray-lt); }
    .horario-tabla tr:last-child{ border-bottom: none; }
    .horario-tabla td{
      padding: 11px 0;
      font-size: 15px;
      color: var(--black);
    }
    .horario-tabla td:last-child{
      text-align: right;
      color: var(--gray-dark);
      font-weight: 500;
    }
    .horario-tabla tr.cerrado td{ color: var(--gray); }
    .llegar-lista{
      list-style: none;
      margin-top: 4px;
    }
    .llegar-lista li{
      padding: 12px 0 12px 30px;
      position: relative;
      font-size: 15px;
      color: var(--gray-dark);
      line-height: 1.55;
      border-bottom: 1px solid var(--gray-lt);
    }
    .llegar-lista li:last-child{ border-bottom: none; }
    .llegar-lista li::before{
      content: '—';
      position: absolute;
      left: 0;
      color: var(--red);
      font-weight: 700;
    }
    .llegar-lista li strong{ color: var(--black); font-weight: 600; }

/* ══════════════ RESPONSIVE DE LAS INTERIORES ══════════════ */
@media (max-width: 900px){
  .esp-grid{ grid-template-columns: 1fr; }
  .esp-card{ padding: 30px 22px; border-right: none !important; }
  .esp-card h3{ font-size: 23px; }
  .esp-desc, .esp-meta{ padding-left: 0; }

  .prof-grid{ grid-template-columns: 1fr; gap: 36px; }

  .cont-grid{ grid-template-columns: 1fr; gap: 44px; }
  .cont-mapa{ height: 320px; }
  .cont-value{ font-size: 21px; }
}

/* ══════════════ MONOGRAMA (mientras no hay foto) ══════════════
   Se ve como decisión editorial, no como imagen faltante.
   Al tener las fotos: reemplazar el <div class="mono"> por un <img>. */
    .mono{
      width: 100%;
      height: 100%;
      background: var(--cream-deep);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      position: relative;
    }
    .mono::after{
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--red);
      opacity: .85;
    }
    .mono-letras{
      font-family: var(--serif);
      font-size: 54px;
      font-weight: 500;
      letter-spacing: .04em;
      color: var(--black);
      opacity: .78;
      line-height: 1;
    }
    .mono-letras em{ font-style: italic; color: var(--red); }
    .mono-linea{
      width: 34px;
      height: 1px;
      background: var(--black);
      opacity: .22;
    }
    @media (max-width: 900px){
      .mono-letras{ font-size: 46px; }
    }