@layer theme, base, components, utilities, tienda, tema;
/*
 * Tema "marin": Marín Marín Consultores (servicios jurídicos, seguros y SG-SST), un sitio sin tienda.
 * Rehecho el 26/10/2026 sobre el modo oscuro de marinmarin.com.co, que es el que le gustó a Cristian:
 * fondo #090e18, tarjetas #111827, texto #cbd5e1 con titulares blancos en Playfair, el azul #0B5AA8 y
 * el dorado #C5A059 de acento. Las medidas, sombras, radios y degradados salen de su código
 * (index.css, Hero, Experience, AboutUs, Services, Contact y Footer.jsx), no son inventadas.
 * Una mejora sobre el original: el botón dorado lleva texto oscuro (el blanco sobre dorado no se lee).
 *
 * Solo se apoya en el contrato de estilos: data-bloque, data-parte, data-variante y tokens --t-*.
 */
@layer tema {
  /* ── Paleta y letras ───────────────────────────────────────────────────────────────── */
  [data-tema="marin"] {
    --azul-mm: #0b5aa8;
    --azul-oscuro-mm: #08437d;
    /* El azul del original sobre el fondo casi negro no llega a 3:1: para textos va uno más claro. */
    --azul-claro-mm: #5b9be0;
    --oro-mm: #c5a059;
    --oro-oscuro-mm: #a18043;
    --fondo-mm: #090e18;
    --tarjeta-mm: #111827;
    --borde-mm: #1f2937;
    --campo-mm: #0f172a;

    --t-fondo: var(--fondo-mm);
    --t-superficie: var(--tarjeta-mm);
    --t-relleno: var(--borde-mm);
    --t-borde: var(--borde-mm);
    --t-borde-suave: rgb(255 255 255 / 0.06);
    --t-borde-fuerte: rgb(255 255 255 / 0.16);
    --t-texto: #f8fafc;
    --t-texto-medio: #cbd5e1;
    --t-texto-suave: #94a3b8;
    --t-texto-tenue: #64748b;
    --t-primario: var(--azul-mm);
    --t-sobre-primario: #ffffff;
    --t-primario-texto: var(--oro-mm);
    --t-secundario: var(--oro-mm);
    --t-sobre-secundario: #0b1220;
    --t-sobre-oscuro: #ffffff;
    --t-fuente-titulos: var(--f-playfair), Georgia, serif;
    --t-fuente-texto: var(--f-inter), ui-sans-serif, system-ui, sans-serif;
    --t-peso-titulos: 700;
    --t-radio: 20px;
    --t-radio-imagen: 20px;
    --t-radio-boton: 9999px;
    --t-sombra: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --t-sombra-elevada: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
  [data-tema="marin"] body {
    background: var(--fondo-mm);
    color: var(--t-texto-medio);
    line-height: 1.6;
  }

  /* ── Botones: el dorado (btn-accent) y el azul (btn-primary) del original ──────────── */
  [data-tema="marin"] [data-parte="boton"] {
    gap: 0.5rem;
    background: var(--oro-mm);
    color: var(--t-sobre-secundario);
    font-weight: 600;
    box-shadow: 0 4px 14px 0 rgb(197 160 89 / 0.4);
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }
  [data-tema="marin"] [data-parte="boton"]:hover {
    background: var(--oro-oscuro-mm);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgb(197 160 89 / 0.5);
    opacity: 1;
  }
  /* La flecha de los botones de llamado (hero y bandas): es dibujo, no texto. */
  [data-tema="marin"] :is([data-bloque="hero"], [data-bloque="campana"], [data-bloque="texto-imagen"]) [data-parte="boton"]::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* El secundario: borde dorado (btn-outline en oscuro); se rellena de dorado translúcido. */
  [data-tema="marin"] [data-parte="boton-secundario"] {
    border: 2px solid var(--oro-mm);
    border-radius: 9999px;
    color: var(--oro-mm);
    background: transparent;
    font-weight: 600;
  }
  [data-tema="marin"] [data-parte="boton-secundario"]:hover {
    background: rgb(197 160 89 / 0.15);
    color: var(--oro-mm);
  }

  /* ── Franja superior: la dorada de la plantilla, texto oscuro ──────────────────────── */
  [data-tema="marin"] [data-bloque="anuncio"] {
    --t-texto: #0b1220;
    --t-texto-medio: #0b1220;
    --t-texto-suave: #1f2937;
    --t-primario-texto: #0b1220;
    min-height: 40px;
    background: var(--oro-mm);
    color: #0b1220;
    border: 0;
    font-weight: 500;
  }
  [data-tema="marin"] [data-bloque="anuncio"] :is([data-parte="enlace"], [data-parte="icono"]) {
    color: #0b1220;
  }
  [data-tema="marin"] [data-bloque="anuncio"] [data-parte="icono"]:hover {
    color: #ffffff;
  }

  /* ── Encabezado: la barra oscura translúcida de Navbar.jsx ─────────────────────────── */
  [data-tema="marin"] [data-bloque="encabezado"] {
    background: rgb(17 24 39 / 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(255 255 255 / 0.05);
    color: #ffffff;
  }
  @media (min-width: 768px) {
    [data-tema="marin"] [data-bloque="encabezado"] > div {
      min-height: 80px;
    }
  }
  [data-tema="marin"] [data-bloque="encabezado"] [data-parte="logo"] img {
    height: 40px;
    max-height: 40px;
    width: auto;
  }
  [data-tema="marin"] [data-bloque="encabezado"] [data-parte="logo"] span {
    color: #ffffff;
    font-family: var(--t-fuente-titulos);
  }
  /* El menú: Inter 500 blanco, con la línea dorada que crece al pasar (nav-link del original). */
  [data-tema="marin"] [data-bloque="menu"][data-parte="menu"] [data-parte="enlace"] {
    position: relative;
    padding-inline: 0.15rem;
    margin-inline: 0.55rem;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: var(--t-fuente-texto);
    font-size: 0.95rem;
    font-weight: 500;
  }
  [data-tema="marin"] [data-bloque="menu"][data-parte="menu"] [data-parte="enlace"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    width: 0;
    height: 2px;
    background: var(--oro-mm);
    transition: width 0.3s ease;
  }
  [data-tema="marin"] [data-bloque="menu"][data-parte="menu"] [data-parte="enlace"]:hover {
    color: var(--oro-mm);
    opacity: 1;
  }
  [data-tema="marin"] [data-bloque="menu"][data-parte="menu"] [data-parte="enlace"]:hover::after {
    width: 100%;
  }
  /* El destacado no va en píldora: texto como los demás (decisión de Cristian). */
  [data-tema="marin"] [data-bloque="menu"] [data-variante="destacado"] {
    font-weight: 500;
  }
  /* "Asesoría Directa": el botón azul redondeado con el teléfono (btn-primary). */
  [data-tema="marin"] [data-bloque="encabezado"] [data-variante="llamado"] {
    background: var(--azul-mm);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgb(11 90 168 / 0.4);
  }
  [data-tema="marin"] [data-bloque="encabezado"] [data-variante="llamado"]:hover {
    background: var(--azul-oscuro-mm);
    box-shadow: 0 6px 20px 0 rgb(11 90 168 / 0.5);
  }
  /* El menú del celular: oscuro y a pantalla completa. */
  [data-tema="marin"] dialog[data-bloque="menu"] {
    width: 100%;
    max-width: none;
    background: var(--fondo-mm);
    color: #ffffff;
  }
  [data-tema="marin"] dialog[data-bloque="menu"] [data-parte="enlace"] {
    color: #ffffff;
    font-size: 1.1rem;
  }

  /* ── Hero deslizante ───────────────────────────────────────────────────────────────── */
  [data-tema="marin"] [data-bloque="hero"] [data-parte="velo"] {
    background:
      radial-gradient(circle at 15% 20%, rgb(11 90 168 / 0.18), transparent 45%),
      linear-gradient(90deg, rgb(9 14 24 / 0.94) 0%, rgb(9 14 24 / 0.78) 48%, rgb(9 14 24 / 0.35) 100%);
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="tarjeta"] {
    background-color: var(--fondo-mm);
    color: #ffffff;
  }
  /* Sin foto (hoy, en vivo): el fondo del hero del original, oscuro con dos resplandores azul y dorado. */
  [data-tema="marin"] [data-bloque="hero"] [data-parte="tarjeta"]:not(:has(> [data-parte="imagen"])) {
    background:
      radial-gradient(circle at 85% 30%, rgb(11 90 168 / 0.22) 0%, transparent 45%),
      radial-gradient(circle at 10% 90%, rgb(197 160 89 / 0.12) 0%, transparent 40%),
      var(--fondo-mm);
  }
  /* La etiqueta redondeada de arriba ("Respaldo Jurídico & Protección en Seguros"). */
  [data-tema="marin"] [data-bloque="hero"] [data-variante="antetitulo"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(197 160 89 / 0.35);
    border-radius: 9999px;
    background: rgb(11 90 168 / 0.15);
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
  }
  [data-tema="marin"] [data-bloque="hero"] [data-variante="antetitulo"]::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="titulo"] {
    color: #f8fafc;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  /* La palabra clave en degradado azul → dorado (gradient-text) y la segunda subrayada en dorado. */
  [data-tema="marin"] [data-bloque="hero"] [data-parte="titulo"] [data-parte="resalte"] {
    color: #f8fafc;
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="titulo"] [data-parte="resalte"]:first-of-type {
    background: linear-gradient(135deg, var(--azul-claro-mm) 0%, var(--oro-mm) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="titulo"] [data-parte="resalte"]:nth-of-type(2) {
    border-bottom: 3px solid var(--oro-mm);
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="subtitulo"]:not([data-variante]) {
    color: #cbd5e1;
    font-size: 1.15rem;
    line-height: 1.7;
    opacity: 1;
  }
  [data-tema="marin"] [data-bloque="hero"] [data-parte="boton"] {
    padding-inline: 2rem;
    font-size: 1.05rem;
  }
  /* Flechas y puntos: discretos, en blanco y dorado. */
  [data-tema="marin"] [data-bloque="hero"][data-variante="deslizante"] [data-parte="controles"] button {
    background: rgb(17 24 39 / 0.6);
    color: #ffffff;
    border: 1px solid rgb(255 255 255 / 0.18);
    box-shadow: none;
  }
  [data-tema="marin"] [data-bloque="hero"][data-variante="deslizante"] [data-parte="controles"] button:hover {
    border-color: var(--oro-mm);
    color: var(--oro-mm);
  }
  [data-tema="marin"] [data-bloque="hero"][data-variante="deslizante"] [data-parte="controles"] [aria-current="true"] {
    background: var(--oro-mm);
    border-color: var(--oro-mm);
  }

  /* ── Confianza: los ítems con ícono dorado de debajo del hero, sin cajas ───────────── */
  [data-tema="marin"] [data-bloque="confianza"] {
    background: transparent;
    border-bottom: 1px solid var(--borde-mm);
    border-radius: 0;
    padding-block: 1.75rem;
  }
  [data-tema="marin"] [data-bloque="confianza"] li {
    align-items: center;
  }
  [data-tema="marin"] [data-bloque="confianza"] [data-parte="icono"] {
    border-radius: 9999px;
    background: rgb(197 160 89 / 0.12);
    color: var(--oro-mm);
    box-shadow: none;
  }
  [data-tema="marin"] [data-bloque="confianza"] [data-parte="titulo"] {
    color: #f8fafc;
    font-weight: 500;
  }

  /* ── Títulos de sección: Playfair grande, centrado, con la línea azul pequeña encima ─ */
  [data-tema="marin"] :is([data-bloque="tarjetas"], [data-bloque="columnas"], [data-bloque="texto"], [data-bloque="contacto"], [data-bloque="texto-imagen"]) h2[data-parte="titulo"]:not([data-bloque="detalle"] *) {
    color: #f8fafc;
    font-size: clamp(2rem, 3.6vw, 2.5rem);
    line-height: 1.25;
  }
  [data-tema="marin"] :is([data-bloque="tarjetas"], [data-bloque="columnas"], [data-bloque="texto"], [data-bloque="contacto"]) h2[data-parte="titulo"]:not([data-bloque="detalle"] *)::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0 auto 1.1rem;
    border-radius: 2px;
    background: var(--azul-claro-mm);
  }
  [data-tema="marin"] :is([data-bloque="tarjetas"], [data-bloque="columnas"], [data-bloque="texto"], [data-bloque="contacto"]) > [data-parte="subtitulo"] {
    color: #94a3b8;
    font-size: 1.1rem;
  }

  /* ── Cifras: la banda azul de Experience.jsx, de lado a lado ───────────────────────── */
  [data-tema="marin"] [data-fondo="acento"] {
    --t-texto: #ffffff;
    --t-texto-medio: rgb(255 255 255 / 0.85);
    --t-primario-texto: var(--oro-mm);
    /* border-image pinta el degradado hasta los bordes de la ventana sin cambiar el ancho del bloque. */
    border-image: linear-gradient(135deg, var(--azul-mm) 0%, var(--azul-oscuro-mm) 100%) fill 0 / / 0 100vmax;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding-block: 4rem;
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 1rem;
    text-align: center;
  }
  /* Cuatro por fila (dos en el celular), sin el aire de las tarjetas de precio. */
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] :has(> [data-parte="tarjeta"]) {
    width: calc(50% - 0.75rem);
  }
  @media (min-width: 1024px) {
    [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] :has(> [data-parte="tarjeta"]) {
      width: calc(25% - 1.125rem);
    }
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"] > :has(> [data-parte="cifra"]) {
    gap: 0.4rem;
    padding: 0;
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"]:hover {
    transform: none;
    box-shadow: none;
  }
  /* El ícono en círculo translúcido encima de cada cifra (decorativo). */
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"]::before {
    content: "";
    order: -2;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 13.9 7 22l5-3 5 3-1.5-8.1'/%3E%3C/svg%3E") center / 1.6rem no-repeat;
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] :nth-child(4n + 2) > [data-parte="tarjeta"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] :nth-child(4n + 3) > [data-parte="tarjeta"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2M16 3.1a4 4 0 0 1 0 7.8M22 21v-2a5 5 0 0 0-3.8-4.8'/%3E%3C/svg%3E");
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] :nth-child(4n + 4) > [data-parte="tarjeta"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="cifra"] {
    order: -1;
    color: #ffffff;
    font-family: var(--t-fuente-titulos);
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 800;
    /* Las cifras de Playfair son de estilo antiguo ("10" se ve bajito): en la banda van alineadas. */
    font-variant-numeric: lining-nums;
    line-height: 1.1;
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="sufijo"] {
    color: var(--oro-mm);
  }
  [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="nombre"] {
    margin-top: 0.4rem;
    color: rgb(255 255 255 / 0.85);
    font-family: var(--t-fuente-texto);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* ── Tarjetas de servicios (Services.jsx) ──────────────────────────────────────────── */
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] {
    position: relative;
    background: var(--tarjeta-mm);
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 20px;
    box-shadow: var(--t-sombra);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"]:hover {
    transform: translateY(-4px);
    border-color: var(--oro-mm);
    box-shadow: var(--t-sombra-elevada);
  }
  /* El ícono en caja dorada translúcida, arriba a la izquierda (decorativo). */
  [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"]::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 1.5rem 1.5rem 0;
    border-radius: 12px;
    background: rgb(197 160 89 / 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C5A059' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="nombre"] {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] p {
    color: #94a3b8;
  }
  [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] :has(> [data-parte="nombre"]),
  [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] :has(> [data-parte="boton"], > [data-parte="boton-secundario"]) {
    align-items: flex-start;
    text-align: left;
  }
  [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] :has(> [data-parte="nombre"]) {
    padding-inline: 1.5rem;
  }
  /* "Ver detalles completos →": enlace dorado, no caja. */
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton-secundario"] {
    gap: 0.4rem;
    border: 0;
    padding-inline: 0;
    background: transparent;
    color: var(--oro-mm);
    font-size: 0.95rem;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton-secundario"]::after {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton-secundario"]:hover {
    background: transparent;
    color: #dcc08a;
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton-secundario"]:hover::after {
    transform: translateX(3px);
  }
  /* "Hablar con un asesor" en la tarjeta: el azul del original, más discreto que el dorado del hero. */
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton"] {
    background: var(--azul-mm);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgb(11 90 168 / 0.35);
  }
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton"]:hover {
    background: var(--azul-oscuro-mm);
    box-shadow: 0 6px 20px 0 rgb(11 90 168 / 0.45);
  }
  /* La tarjeta destacada (con color): el degradado navy → dorado de "Compromiso ético". */
  [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"][style] {
    background: linear-gradient(135deg, #0b1f3a 0%, #13294b 55%, rgb(197 160 89 / 0.55) 100%);
  }
  /* En el celular, una por fila con el ícono a la izquierda: no una tira de tarjetas altas. */
  @media (max-width: 639px) {
    [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] {
      padding-left: 4.25rem;
    }
    [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"]::before {
      position: absolute;
      top: 1.25rem;
      left: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      margin: 0;
      background-size: 1.25rem;
    }
    [data-tema="marin"] [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="nombre"] {
      font-size: 1.1rem;
    }
    [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] :has(> [data-parte="nombre"]) {
      gap: 0.5rem;
      padding: 1.25rem 1rem 1.25rem 0;
    }
    /* Los dos botones en un renglón y más bajos: la tarjeta queda corta. */
    [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] :has(> [data-parte="boton"], > [data-parte="boton-secundario"]) {
      flex-flow: row wrap;
      align-items: center;
      gap: 0.5rem 1rem;
      padding-top: 0.25rem;
    }
    [data-tema="marin"] :not([data-fondo="acento"]) > [data-bloque="tarjetas"] [data-parte="tarjeta"] [data-parte="boton"] {
      min-height: 2.5rem;
      padding: 0.4rem 1rem;
      font-size: 0.9rem;
    }
    [data-tema="marin"] [data-bloque="confianza"] ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    [data-tema="marin"] [data-bloque="confianza"] [data-parte="titulo"] {
      font-size: 0.875rem;
      line-height: 1.3;
    }
    [data-tema="marin"] [data-fondo="acento"] [data-bloque="tarjetas"] [data-parte="tarjeta"]::before {
      width: 2.75rem;
      height: 2.75rem;
      background-size: 1.3rem;
    }
  }

  /* ── Ventana "Más información": oscura, como el modal de Services.jsx ──────────────── */
  [data-tema="marin"] [data-bloque="detalle"] {
    background: var(--tarjeta-mm);
    color: #cbd5e1;
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 20px;
  }
  [data-tema="marin"] [data-bloque="detalle"] [data-parte="titulo"] {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
  }
  [data-tema="marin"] [data-bloque="detalle"] [data-parte="boton"] {
    background: var(--azul-mm);
    color: #ffffff;
    box-shadow: none;
  }

  /* ── Columnas ("Nuestra Organización"): las tarjetas de AboutUs.jsx ────────────────── */
  [data-tema="marin"] [data-bloque="columnas"] [data-parte="columna"] {
    padding: 2rem 1.75rem;
    background: var(--tarjeta-mm);
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 20px;
    box-shadow: var(--t-sombra);
    text-align: left;
  }
  @media (min-width: 768px) {
    [data-tema="marin"] [data-bloque="columnas"] :has(> [data-parte="columna"]) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  [data-tema="marin"] [data-bloque="columnas"] [data-parte="columna"] [data-parte="titulo"] {
    color: #f8fafc;
    font-size: 1.4rem;
  }
  /* La columna con antetítulo ("Compromiso Ético"): el degradado navy → dorado del original. */
  [data-tema="marin"] [data-bloque="columnas"] [data-parte="columna"]:has(> [data-parte="subtitulo"]) {
    background: linear-gradient(135deg, var(--azul-oscuro-mm) 0%, #0b1f3a 50%, #6b5530 100%);
    border-color: rgb(197 160 89 / 0.35);
  }
  [data-tema="marin"] [data-bloque="columnas"] [data-parte="columna"] [data-parte="subtitulo"] {
    color: var(--oro-mm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  [data-tema="marin"] [data-bloque="columnas"] [data-parte="contenido"] {
    text-align: left;
  }

  /* ── Textos largos: justificados desde 640 px, con guiones; viñetas en flecha dorada ─ */
  @media (min-width: 640px) {
    [data-tema="marin"] [data-parte="contenido"] p {
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
    }
  }
  [data-tema="marin"] [data-parte="contenido"] ul {
    padding-left: 0;
    list-style: none;
  }
  [data-tema="marin"] [data-parte="contenido"] ul > li {
    position: relative;
    padding-left: 1.4rem;
  }
  [data-tema="marin"] [data-parte="contenido"] ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.9rem;
    height: 0.9rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C5A059' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  [data-tema="marin"] [data-parte="contenido"] :is(h2, h3) {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
  }
  [data-tema="marin"] [data-parte="contenido"] strong {
    color: #f8fafc;
  }
  [data-tema="marin"] [data-parte="contenido"] a {
    color: var(--oro-mm);
  }

  /* Preguntas frecuentes (sección de texto): cada pregunta en su renglón, separadas por una línea. */
  [data-tema="marin"] [data-bloque="texto"] [data-parte="contenido"] {
    max-width: 52rem;
    margin-inline: auto;
  }
  [data-tema="marin"] [data-bloque="texto"] [data-parte="contenido"] h3 {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde-mm);
    font-size: 1.15rem;
  }
  [data-tema="marin"] [data-bloque="texto"] [data-parte="contenido"] h3:first-child {
    border-top: 0;
    padding-top: 0;
  }

  /* ── Contacto: tarjeta oscura con campos #0f172a, foco azul y botón azul ancho ─────── */
  [data-tema="marin"] [data-bloque="contacto"] form,
  [data-tema="marin"] [data-bloque="contacto"] [role="status"] {
    padding: 2rem;
    background: var(--tarjeta-mm);
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 20px;
    box-shadow: var(--t-sombra-elevada);
  }
  [data-tema="marin"] [data-bloque="contacto"] :is(input, select, textarea) {
    background: var(--campo-mm);
    border: 1px solid var(--borde-mm);
    border-radius: 10px;
    color: #f8fafc;
  }
  [data-tema="marin"] [data-bloque="contacto"] :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--azul-mm);
    box-shadow: 0 0 0 3px rgb(11 90 168 / 0.25);
  }
  [data-tema="marin"] [data-bloque="contacto"] label {
    color: #cbd5e1;
  }
  [data-tema="marin"] [data-bloque="contacto"] form [data-parte="boton"] {
    align-self: stretch;
    background: var(--azul-mm);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgb(11 90 168 / 0.4);
  }
  [data-tema="marin"] [data-bloque="contacto"] form [data-parte="boton"]:hover {
    background: var(--azul-oscuro-mm);
  }
  [data-tema="marin"] [data-bloque="contacto"] h3 {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
    font-size: 1.25rem;
  }

  /* ── Pie: Footer.jsx ───────────────────────────────────────────────────────────────── */
  [data-tema="marin"] [data-bloque="pie"] {
    --t-texto: #f8fafc;
    --t-texto-medio: #94a3b8;
    --t-texto-suave: #94a3b8;
    --t-borde: var(--borde-mm);
    --t-primario-texto: var(--oro-mm);
    --t-fondo: var(--borde-mm);
    background: var(--tarjeta-mm);
    border-top: 1px solid var(--borde-mm);
  }
  [data-tema="marin"] [data-bloque="pie"] [data-parte="logo"] {
    height: 44px;
    max-height: 44px;
    width: auto;
  }
  [data-tema="marin"] [data-bloque="pie"] [data-parte="titulo"] {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
    font-size: 1.1rem;
    font-weight: 700;
  }
  [data-tema="marin"] [data-bloque="pie"] [data-parte="nombre"] {
    color: #f8fafc;
    font-family: var(--t-fuente-titulos);
  }
  [data-tema="marin"] [data-bloque="pie"] [data-parte="enlace"] {
    transition: color 0.2s ease, padding 0.2s ease;
  }
  [data-tema="marin"] [data-bloque="pie"] li > [data-parte="enlace"]:hover {
    padding-left: 4px;
    color: var(--oro-mm);
    text-decoration: none;
  }
  /* Redes en círculos: al pasar se rellenan de dorado con el ícono negro y suben 2 px. */
  [data-tema="marin"] [data-bloque="pie"] [data-parte="icono"] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 9999px;
    background: var(--borde-mm);
    color: #f8fafc;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  [data-tema="marin"] [data-bloque="pie"] [data-parte="icono"]:hover {
    background: var(--oro-mm);
    color: #000000;
    transform: translateY(-2px);
  }
  [data-tema="marin"] [data-bloque="pie"] [data-variante="subir"] {
    color: var(--azul-claro-mm);
    text-decoration: none;
  }
  [data-tema="marin"] [data-bloque="pie"] [data-variante="subir"]:hover {
    color: var(--oro-mm);
  }

  /* ── WhatsApp flotante: el verde con su resplandor, que crece al pasar ─────────────── */
  [data-tema="marin"] [data-bloque="whatsapp"] {
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 4px 14px rgb(37 211 102 / 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  [data-tema="marin"] [data-bloque="whatsapp"]:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 28px rgb(37 211 102 / 0.6);
  }
}