/* ==========================================================================
   NNS MODEL AGENCY — HOJA DE ESTILOS
   Manrope (titulares) + Inter (UI/texto) · Colores planos del logo
   ========================================================================== */

   :root {
    --color-magenta: #E71B6A;
    --color-purple: #8667AB;
  
    --color-ink: #0F172A;
    --color-ink-soft: #1E293B;
  
    --color-text: #1e1e24;
    --color-text-muted: #52525B;
    --color-text-soft: #71717A;
  
    --color-border: #E4E4E7;
    --color-bg: #FAFAF9;
    --color-bg-soft: #F4F4F5;
    --color-surface: #FFFFFF;
  
    --font-display: 'Nunito', -apple-system, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
  
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 14px 34px -8px rgba(15, 23, 42, 0.14);
  
    --header-height: 84px;
  }
  
  /* --- Reset y Base --- */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }

  /* Deja hueco para la cabecera fija al saltar a un ancla (#alta, #form-registro...) */
  [id] {
    scroll-margin-top: 100px;
  }
  
  body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1rem;
  }
  
  p, ol, ul {
    font-size: 0.95rem;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  
  .container {
    width: 90%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .py-4 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  
  /* ==========================================================================
     1. CABECERA GLOBAL Y NAVEGACIÓN
     ========================================================================== */
  #header-include {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
  }
  
  .main-header {
    width: 100%;
    min-height: var(--header-height);
    background-color: #ffffff;
    border-bottom: 3px solid var(--color-magenta);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }
  
  .header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  
  .logo img {
    height: 56px;
    width: auto;
    object-fit: contain;
  }
  
  .main-nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 2.3rem;
    align-items: center;
  }
  
  .main-nav a {
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.2s ease;
    white-space: nowrap;
  }
  
  .main-nav a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-magenta);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.28s ease;
  }
  
  .main-nav a:hover {
    color: var(--color-magenta);
  }
  
  .main-nav a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .main-nav a.active {
    color: var(--color-magenta);
  }
  
  .main-nav a.active::before {
    transform: scaleX(1);
  }
  
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-ink);
    margin: 0 auto;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  
  @media screen and (max-width: 900px) {
    .nav-toggle {
      display: flex;
    }
  
    .main-nav {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
      max-height: 0;
      opacity: 0;
      transform: translateY(-8px);
      overflow: hidden;
      visibility: hidden;
      transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.35s;
    }
  
    .main-nav.is-open {
      max-height: 400px;
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
      transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
    }
  
    .main-nav ul {
      flex-direction: column;
      gap: 0;
      padding: 0.4rem 0;
    }
  
    .main-nav li {
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
  
    .main-nav.is-open li {
      opacity: 1;
      transform: translateY(0);
    }
  
    .main-nav.is-open li:nth-child(1) { transition-delay: 0.06s; }
    .main-nav.is-open li:nth-child(2) { transition-delay: 0.11s; }
    .main-nav.is-open li:nth-child(3) { transition-delay: 0.16s; }
    .main-nav.is-open li:nth-child(4) { transition-delay: 0.21s; }
    .main-nav.is-open li:nth-child(5) { transition-delay: 0.26s; }
  
    .main-nav a {
      width: 100%;
      display: block;
      text-align: center;
      padding: 0.8rem 0;
      border-bottom: 1px solid var(--color-bg-soft);
    }
  
    .main-nav a::before {
      display: none;
    }
  }
  
  /* ==========================================================================
     2. TIRA DE SERVICIOS EN MOVIMIENTO (MARQUESINA)
     ========================================================================== */
  .marquee {
    background-color: var(--color-ink);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  
  .marquee-track {
    display: inline-flex;
    width: max-content;
    animation: marquee-scroll 28s linear infinite;
  }
  
  .marquee-track span {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .marquee-track span.dot {
    color: var(--color-magenta);
    padding: 0.65rem 0;
  }
  
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .marquee-track {
      animation: none;
    }
  }
  
  /* ==========================================================================
     3. CABECERA DE PÁGINA (HERO)
     ========================================================================== */
  .hero-banner,
  .page-hero {
    position: relative;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    text-align: center;
    padding: 1.7rem 1.5rem 1.6rem;
    overflow: hidden;
    isolation: isolate;
  }
  
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  
  .hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroCrossfade 15s infinite;
  }
  
  .hero-bg-slide:nth-child(1) { animation-delay: 0s; }
  .hero-bg-slide:nth-child(2) { animation-delay: 5s; }
  .hero-bg-slide:nth-child(3) { animation-delay: 10s; }
  
  @keyframes heroCrossfade {
    0% { opacity: 0; transform: scale(1.06); }
    6% { opacity: 1; }
    30% { opacity: 1; transform: scale(1.12); }
    38% { opacity: 0; }
    100% { opacity: 0; }
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(15, 23, 42, 0.58) 0%,
      rgba(15, 23, 42, 0.42) 45%,
      rgba(15, 23, 42, 0.62) 100%);
    z-index: -1;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero-bg-slide {
      animation: none;
      opacity: 0;
    }
    .hero-bg-slide:first-child {
      opacity: 1;
    }
  }
  
  .hero-banner h1,
  .page-hero h1,
  .page-hero .page-title {
    font-family: var(--font-display);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.75rem, 3.4vw, 2.45rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    opacity: 0;
    animation: heroFadeUp 0.7s ease 0.1s forwards;
  }
  
  /* El H1 de la portada lleva dos líneas: la marca y, debajo, lo que hacemos.
     La segunda es la que buscan en Google ("agencia de modelos en Valencia"),
     y va dentro del H1 a propósito: es la señal más fuerte de la página y
     dejarla solo en un párrafo la desaprovecha. */
  .hero-banner h1 .hero-marca {
    display: block;
  }

  .hero-banner h1 .hero-marca span {
    color: var(--color-magenta);
  }

  .hero-banner h1 .hero-claim {
    display: block;
    color: #ffffff;
    font-size: clamp(0.95rem, 1.7vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    margin-top: 0.5rem;
  }
  
  .hero-banner p,
  .page-hero p,
  .page-hero .page-subtitle {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
    font-weight: 400;
    max-width: 680px;
    margin: 0 auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: heroFadeUp 0.7s ease 0.25s forwards;
  }
  
  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero-banner h1,
    .page-hero h1,
    .hero-banner p,
    .page-hero p {
      animation: none;
      opacity: 1;
    }
  }
  
  main.container {
    margin-top: 3rem;
  }
  
  /* ==========================================================================
     4. ANIMACIÓN DE ENTRADA AL HACER SCROLL
     ========================================================================== */
  .reveal {
    opacity: 1;
    transform: none;
  }
  
  html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  html.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  @media (prefers-reduced-motion: reduce) {
    html.js .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  
  /* ==========================================================================
     5. TARJETAS Y REJILLAS
     ========================================================================== */
  .grid-forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  
  .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2.1rem 2.1rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  
  .card-img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 1.3rem;
    transition: transform 0.4s ease;
  }
  
  .card:hover .card-img {
    transform: scale(1.03);
  }
  
  .card h2 {
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-ink);
  }
  
  .card p {
    color: var(--color-text-muted);
    margin-bottom: 1.6rem;
    text-align: center;
  }
  
  .services-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
  }
  
  .service-card {
    text-align: center;
    background-color: var(--color-surface);
    padding: 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
  
  .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  
  .service-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 210px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 1.2rem;
    transition: transform 0.4s ease;
  }
  
  .service-card:hover .service-card-img {
    transform: scale(1.03);
  }
  
  .service-card h3 {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.7rem;
    line-height: 1.3;
  }
  
  .service-card p {
    color: var(--color-text-muted);
    font-size: 0.93rem;
    line-height: 1.65;
  }

  /* Tarjetas de "paso a paso" (como-trabajamos.html) con numeración */
  .formularios-box {
    text-align: center;
  }

  .service-card.card-paso {
    position: relative;
    padding-top: 2.4rem;
    /* En columna para poder empujar el botón al fondo: así los tres quedan
       alineados aunque los textos tengan distinta longitud. */
    display: flex;
    flex-direction: column;
  }

  /* El párrafo ocupa el hueco sobrante y deja el botón abajo del todo */
  .service-card.card-paso p {
    flex: 1 1 auto;
  }

  .service-card.card-paso .btn {
    margin-top: 1.6rem;   /* aire entre el texto y el botón */
    align-self: center;
  }

  .paso-number {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-magenta);
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(231, 27, 106, 0.35);
  }

  .divider {
    border: 0;
    height: 1px;
    background: var(--color-border);
    margin: 3rem 0;
  }
  
  /* ==========================================================================
     6. INTRODUCCIONES / TEXTO DESTACADO
     ========================================================================== */
  .intro-section {
    max-width: 780px;
    margin: 0 auto 3rem auto;
    text-align: center;
  }
  
  .intro-section h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    margin-bottom: 1.1rem;
  }
  
  .intro-section p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
  }
  
  /* ==========================================================================
     7. FORMULARIOS Y BRIEFINGS
     ========================================================================== */
  .briefing-section {
    background-color: var(--color-surface);
    padding: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 3.5rem;
  }
  
  .briefing-section.narrow {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .section-title h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
  }
  
  .section-title p {
    font-family: var(--font-body);
    color: var(--color-text-soft);
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }
  
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--color-ink-soft);
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 0 1rem;
    height: 47px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
  }
  
  .form-group textarea {
    height: auto;
    padding: 0.85rem 1rem;
    resize: vertical;
  }
  
  .form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2352525b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.65rem auto;
    padding-right: 2.5rem;
    cursor: pointer;
  }
  
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--color-magenta);
    box-shadow: 0 0 0 3px rgba(231, 27, 106, 0.12);
  }
  
  .form-actions {
    text-align: center;
    margin-top: 2rem;
  }
  
  .form-status {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    min-height: 1.2em;
  }
  
  .form-status.is-success {
    color: #15803d;
  }
  
  .form-status.is-error {
    color: #b91c1c;
  }
  
  /* ==========================================================================
     8. PESTAÑAS E IFRAME (Registro de Modelos)
     ========================================================================== */
  .portal-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  
  .portal-aside {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  
  .portal-aside-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .portal-steps {
    padding: 1.5rem;
    font-size: 0.88rem;
  }
  
  .portal-steps h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
  }
  
  .portal-steps h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 1.2rem 0 0.5rem 0;
  }
  
  .portal-steps p, 
  .portal-steps li {
    font-size: 0.88rem !important;
    line-height: 1.55;
    color: var(--color-text-muted);
  }
  
  .portal-steps ol {
    margin: 0.8rem 0 1rem 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
  }
  
  .portal-steps ol li strong {
    color: var(--color-ink);
  }
  
  .portal-steps li,
  .portal-steps ol li,
  .portal-steps p {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
  }
  
  .portal-steps li {
    display: list-item;
    width: 100%;
  }
  
  .portal-main {
    min-width: 0;
  }
  
  @media (max-width: 900px) {
    .portal-layout {
      grid-template-columns: 1fr;
    }
  
    .portal-aside {
      position: static;
    }
  
    .portal-aside-img {
      height: 160px;
    }
  }
  
  .photo-guide {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 850px;
    margin: 0 auto 1.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    box-shadow: var(--shadow-sm);
  }
  
  .photo-guide-thumb.is-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    color: var(--color-text-soft);
  }
  
  .photo-guide-thumb.is-pending svg {
    width: 30px;
    height: 30px;
  }
  
  .guide-figure {
    max-width: 850px;
    margin: 0 auto 1.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
  }
  
  .guide-figure img {
    width: 100%;
    border-radius: 6px;
  }
  
  .guide-figure figcaption {
    margin-top: 0.8rem;
    text-align: center;
    font-size: 0.83rem;
    color: var(--color-text-soft);
    line-height: 1.5;
  }
  
  .photo-guide-thumb {
    flex-shrink: 0;
    display: block;
    width: 90px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease;
  }
  
  .photo-guide-thumb:hover {
    transform: scale(1.03);
  }
  
  .photo-guide-thumb img {
    width: 100%;
    display: block;
  }
  
  .photo-guide-text h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
  }
  
  .photo-guide-text p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.7rem;
  }
  
  .photo-guide-text .btn {
    padding: 0.5rem 1.1rem;
    font-size: 0.72rem;
  }
  
  @media (max-width: 640px) {
    .photo-guide {
      flex-direction: column;
      text-align: center;
    }
  
    .photo-guide-thumb {
      width: 130px;
    }
  }
  
  .tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
  }
  
  .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
  }
  
  .tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  .tab-btn:hover {
    color: var(--color-ink);
    background-color: var(--color-bg-soft);
  }
  
  .tab-btn.active {
    color: var(--color-magenta);
    border-bottom: 2px solid var(--color-magenta);
    background-color: var(--color-surface);
  }
  
  .tab-content {
    display: none;
  }
  
  .tab-content.active {
    display: block;
    animation: heroFadeUp 0.4s ease;
  }
  
  /* ==========================================================================
     9. CONTACTO
     ========================================================================== */
  .contact-channels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  .contact-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  
  .card-icon {
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .contact-card h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--color-ink);
    margin-bottom: 0.7rem;
  }
  
  .contact-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .direct-details {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
  }
  
  .direct-details p {
    margin-bottom: 0.4rem;
    color: var(--color-ink-soft);
  }
  
  .direct-details p:last-child {
    margin-bottom: 0;
  }
  
  /* ==========================================================================
     10. BOTONES
     ========================================================================== */
  .btn {
    display: inline-block;
    background-color: transparent;
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
    padding: 0.8rem 1.9rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  
  .btn:hover {
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(231, 27, 106, 0.3);
  }
  
  .btn-large {
    padding: 1rem 2.6rem;
    font-size: 0.86rem;
  }
  
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* ==========================================================================
     11. PIE DE PÁGINA Y MARCAS
     ========================================================================== */
  .main-footer {
    background-color: var(--color-ink);
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 2.5rem 0;
    margin-top: 4rem;
    font-size: 0.85rem;
    border-top: 3px solid var(--color-magenta);
  }
  
  .diag-band {
    position: relative;
    height: 54px;
    overflow: hidden;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
  }
  
  .diag-band span {
    position: absolute;
    top: -20%;
    height: 140%;
    transform: skewX(-24deg) translateX(-40px);
    opacity: 0;
    animation: diagIn 0.75s cubic-bezier(.2,.7,.3,1) forwards;
  }
  
  .diag-band .d1 { right: 27%;  width: 26%; background: #FDF2F6; animation-delay: .05s; }
  .diag-band .d2 { right: 20%;  width: 9%;  background: #FBD6E5; animation-delay: .18s; }
  .diag-band .d3 { right: 6.5%; width: 14%; background: var(--color-magenta); animation-delay: .31s; }
  .diag-band .d4 { right: -3%;  width: 8%;  background: var(--color-purple); animation-delay: .44s; }
  
  @keyframes diagIn {
    from { opacity: 0; transform: skewX(-24deg) translateX(-40px); }
    to   { opacity: 1; transform: skewX(-24deg) translateX(0); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .diag-band span { animation: none; opacity: 1; transform: skewX(-24deg); }
  }
  
  @media (max-width: 768px) {
    .diag-band { height: 34px; }
  }
  
  .photo-strip {
    overflow: hidden;
    background: var(--color-ink);
    padding: 1.1rem 0;
    position: relative;
  }
  
  .photo-strip::before,
  .photo-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
  }
  
  .photo-strip::before { left: 0;  background: linear-gradient(90deg, var(--color-ink), transparent); }
  .photo-strip::after  { right: 0; background: linear-gradient(270deg, var(--color-ink), transparent); }
  
  .photo-strip-track {
    display: flex;
    width: max-content;
    gap: 14px;
    animation: photoScroll 46s linear infinite;
  }
  
  .photo-strip-track img {
    width: 128px;
    height: 170px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    filter: grayscale(100%);
    opacity: 0.82;
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  }
  
  .photo-strip-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
  }
  
  @keyframes photoScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .photo-strip-track { animation: none; }
  }
  
  @media (max-width: 768px) {
    .photo-strip-track img { width: 96px; height: 128px; }
    .photo-strip::before, .photo-strip::after { width: 44px; }
  }
  
  /* ==========================================================================
     11d. BLOQUES DE TEXTO Y SECCIONES DE CONTENIDO
     ========================================================================== */
  .text-block {
    max-width: 820px;
    margin: 0 auto 3rem;
  }
  
  .text-block.center { text-align: left; }
  
  .text-block h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    margin-bottom: 0.5rem;
  }
  
  .text-block p {
    color: var(--color-text-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  
  .text-block p:last-child { margin-bottom: 0; }
  
  .feature-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem 1.6rem;
    margin-top: 1.4rem;
  }
  
  .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.96rem;
    color: var(--color-text-muted);
    line-height: 1.5;
  }
  
  .feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 0.55rem;
    border-radius: 2px;
    background: var(--color-magenta);
    transform: rotate(45deg);
  }
  
  .split-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
    width: 100%;
    max-width: 1400px;
    margin: 80px auto;
    padding: 0 20px;
  }
  
  .split-feature-figure {
    margin: 0;
    width: 100%;
  }
  
  .split-feature-img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }
  
  /* Banda de una sola imagen, centrada (no usa rejilla de 2 columnas) */
  .feature-banner {
    display: block;
    width: 100%;
    margin: 2.5rem auto 0;
    text-align: center;
  }

  .feature-banner figure {
    margin: 0;
  }

  .feature-banner img {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
  }

  .split-feature-text {
    padding: 2.5rem 2.5rem 2.5rem 0;
  }
  
  .split-feature-text h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 800;
    margin-bottom: 0.9rem;
    line-height: 1.2;
  }
  
  .split-feature-text h2 span { color: var(--color-magenta); }
  
  .split-feature-text p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1.4rem;
  }
  
  @media (max-width: 768px) {
    .split-feature { grid-template-columns: 1fr; }
    .split-feature-img { min-height: 200px; max-height: 240px; }
    .split-feature-text { padding: 1.8rem; text-align: center; }
  }
  
  /* ==========================================================================
     11e. PÁGINAS LEGALES
     ========================================================================== */
  .legal-content {
    max-width: 820px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-sm);
  }
  
  .legal-content h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 2.2rem 0 0.7rem;
  }
  
  .legal-content h2:first-child { margin-top: 0; }
  
  .legal-content p,
  .legal-content li {
    color: var(--color-text-muted);
    font-size: 0.97rem;
    line-height: 1.75;
    margin-bottom: 0.8rem;
  }
  
  .legal-content ul { margin: 0 0 1rem 1.2rem; }
  
  .legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.6rem;
    font-size: 0.9rem;
  }
  
  .legal-content th,
  .legal-content td {
    border: 1px solid var(--color-border);
    padding: 0.65rem 0.8rem;
    text-align: left;
    vertical-align: top;
  }
  
  .legal-content th {
    background: var(--color-bg-soft);
    font-weight: 700;
    color: var(--color-ink);
  }
  
  .legal-content td { color: var(--color-text-muted); }
  
  .legal-updated {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
  }
  
  @media (max-width: 768px) {
    .legal-content { padding: 1.6rem; }
  }
  
  /* ==========================================================================
     11f. AVISO DE COOKIES
     ========================================================================== */
  .cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 140%);
    z-index: 2000;
    width: min(940px, calc(100% - 32px));
    background: var(--color-ink);
    color: rgba(255,255,255,0.82);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 45px rgba(0,0,0,0.3);
    padding: 1.3rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
  }
  
  .cookie-banner.is-visible { transform: translate(-50%, 0); }
  
  .cookie-banner p {
    flex: 1;
    min-width: 240px;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
  }
  
  .cookie-banner a { color: #ffffff; text-decoration: underline; }
  
  .cookie-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  
  .cookie-actions .btn {
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    background: transparent;
    padding: 0.6rem 1.2rem;
    font-size: 0.74rem;
  }
  
  .cookie-actions .btn:hover {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
  }
  
  .cookie-actions .btn.solid {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
  }
  
  @media (max-width: 640px) {
    .cookie-banner { padding: 1.1rem; gap: 0.9rem; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; }
  }
  
  .footer-links {
    margin-top: 0.7rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }
  
  .footer-links a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.2s ease;
  }
  
  .footer-links a:hover { color: var(--color-magenta); }

  /* Iconos de redes sociales del pie */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.3rem;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.65);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .footer-social a:hover {
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
    color: #ffffff;
    transform: translateY(-2px);
  }

  .footer-social svg {
    width: 18px;
    height: 18px;
  }
  
  /* ==========================================================================
     13. CATÁLOGO DE PERFILES
     ========================================================================== */
  .catalogo-page {
    padding-top: 2.6rem;
    padding-bottom: 2rem;
  }
  
  .catalogo-head {
    max-width: 720px;
    margin: 0 auto 2.2rem;
    text-align: center;
  }
  
  .catalogo-head h1 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 0.7rem;
  }
  
  .catalogo-head p {
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.65;
  }
  
  .catalogo-head a { color: var(--color-magenta); }
  
  .catalogo-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 0.8rem;
    margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--color-border);
  }
  
  .board-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  
  .board-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.45rem 1rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .board-btn:hover { color: var(--color-ink); background: var(--color-bg-soft); }
  
  .board-btn.active {
    color: var(--color-magenta);
    border-color: var(--color-magenta);
  }
  
  .view-toggle { display: flex; gap: 0.25rem; }
  
  .view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .view-btn svg { width: 15px; height: 15px; }
  .view-btn:hover { color: var(--color-ink); }
  
  .view-btn.active {
    color: var(--color-ink);
    border-color: var(--color-ink);
  }
  
  .sample-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    background: #FFF5F9;
    border: 1px solid rgba(231, 27, 106, 0.28);
    border-left: 4px solid var(--color-magenta);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
  }
  
  .sample-tag {
    flex-shrink: 0;
    background: var(--color-magenta);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 100px;
    margin-top: 2px;
  }
  
  .sample-notice p {
    flex: 1;
    min-width: 240px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: left;
  }
  
  .sample-notice a { color: var(--color-magenta); font-weight: 700; }
  
  @media (max-width: 560px) {
    .sample-notice { padding: 1rem; gap: 0.7rem; }
    .sample-notice p { font-size: 0.85rem; }
  }
  
  .casting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 1.6rem 1.1rem;
  }
  
  .casting-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }
  
  .casting-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
  }
  
  .casting-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--color-bg-soft);
    overflow: hidden;
  }
  
  .casting-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .casting-card:hover .casting-photo img { transform: scale(1.03); }
  
  .frame-mark {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid var(--color-magenta);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  
  .casting-card:hover .frame-mark,
  .casting-card:focus-within .frame-mark {
    opacity: 0.9;
    transform: scale(1);
  }
  
  @media (hover: none) {
    .frame-mark { opacity: 0.9; transform: none; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .frame-mark { transition: none; }
  }
  
  .frame-mark.tl { top: 8px; left: 8px;  border-right: 0; border-bottom: 0; }
  .frame-mark.tr { top: 8px; right: 8px; border-left: 0;  border-bottom: 0; }
  .frame-mark.bl { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
  .frame-mark.br { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }
  
  .casting-info {
    padding: 0.7rem 0.75rem 0.8rem;
    text-align: center;
  }
  
  .casting-info h2 {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .casting-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.28s ease, opacity 0.24s ease,
                transform 0.28s ease, margin-top 0.28s ease;
  }
  
  .casting-card:hover .casting-meta,
  .casting-card:focus-within .casting-meta {
    max-height: 2.4rem;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.3rem;
  }
  
  .casting-meta .sep { color: var(--color-magenta); font-weight: 800; }
  
  @media (hover: none) {
    .casting-meta {
      max-height: none;
      opacity: 1;
      transform: none;
      margin-top: 0.3rem;
      overflow: visible;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .casting-meta { transition: none; }
  }
  
  .casting-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
  }
  
  .casting-list-head,
  .casting-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.3fr 1fr 1.3fr 1.1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.2rem;
  }
  
  .casting-list-head {
    background: var(--color-bg-soft);
    border-bottom: 1px solid var(--color-border);
  }
  
  .casting-list-head span {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-soft);
  }
  
  .casting-row {
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    transition: background 0.2s ease;
  }
  
  .casting-row:last-child { border-bottom: 0; }
  .casting-row:hover { background: var(--color-bg); }
  
  .cr-perfil {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
  }
  
  .cr-perfil img {
    width: 44px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .cr-perfil strong {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink);
  }
  
  .catalogo-vacio,
  .catalogo-nota {
    text-align: center;
    color: var(--color-text-soft);
    font-size: 0.83rem;
    line-height: 1.6;
    margin: 3rem auto 0;
    max-width: 640px;
  }
  
  @media (max-width: 760px) {
    .casting-list-head { display: none; }
  
    .casting-row {
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem 1rem;
      padding: 1rem 1.1rem;
    }
  
    .cr-perfil { grid-column: 1 / -1; }
  
    .casting-row span[data-l]::before {
      content: attr(data-l);
      display: block;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--color-text-soft);
      margin-bottom: 1px;
    }
  }
  
  @media (max-width: 560px) {
    .casting-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.7rem; }
    .casting-info { padding: 0.6rem 0.5rem 0.7rem; }
    .casting-info h2 { font-size: 0.74rem; }
    .casting-meta { font-size: 0.72rem; gap: 0.3rem; }
    .catalogo-bar { justify-content: center; }
  }
  
  /* ==========================================================================
     MODAL DE GUÍAS (Zona Modelos)
     ========================================================================== */
  .guide-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.2rem;
  }
  
  .guide-modal[hidden] { display: none; }
  
  .guide-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    animation: guideFade 0.25s ease;
  }
  
  .guide-modal-box {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: guideIn 0.3s cubic-bezier(.2, .7, .3, 1);
  }
  
  .guide-modal-box img {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  }
  
  .guide-modal-close {
    position: absolute;
    top: -14px;
    right: -6px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--color-magenta);
    color: #ffffff;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
  }
  
  .guide-modal-close:hover {
    background: var(--color-ink);
    transform: scale(1.06);
  }
  
  @keyframes guideFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes guideIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .guide-modal-backdrop, .guide-modal-box { animation: none; }
  }
  
  @media (max-width: 640px) {
    .guide-modal { padding: 3.2rem 0.8rem 1.2rem; }
    .guide-modal-close { top: -46px; right: 0; }
    .guide-modal-box img { max-height: 78vh; }
  }
  
  .photo-guide-text .btn { font-family: var(--font-body); }
  
  /* ==========================================================================
     TEXTO JUSTIFICADO
     ========================================================================== */
  .text-block p,
  .intro-section p,
  .split-feature-text p,
  .legal-content p,
  .legal-content li,
  .card p,
  .service-card p,
  .contact-card p,
  .portal-steps li,
  .pricing-card p,
  .coaching-item p,
  .step-item p,
  .guide-box p,
  .proceso-item p,
  .promo-cta-text p,
  .photo-guide-text p,
  .realidad-entrada,
  .realidad-cierre,
  .realidad-punto p,
  .novedades-block p,
  .tip-inline p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Justificado también en móvil (a petición de Vicente, 11/09/2026):
     antes se desactivaba el justify por debajo de 560px porque con
     columnas muy estrechas podía dejar huecos irregulares; se mantiene
     el hyphens:auto de la regla de arriba para mitigar ese efecto. */

  /* La lista de "Qué podemos hacer por ti" no va justificada: son frases
     cortas de una o dos líneas y el justify + hyphens dejaba huecos
     irregulares entre palabras. Se alinea a la izquierda, como corresponde
     a un listado de viñetas. */
  .feature-list li {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
  
  /* ==========================================================================
     12. ADAPTACIÓN MÓVIL GENERAL
     ========================================================================== */
  @media (max-width: 768px) {
    .services-showcase,
    .form-row,
    .contact-channels-grid,
    .grid-forms {
      grid-template-columns: 1fr;
    }
  
    .service-card-img {
      aspect-ratio: 16 / 10;
      max-height: 165px;
    }
  
    .card-img {
      max-height: 150px;
    }
  
    .briefing-section {
      padding: 1.6rem;
    }
  
    .hero-banner,
    .page-hero {
      padding: 1.4rem 1.25rem 1.3rem;
    }
  
    .iframe-container:not(.is-auto) iframe {
      height: 640px;
    }
  }
  
  .aviso-legal-menores {
    background-color: #fffff55f;
    border-left: 2px solid #64748b;
    padding: 16px;
    margin: 20px 0 !important;
    font-family: inherit;
  }
  
  .aviso-legal-menores * {
    font-family: inherit;
    text-align: inherit;
  }
  
  /* ==========================================================================
     SUBMENÚS DESPLEGABLES
     Panel con icono, título y una línea de descripción por opción.
     ========================================================================== */
  .nav-dropdown {
    position: relative;
  }

  /* Puente invisible entre el enlace y el panel: evita que el submenú se
     cierre al mover el ratón por el hueco que hay entre ambos. */
  .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 18px;
  }

  /* IMPORTANTE: ".main-nav ul" es una fila flex y también alcanza a este
     submenú, que quedaría en horizontal. Por eso se fuerza aquí el apilado
     vertical y se anulan el hueco y la alineación heredados. */
  .main-nav .nav-dropdown .dropdown-menu {
    display: block;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #ffffff;
    width: 310px;
    padding: 0.55rem;
    margin: 0;
    list-style: none;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 12px 20px -6px rgba(15, 23, 42, 0.12),
      0 28px 48px -12px rgba(15, 23, 42, 0.16);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
  }

  /* Filete de marca en el borde superior del panel */
  .nav-dropdown .dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-magenta), var(--color-purple));
  }

  /* Pico que apunta al enlace */
  .nav-dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 13px;
    height: 13px;
    background: var(--color-magenta);
    border-radius: 3px 0 0 0;
    z-index: -1;
  }

  .main-nav .nav-dropdown .dropdown-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: none;
  }

  .nav-dropdown .dropdown-menu li a {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.65rem;
    border-radius: 9px;
    color: var(--color-ink) !important;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    transition: background-color 0.18s ease, transform 0.18s ease;
  }

  /* Anula el subrayado animado de la navegación principal */
  .nav-dropdown .dropdown-menu li a::before {
    display: none;
  }

  .dd-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--color-bg-soft);
    color: var(--color-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .dd-icon svg {
    width: 17px;
    height: 17px;
  }

  .dd-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .dd-text strong {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink);
    transition: color 0.18s ease;
  }

  .dd-text small {
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-soft);
    text-transform: none;
    letter-spacing: 0;
  }

  .nav-dropdown .dropdown-menu li a:hover {
    background-color: rgba(231, 27, 106, 0.055);
    transform: translateX(2px);
  }

  .nav-dropdown .dropdown-menu li a:hover .dd-icon {
    background: var(--color-magenta);
    color: #ffffff;
  }

  .nav-dropdown .dropdown-menu li a:hover .dd-text strong {
    color: var(--color-magenta);
  }

  /* Separador entre grupos de opciones */
  .dropdown-menu li.dd-sep {
    height: 1px;
    background: var(--color-border);
    margin: 0.4rem 0.65rem;
  }

  @media (min-width: 901px) {
    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-dropdown .dropdown-menu { transition: none; }
    .nav-dropdown .dropdown-menu li a:hover { transform: none; }
  }

  /* --- Versión móvil: el panel se despliega dentro del propio menú --- */
  @media (max-width: 900px) {
    .nav-dropdown::after { display: none; }

    .main-nav .nav-dropdown .dropdown-menu {
      position: static;
      display: none;
      width: 100%;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: none;
      border-radius: 10px;
      background-color: rgba(15, 23, 42, 0.025);
      margin: 4px 0 8px;
      padding: 0.35rem;
    }

    .nav-dropdown .dropdown-menu::before,
    .nav-dropdown .dropdown-menu::after {
      display: none;
    }

    .main-nav .nav-dropdown.is-active .dropdown-menu {
      display: block;
      animation: heroFadeUp 0.25s ease;
    }

    .nav-dropdown .dropdown-menu li a {
      text-align: left;
      border-bottom: none;
      padding: 0.6rem 0.7rem;
      width: 100%;
    }

    /* En pantallas estrechas la descripción sobra: prima la lista corta */
    .dd-text small { display: none; }

    .dd-icon { width: 30px; height: 30px; }
    .dd-icon svg { width: 15px; height: 15px; }

    /* El primer toque en el enlace padre despliega el submenú
       en lugar de navegar (ver includes/include.js) */
    .nav-dropdown.is-active > a {
      color: var(--color-magenta);
    }
  }
  
  /* ==========================================================================
     PROCESO DE SELECCIÓN Y MODALES
     ========================================================================== */
  .proceso-pasos-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
  }
  
  .proceso-item {
    display: block;
    width: 100%;
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--color-purple);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  
  .proceso-item h3 {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
  }
  
  .proceso-item p {
    margin: 0;
    color: #555555;
    line-height: 1.6;
  }
  
  .registro-help-banner {
    background-color: rgba(231, 27, 106, 0.06);
    border: 1px solid rgba(231, 27, 106, 0.2);
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 15px;
    display: inline-block;
    font-size: 0.98rem;
    color: #333333;
  }
  
  .registro-help-link {
    color: #E71B6A !important;
    font-weight: 700;
    text-decoration: none;
    margin-left: 5px;
  }
  
  .registro-help-link:hover {
    text-decoration: underline;
  }

  /* ==========================================================================
     ACCESO RÁPIDO A LOS FORMULARIOS (registro-modelos.html)
     ========================================================================== */
  .quick-access-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin: 1.6rem 0 0.4rem;
  }

  .quick-access-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background-color: transparent;
    border: 1px solid var(--color-magenta);
    color: var(--color-magenta);
    padding: 0.7rem 1.4rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 100px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .quick-access-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .quick-access-btn:hover {
    background-color: var(--color-magenta);
    color: #ffffff;
    transform: translateY(-2px);
  }

  /* Pastilla de la pestaña que se está viendo */
  .quick-access-btn.active {
    background-color: var(--color-magenta);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(231, 27, 106, 0.28);
  }

  .quick-access-btn.active:hover {
    transform: none;
  }

  @media (max-width: 560px) {
    .quick-access-btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* ==========================================================================
     BLOQUE DE EXPECTATIVAS REALISTAS ("Somos una agencia, no una bolsa...")
     Fondo oscuro para que destaque sobre el resto de la portada, que es clara.
     ========================================================================== */
  .realidad {
    background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 2.6rem 2.4rem 2.2rem;
    margin: 3rem 0;
    box-shadow: var(--shadow-md);
  }

  .realidad h2 {
    color: #ffffff;
    text-align: center;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    margin-bottom: 0.9rem;
  }

  .realidad-entrada {
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
  }

  .realidad-entrada strong {
    color: #ffffff;
    border-bottom: 2px solid var(--color-magenta);
    padding-bottom: 1px;
  }

  .realidad-puntos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.4rem;
    margin: 2.1rem 0 1.8rem;
  }

  .realidad-punto {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.3rem;
  }

  .realidad-punto h3 {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 0.55rem;
  }

  .realidad-punto p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.89rem;
    line-height: 1.6;
    margin: 0;
  }

  .realidad-cierre {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.93rem;
  }

  .realidad-cierre strong { color: var(--color-magenta); }

  @media (max-width: 560px) {
    .realidad { padding: 1.9rem 1.4rem 1.6rem; }
  }

  /* ==========================================================================
     AVISO CONTEXTUAL DISCRETO ("¿Sabías que...?" / consejo con enlace)
     Pensado para colocarse en el punto exacto donde el consejo es útil,
     sin aspecto de anuncio.
     ========================================================================== */
  .tip-inline {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--color-bg-soft);
    border-left: 3px solid var(--color-magenta);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.95rem 1.2rem;
    margin: 1.4rem 0;
  }

  .tip-inline svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: var(--color-magenta);
    margin-top: 1px;
  }

  .tip-inline p {
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    text-align: left;
  }

  .tip-inline a {
    color: var(--color-magenta);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .tip-inline a:hover {
    text-decoration: underline;
  }

  /* Variante sobre fondo oscuro */
  .tip-inline.on-dark {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--color-magenta);
  }

  .tip-inline.on-dark p {
    color: rgba(255, 255, 255, 0.85);
  }

  /* ==========================================================================
     CTA OSCURO REUTILIZABLE (enlaza a books-servicios.html, etc.)
     ========================================================================== */
  .promo-cta {
    background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-soft) 100%);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 2.2rem 2.4rem;
    margin: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    box-shadow: var(--shadow-md);
  }

  .promo-cta-text {
    flex: 1 1 320px;
  }

  .promo-cta-text h2,
  .promo-cta-text h3 {
    color: #ffffff;
    margin-bottom: 0.5rem;
  }

  .promo-cta-text p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }

  .promo-cta .btn {
    flex-shrink: 0;
    border-color: #ffffff;
    color: #ffffff;
  }

  .promo-cta .btn:hover {
    background-color: var(--color-magenta);
    border-color: var(--color-magenta);
    color: #ffffff;
  }
  
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
  
  .modal-overlay.is-visible {
    display: flex;
  }
  
  .modal-container {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    height: 88vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
  }
  
  .modal-header-brand {
    background: #f4f4f5;
    border-bottom: 4px solid #E71B6A;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .modal-brand-left {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .modal-logo {
    height: 32px;
    width: auto;
  }
  
  .modal-title-text {
    color: #52525B;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  
  .modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    transition: background 0.2s ease;
  }
  
  .modal-close-btn:hover {
    background: #E71B6A;
  }
  
  .modal-body {
    width: 100%;
    flex: 1;
  }
  
  .modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  /* ==========================================================================
     ESTILOS INTEGRADOS: TARJETA DE IFRAME Y BLOQUE "DESCUBRE TU TALENTO"
     ========================================================================== */
  
  /* Contenedor principal de la tarjeta con iframe */
  .iframe-card-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 15px;
    background: #ffffff;
    width: 100%;
  }
  
  .iframe-container {
    width: 100%;
    height: 320px;
    min-height: 280px;
    transition: height 0.3s ease;
    overflow: hidden;
  }

  .iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  /* Altura automática: se activa cuando el formulario de Apps Script
     comunica su altura real (ver apps-script/altura-automatica.html).
     Si no llega ese aviso, se mantiene la altura fija de arriba. */
  .iframe-container.is-auto {
    height: auto;
    overflow: visible;
  }

  .iframe-container.is-auto iframe {
    height: auto;
    transition: height 0.25s ease;
  }
  
  /* Aviso de respaldo cuando el formulario incrustado no responde a
     tiempo (ver el temporizador en registro-modelos.html). No sustituye
     al iframe, se muestra encima/al lado como salida alternativa. */
  .iframe-fallback {
    display: none;
    align-items: flex-start;
    gap: 0.85rem;
    background: #FEF2F2;
    border-left: 3px solid #b91c1c;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.2rem;
    margin-top: 15px;
  }

  .iframe-fallback.is-visible { display: flex; }

  .iframe-fallback svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #b91c1c;
    margin-top: 1px;
  }

  .iframe-fallback-text p {
    margin: 0 0 0.7rem;
    font-size: 0.89rem;
    line-height: 1.55;
    color: var(--color-text);
    text-align: left;
  }

  .iframe-fallback-text p:last-child { margin-bottom: 0; }

  .iframe-fallback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.2rem;
  }

  .iframe-fallback-actions .btn {
    padding: 0.55rem 1.2rem;
    font-size: 0.72rem;
  }

  /* Bloque "Novedades" (grupos familiares / UGC en registro-modelos.html):
     mismo patrón de tarjeta que el resto de bloques de la página, pero con
     una franja en degradado arriba y una etiqueta, para que destaque un
     poco frente a los bloques de texto normales de alrededor. */
  .novedades-block {
    position: relative;
    background: linear-gradient(180deg, rgba(231, 27, 106, 0.06), rgba(134, 103, 171, 0.03));
    border: 1px solid rgba(231, 27, 106, 0.25);
    border-radius: 10px;
    padding: 1.6rem 1.7rem 1.5rem;
    margin-top: 1.5rem;
    overflow: hidden;
  }

  .novedades-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-magenta), var(--color-purple));
  }

  .novedades-badge {
    display: inline-block;
    background: var(--color-magenta);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.32rem 0.85rem;
    border-radius: 100px;
    margin-bottom: 0.9rem;
  }

  /* Variante "reclamo" del bloque Novedades, usada en portada: más sombra
     para que destaque sobre el resto de avisos de la página, y layout en
     fila con botón en vez de texto suelto. */
  .novedades-teaser {
    margin-top: 0;
    margin-bottom: 1.8rem;
    box-shadow: 0 8px 24px rgba(231, 27, 106, 0.14);
  }

  .novedades-teaser .novedades-badge {
    margin-bottom: 0.6rem;
  }

  .novedades-teaser-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .novedades-teaser-row p {
    margin: 0;
    font-weight: 700;
    color: #111111;
    font-size: 1rem;
  }

  .novedades-teaser-row .btn {
    flex-shrink: 0;
  }

  @media (max-width: 560px) {
    .novedades-teaser-row {
      justify-content: center;
      text-align: center;
    }
  }

  /* Bloque horizontal "Descubre tu talento" */
  .split-feature-custom {
    margin-top: 20px !important;
    padding: 20px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .split-feature-img-med {
    width: 286px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  /* Variante vertical/retrato: solo para la imagen de grupos-familiares.html, no toca .split-feature-img-med en el resto de páginas */
  .split-feature-img-med.split-feature-img-vertical {
    width: 220px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
  }
  
  /* Más aire entre la imagen y el texto en el bloque CTA de grupos-familiares.html (el texto quedaba pegado justo a la derecha de la imagen) */
  .split-feature-custom--grupos {
    gap: 40px;
    padding-right: 32px;
  }

  .split-feature-custom--grupos .split-feature-text {
    padding-left: 1.5rem;
    padding-right: 2.5rem;
  }
  
  /* RESPONSIVO: Al reducirse el espacio, la imagen salta arriba en lugar de asfixiar el texto */
  @media (max-width: 1024px) {
    .split-feature-custom {
      flex-direction: column;
      align-items: center;
      text-align: left;
    }
  
    .split-feature-img-med {
      width: 100%;
      max-width: 450px;
      height: 200px;
    }

    .split-feature-img-med.split-feature-img-vertical {
      width: 100%;
      max-width: 280px;
      height: auto;
      aspect-ratio: 2 / 3;
    }

    .split-feature-custom--grupos {
      padding-right: 20px;
      gap: 20px;
    }

    .split-feature-custom--grupos .split-feature-text {
      padding-left: 0;
      padding-right: 0;
    }
  }
  
  @media (max-width: 560px) {
    .split-feature-custom {
      padding: 15px;
      text-align: center;
    }
  
    .split-feature-img-med {
      max-width: 100%;
      height: 180px;
    }

    .split-feature-img-med.split-feature-img-vertical {
      max-width: 220px;
      height: auto;
      aspect-ratio: 2 / 3;
    }

    .split-feature-custom--grupos .split-feature-text {
      padding-left: 0;
      padding-right: 0;
    }
  }