/* =========================================================
     DESIGN TOKENS — paleta extraída por análisis de píxeles
     del logo institucional (ver nota de verificación de color)
     ========================================================= */
  :root{
    --sky:        #00AAE6;  /* azul cielo — arco del logo, decorativo */
    --sky-dark:   #007AA8;  /* azul accesible (AA) para texto/botones */
    --sky-light:  #78C8FA;  /* celeste — acentos suaves */
    --magenta:    #DC2882;  /* magenta — cinta del logo, decorativo */
    --magenta-dark:#C21F73; /* magenta accesible (AA) para botones */
    --pink-light: #F096BE;  /* rosa claro — acentos suaves */
    --navy:       #324682;  /* azul marino — texto y tipografía de marca */
    --bg-soft:    #F2FAFF;  /* fondo alterno muy claro */
    --gray-100:   #F5F6F8;
    --gray-300:   #E2E6EC;
    --gray-600:   #5A6472;
    --white:      #FFFFFF;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-sm: 0 2px 10px rgba(50,70,130,.08);
    --shadow-md: 0 10px 30px rgba(50,70,130,.12);
    --shadow-lg: 0 20px 50px rgba(50,70,130,.18);
    --ease: cubic-bezier(.4,0,.2,1);
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    font-family:'Poppins',sans-serif;
    color: var(--navy);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
  }

  img{ max-width:100%; display:block; }

  a{ color: inherit; }

  /* ========== JUSTIFICACIÓN DE TEXTO (párrafos de contenido, todo el sitio) ==========
     Se excluye .quote-block p (la cita se mantiene centrada, no justificada,
     por convención tipográfica de citas destacadas). */
  .hero p.lead,
  .about-preview p,
  .card-mv p,
  .resena-text p,
  .info-card p,
  .section-sub,
  .location-info p,
  .page-header p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }


  h1,h2,h3{
    font-weight:700;
    line-height:1.2;
    margin:0 0 .6em;
  }

  .container-xl{
    max-width:1200px;
    margin:0 auto;
    padding-inline:1.5rem;
  }

  .kicker{
    display:inline-block;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--magenta-dark);
    background: color-mix(in srgb, var(--magenta) 12%, white);
    padding:.35rem .9rem;
    border-radius: 999px;
    margin-bottom:1rem;
  }

  .section{ padding: clamp(3rem, 6vw, 5.5rem) 0; }
  .section--soft{ background: var(--bg-soft); }

  .section-title{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--navy);
    text-align:center;
  }
  .section-sub{
    color: var(--gray-600);
    max-width:640px;
    margin:0 auto 2.5rem;
    font-size:1.05rem;
    line-height:1.7;
  }

  /* Skip link — accesibilidad de teclado */
  .skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    background: var(--navy);
    color:#fff;
    padding:.75rem 1.25rem;
    border-radius: 0 0 8px 0;
    z-index:2000;
  }
  .skip-link:focus{ left:0; top:0; }

  :focus-visible{
    outline: 3px solid var(--sky-dark);
    outline-offset: 2px;
  }

  /* ========== NAVBAR ========== */
  .site-header{
    position: sticky;
    top:0;
    z-index:1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
  }
  .navbar{ padding:.6rem 0; }
  .brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    text-decoration:none;
  }
  .brand img{
    width:52px; height:52px;
    object-fit:contain;
    border-radius:50%;
  }
  .brand-text{ line-height:1.15; }
  .brand-text strong{
    display:block;
    font-size:1.15rem;
    color: var(--navy);
    font-weight:700;
  }
  .brand-text span{
    display:block;
    font-size:.72rem;
    color: var(--gray-600);
    font-weight:500;
    letter-spacing:.02em;
  }

  .navbar-nav .nav-link{
    color: var(--navy) !important;
    font-weight:500;
    padding:.55rem 1rem !important;
    border-radius: 999px;
    transition: background var(--ease) .2s, color var(--ease) .2s;
  }
  .navbar-nav .nav-link:hover{
    background: var(--bg-soft);
    color: var(--sky-dark) !important;
  }
  .navbar-nav .nav-link.active{
    background: var(--sky-dark);
    color:#fff !important;
  }
  .navbar-toggler{ border:none; box-shadow:none !important; }

  /* ========== BOTONES ========== */
  .btn-brand{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-weight:600;
    padding:.85rem 1.6rem;
    border-radius: 999px;
    text-decoration:none;
    border:2px solid transparent;
    transition: transform var(--ease) .2s, box-shadow var(--ease) .2s, background var(--ease) .2s;
    cursor:pointer;
    font-size:.98rem;
  }
  .btn-brand--primary{
    background: var(--magenta-dark);
    color:#fff;
    box-shadow: var(--shadow-sm);
  }
  .btn-brand--primary:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: #a81a62;
    color:#fff;
  }
  .btn-brand--ghost{
    background: transparent;
    color: var(--navy);
    border-color: var(--gray-300);
  }
  .btn-brand--ghost:hover{
    border-color: var(--sky-dark);
    color: var(--sky-dark);
    transform: translateY(-2px);
  }

  /* ========== HERO ========== */
  .hero{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem,5vw,4rem);
    align-items:center;
    padding: clamp(2.5rem,6vw,4.5rem) 0;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    top:-120px; right:-160px;
    width:420px; height:420px;
    background: radial-gradient(circle, var(--sky-light) 0%, transparent 70%);
    opacity:.35;
    z-index:-1;
    border-radius:50%;
  }
  .hero h1{
    font-size: clamp(2.1rem, 4.2vw, 3.2rem);
    color: var(--navy);
  }
  .hero h1 .accent{ color: var(--sky-dark); }
  .hero p.lead{
    color: var(--gray-600);
    font-size:1.08rem;
    line-height:1.75;
    max-width:52ch;
    margin-bottom:1.8rem;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

  .hero-media{ position:relative; }
  .hero-media .frame{
    position:relative;
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: var(--shadow-lg);
    border: 6px solid var(--white);
    outline: 3px solid var(--bg-soft);
  }
  .hero-media .frame img{ height:340px; object-fit:cover; width:100%; }
  .hero-media .blob{
    position:absolute;
    inset:auto -24px -24px auto;
    width:130px; height:130px;
    background: var(--magenta);
    border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
    z-index:-1;
    opacity:.85;
  }
  .carousel-indicators [data-bs-target]{
    background-color: var(--white);
    width:8px; height:8px; border-radius:50%;
  }

  /* ========== ABOUT PREVIEW ========== */
  .about-preview{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem,5vw,3.5rem);
    align-items:center;
  }
  .about-preview img{
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width:100%;
    height:320px;
    object-fit:cover;
  }
  .about-preview p{
    color: var(--gray-600);
    line-height:1.8;
    font-size:1.05rem;
    margin-bottom:1.6rem;
  }

  /* ========== TARJETAS ========== */
  .card-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap:1.8rem;
  }
  .card-brand{
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow:hidden;
    transition: transform var(--ease) .25s, box-shadow var(--ease) .25s;
    border:1px solid var(--gray-300);
  }
  .card-brand:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
  }
  .card-brand .card-media{ height:190px; overflow:hidden; }
  .card-brand .card-media img{
    width:100%; height:100%; object-fit:cover;
    transition: transform var(--ease) .4s;
  }
  .card-brand:hover .card-media img{ transform: scale(1.06); }
  .card-brand .card-body{ padding:1.3rem 1.4rem; }
  .card-brand h3{
    font-size:1.1rem;
    color: var(--navy);
    margin:0;
  }

  /* Tarjetas de graduación clicables (abren el lightbox) */
  .card-media[role="button"]{
    position:relative;
    cursor: zoom-in;
  }
  .card-media[role="button"]::after{
    content:"🔍";
    position:absolute;
    top:10px; right:10px;
    width:34px; height:34px;
    background: rgba(50,70,130,.55);
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem;
    opacity:0;
    transition: opacity .2s var(--ease);
  }
  .card-media[role="button"]:hover::after,
  .card-media[role="button"]:focus-visible::after{
    opacity:1;
  }

  /* ========== LIGHTBOX (ver imagen completa) ========== */
  .lightbox{
    position:fixed;
    inset:0;
    background: rgba(20,25,45,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 2rem;
    visibility:hidden;
    opacity:0;
    z-index:3000;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .lightbox.active{ visibility:visible; opacity:1; }
  .lightbox-content{
    position:relative;
    max-width: min(900px, 92vw);
    max-height: 88vh;
  }
  .lightbox-content img{
    max-width:100%;
    max-height:88vh;
    width:auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display:block;
  }
  .lightbox-caption{
    text-align:center;
    color: rgba(255,255,255,.85);
    margin-top:.9rem;
    font-size:.95rem;
  }
  .lightbox-close{
    position:absolute;
    top:-18px; right:-18px;
    width:42px; height:42px;
    border-radius:50%;
    background:#fff;
    color: var(--navy);
    border:none;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    box-shadow: var(--shadow-md);
    transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .lightbox-close:hover{
    transform: scale(1.08);
    background: var(--bg-soft);
  }
  @media (max-width: 576px){
    .lightbox-close{ top:-14px; right:0; }
  }

  .card-mv{
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow:hidden;
    height:100%;
    border-top:5px solid var(--sky-dark);
    transition: transform var(--ease) .25s, box-shadow var(--ease) .25s;
  }
  .card-mv.mv-vision{ border-top-color: var(--magenta-dark); }
  .card-mv:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .card-mv img{ height:190px; width:100%; object-fit:cover; }
  .card-mv .card-body{ padding:1.6rem; }
  .card-mv h3{ font-size:1.2rem; margin-bottom:.7rem; }
  .card-mv p{ color: var(--gray-600); line-height:1.75; font-size:.98rem; }

  /* ========== UBICACIÓN ========== */
  .location{
    display:grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(2rem,4vw,3rem);
    align-items:stretch;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow:hidden;
  }
  .location-info{
    padding: clamp(2rem,4vw,3rem);
    display:flex;
    flex-direction:column;
    justify-content:center;
    background: var(--navy);
    color:#fff;
  }
  .location-info h2{ color:#fff; }
  .location-info p{ color: rgba(255,255,255,.8); line-height:1.75; }
  .location-item{
    display:flex;
    gap:.8rem;
    align-items:flex-start;
    margin-top:1.1rem;
  }
  .location-item svg{ flex:none; margin-top:3px; color: var(--sky-light); }
  .location-item strong{ display:block; font-size:.85rem; opacity:.75; font-weight:500; }
  .location iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }

  /* ========== FOOTER ========== */
  .site-footer{
    background: var(--navy);
    color: rgba(255,255,255,.85);
    padding: 3rem 0 1.5rem;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap:2.5rem;
  }
  .footer-brand{ display:flex; gap:.8rem; align-items:center; margin-bottom:1rem; }
  .footer-brand img{ width:46px; height:46px; border-radius:50%; }
  .footer-brand strong{ color:#fff; font-size:1.05rem; }
  .site-footer h4{
    color:#fff; font-size:.95rem; text-transform:uppercase;
    letter-spacing:.05em; margin-bottom:1rem;
  }
  .site-footer ul{ list-style:none; padding:0; margin:0; }
  .site-footer li{ margin-bottom:.6rem; }
  .site-footer a{ text-decoration:none; color: rgba(255,255,255,.75); transition: color .2s; }
  .site-footer a:hover{ color: var(--sky-light); }
  .footer-bottom{
    text-align:center;
    margin-top:2.5rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:.85rem;
    color: rgba(255,255,255,.6);
  }

  /* ========== ANIMACIÓN AL SCROLL ========== */
  .reveal{
    opacity:0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-visible{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  /* ========== FLOTANTES ========== */
  .floating-stack{
    position:fixed;
    top:55%;
    right:0;
    transform: translateY(-50%);
    z-index:1050;
    display:flex;
    flex-direction:column;
    gap:.6rem;
  }
  .floating-btn{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.85rem;
    letter-spacing:.03em;
    padding:.9rem .6rem;
    border:none;
    border-radius: 12px 0 0 12px;
    cursor:pointer;
    box-shadow: var(--shadow-md);
    transition: transform .2s var(--ease), padding-right .2s var(--ease);
    color:#fff;
  }
  .floating-btn:hover{ padding-right:1rem; }
  .floating-btn.pagos{ background: var(--navy); }
  .floating-btn.registro{ background: var(--magenta-dark); }

  .modal-overlay{
    position:fixed; inset:0;
    background: rgba(50,70,130,.45);
    display:flex; align-items:center; justify-content:center;
    visibility:hidden; opacity:0;
    backdrop-filter: blur(4px);
    z-index:2000;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .modal-overlay.active{ visibility:visible; opacity:1; }
  .modal-card{
    background:#fff;
    padding:2.2rem 2.6rem;
    border-radius: var(--radius-md);
    text-align:center;
    box-shadow: var(--shadow-lg);
    max-width:320px;
    animation: popUp .3s var(--ease);
  }
  .modal-card .icon{ font-size:2.4rem; margin-bottom:.5rem; }
  .modal-card h2{ font-size:1.3rem; color:var(--navy); margin-bottom:.3rem; }
  .modal-card p{ color: var(--gray-600); margin:0; }
  @keyframes popUp{ from{ transform:scale(.85); opacity:0;} to{ transform:scale(1); opacity:1;} }

  .panel-registro{
    position:fixed; top:0; right:-100%;
    width:380px; max-width:92vw; height:100vh;
    background:#fff; color: var(--navy);
    padding:2.2rem 1.8rem;
    transition: right .35s var(--ease);
    z-index:2100;
    overflow-y:auto;
    box-shadow: -12px 0 40px rgba(50,70,130,.25);
  }
  .panel-registro.open{ right:0; }
  .panel-registro h2{ font-size:1.3rem; color: var(--navy); }
  .panel-registro > p{ color: var(--gray-600); font-weight:500; margin-bottom:1.4rem; }
  .panel-registro form{ display:flex; flex-direction:column; gap:.9rem; }
  .panel-registro label.field-label{
    font-size:.8rem; font-weight:600; color: var(--gray-600);
    margin-bottom:-.4rem;
  }
  .panel-registro input,
  .panel-registro select,
  .panel-registro textarea{
    padding:.7rem .9rem;
    border-radius: var(--radius-sm);
    border:1.5px solid var(--gray-300);
    font-size:.95rem;
    font-family:inherit;
    color: var(--navy);
    width:100%;
    transition: border-color .2s;
  }
  .panel-registro input:focus,
  .panel-registro select:focus,
  .panel-registro textarea:focus{
    border-color: var(--sky-dark);
    outline:none;
  }
  .panel-registro textarea{ resize:vertical; min-height:80px; }
  .panel-registro .check-label{
    font-size:.82rem; font-weight:400; color: var(--gray-600);
    display:flex; gap:.5rem; align-items:flex-start;
  }
  .panel-registro button[type="submit"]{
    background: var(--magenta-dark);
    color:#fff; font-weight:600; border:none;
    border-radius: 999px; padding:.85rem;
    margin-top:.4rem; cursor:pointer;
    transition: background .2s;
  }
  .panel-registro button[type="submit"]:hover{ background:#a81a62; }
  .cerrar-panel{
    position:absolute; top:14px; right:16px;
    background: var(--gray-100); border:none;
    width:34px; height:34px; border-radius:50%;
    font-size:20px; color: var(--navy); cursor:pointer;
    line-height:1;
  }

  .whatsapp-container{
    position:fixed; bottom:20px; left:20px;
    z-index:1040; font-family:'Poppins',sans-serif;
  }
  .whatsapp-button{
    background:#25d366; color:#fff;
    border-radius:999px; padding:.75rem 1.1rem;
    box-shadow: var(--shadow-md);
    display:flex; align-items:center; gap:.6rem;
    font-weight:600; font-size:.9rem;
    cursor:pointer; border:none;
    animation: floatY 2.4s infinite ease-in-out;
  }
  .whatsapp-button img{ width:22px; height:22px; }
  @keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
  .whatsapp-chatbox{
    display:none;
    position:absolute; bottom:64px; left:0;
    width:280px; background:#fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow:hidden; font-size:.9rem;
  }
  .chat-header{
    background:#25d366; color:#fff; padding:.8rem 1rem;
    font-weight:700; display:flex; justify-content:space-between; align-items:center;
  }
  .chat-close{ background:transparent; border:none; color:#fff; font-size:18px; cursor:pointer; }
  .chat-body{ padding:1rem; color: var(--navy); line-height:1.6; }
  .chat-footer{ background: var(--gray-100); padding:.8rem; text-align:center; }
  .chat-footer a{
    background:#25d366; color:#fff; padding:.55rem 1.1rem;
    border-radius:999px; font-weight:600; text-decoration:none; display:inline-block;
  }

  /* ========== ENCABEZADO DE PÁGINA INTERNA (Sobre Nosotros, etc.) ========== */
  .page-header{
    text-align:center;
    padding: clamp(2.5rem,5vw,3.5rem) 0 1rem;
  }
  .page-header h1{
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    color: var(--navy);
  }
  .page-header p{
    color: var(--gray-600);
    max-width:680px;
    margin:0 auto;
    font-size:1.05rem;
    line-height:1.75;
  }

  /* ========== VARIANTE: ENCABEZADO CON LOGO GRANDE + TEXTO ========== */
  .page-header--split{
    display:grid;
    grid-template-columns: minmax(200px,.8fr) 1.2fr;
    align-items:center;
    gap: clamp(2rem,5vw,3.5rem);
    text-align:left;
    max-width:1100px;
  }
  .page-header--split .kicker{ margin-bottom:1rem; }
  .page-header--split p{ margin:0; max-width:60ch; }
  .page-header-media{ justify-self:center; }
  .page-header-media img{
    width:100%;
    max-width:280px;
    height:auto;
    display:block;
    filter: drop-shadow(0 12px 24px rgba(50,70,130,.18));
  }
  @media (max-width: 768px){
    .page-header--split{
      grid-template-columns:1fr;
      text-align:center;
    }
    .page-header--split p{ margin:0 auto; }
    .page-header-media img{ max-width:180px; margin:0 auto; }
  }

  /* ========== TARJETA RESEÑA HISTÓRICA ========== */
  .resena{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem,4vw,3rem);
    align-items:start;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow:hidden;
  }
  .resena-text{
    min-width:0;
    padding: clamp(2rem,4vw,3rem);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .resena-text p{
    color: var(--gray-600);
    line-height:1.8;
    font-size:1.02rem;
    margin-bottom:1.1rem;
  }
  .resena-extra{
    display:none;
  }
  .resena-extra.open{
    display:block;
  }
  .resena-media{
    position:relative;
    min-width:0;
    border-radius: var(--radius-lg);
    overflow:hidden;
  }
  .resena-media img{
    display:block;
    width:100%;
    height:420px;
    object-fit:cover;
    object-position:center;
    cursor:zoom-in;
  }
  .resena-media::after{
    content:"🔍";
    position:absolute;
    top:14px; right:14px;
    width:36px; height:36px;
    background: rgba(50,70,130,.55);
    color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
    opacity:0;
    transition: opacity .2s var(--ease);
    pointer-events:none;
  }
  .resena-media:hover::after{ opacity:1; }

  @media (max-width: 900px){
    .resena{ grid-template-columns:1fr; }
    .resena-media{ order:-1; }
    .resena-media img{ height:260px; }
  }

  /* ========== CITA DESTACADA ========== */
  .quote-block{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding: 2.2rem 2rem;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    position:relative;
  }
  .quote-block::before{
    content:"“";
    display:block;
    font-family: Georgia, serif;
    font-size:3.5rem;
    line-height:1;
    color: var(--magenta);
    opacity:.5;
    margin-bottom:-.5rem;
  }
  .quote-block p{
    font-size:1.2rem;
    font-style:italic;
    color: var(--navy);
    line-height:1.6;
    margin:0;
  }

  /* ========== TARJETA DE INTRODUCCIÓN (texto simple) ========== */
  .info-card{
    max-width:900px;
    margin:0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.8rem,4vw,2.6rem);
  }
  .info-card p{
    color: var(--gray-600);
    line-height:1.85;
    font-size:1.03rem;
    margin-bottom:1rem;
  }
  .info-card p:last-child{ margin-bottom:0; }

  /* ========== DOCUMENTO PDF ========== */
  .doc-card{
    max-width:900px;
    margin:0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(1.6rem,4vw,2.4rem);
  }
  .doc-card h2{
    color: var(--navy);
    font-size:1.4rem;
    margin-bottom:1.2rem;
  }
  .doc-card iframe{
    width:100%;
    height:520px;
    border:1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    display:block;
  }
  .doc-download{
    text-align:center;
    margin-top:1.4rem;
  }

  /* ========== COMENTARIOS Y CALIFICACIONES ========== */
  .comment-card{
    max-width:800px;
    margin:0 auto;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(1.6rem,4vw,2.4rem);
  }
  .comment-card h2{
    color: var(--navy);
    font-size:1.4rem;
    margin-bottom:1.4rem;
  }
  .comment-form{
    display:flex;
    flex-direction:column;
    gap:.9rem;
    margin-bottom:2rem;
  }
  .comment-form input,
  .comment-form select,
  .comment-form textarea{
    padding:.7rem .9rem;
    border-radius: var(--radius-sm);
    border:1.5px solid var(--gray-300);
    font-size:.95rem;
    font-family:inherit;
    color: var(--navy);
    width:100%;
    transition: border-color .2s;
  }
  .comment-form input:focus,
  .comment-form select:focus,
  .comment-form textarea:focus{
    border-color: var(--sky-dark);
    outline:none;
  }
  .comment-form textarea{ resize:vertical; min-height:90px; }
  .comment-form label.field-label{
    font-size:.8rem; font-weight:600; color: var(--gray-600);
    margin-bottom:-.4rem;
  }

  .comment-list{ display:flex; flex-direction:column; gap:1rem; }
  .comment-item{
    position:relative;
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding:1.1rem 1.3rem;
  }
  .comment-item strong{ color: var(--navy); }
  .comment-item .comment-date{ font-size:.78rem; color: var(--gray-600); }
  .comment-item .stars{ color:#f5b400; font-size:1.05rem; margin:.3rem 0; }
  .comment-item p{ color: var(--gray-600); margin:0; line-height:1.6; }

  .comment-options-btn{
    position:absolute;
    top:10px; right:10px;
    background:transparent;
    border:none;
    color: var(--gray-600);
    font-size:1.2rem;
    cursor:pointer;
    width:30px; height:30px;
    border-radius:50%;
    line-height:1;
  }
  .comment-options-btn:hover{ background: rgba(50,70,130,.08); }
  .comment-options-menu{
    position:absolute;
    top:38px; right:10px;
    background:#fff;
    border:1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding:.4rem;
    display:none;
    z-index:10;
    min-width:120px;
  }
  .comment-options-menu button{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:.4rem .6rem;
    border-radius:6px;
    color: var(--navy);
    font-size:.88rem;
    cursor:pointer;
  }
  .comment-options-menu button:hover{ background: var(--bg-soft); }
  .comment-empty{ color: var(--gray-600); font-size:.95rem; text-align:center; padding:1rem 0; }

  /* ========== GALERÍA ========== */
  .gallery-category-header{
    text-align:center;
    margin-bottom:2rem;
  }
  .gallery-category-header h2{
    color: var(--navy);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    margin-bottom:0;
  }
  .gallery-divider{
    width:70px;
    height:4px;
    background: linear-gradient(90deg, var(--sky-dark), var(--sky));
    border-radius:999px;
    margin:.85rem auto 0;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap:.9rem;
  }
  .gallery-grid .card-media{
    height:150px;
    border-radius: var(--radius-sm);
    overflow:hidden;
    box-shadow: var(--shadow-sm);
    cursor:zoom-in;
    transition: transform var(--ease) .25s, box-shadow var(--ease) .25s;
  }
  .gallery-grid .card-media:hover,
  .gallery-grid .card-media:focus-visible{
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  .gallery-grid .card-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition: transform var(--ease) .4s;
  }
  .gallery-grid .card-media:hover img{ transform: scale(1.08); }

  /* ========== RESPONSIVE (encabezado y reseña) ========== */
  @media (max-width: 991px){
    .hero, .about-preview, .location{ grid-template-columns:1fr; }
    .location-info{ order:2; }
    .location iframe{ min-height:280px; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 576px){
    .footer-grid{ grid-template-columns:1fr; }
    .floating-btn{ font-size:.75rem; padding:.7rem .5rem; }
    .hero-media .frame img{ height:260px; }
  }