/* Theme Name: Smiðr Consulting Theme URI: https://rgstudio.com.mx Template: rgstudio-base-wp-tema Author: VOO Solutions Author URI: https://voo-solutions.com Description: Child theme oficial de Smiðr Consulting sobre el tema padre rgstudio-base-wp-tema. Tokens de marca tomados del catálogo #07 Paleta_Color_Smidr / #08 Tipografia_Smidr (v1.0 validado por Jorge, 11-sep-2026), sin valores inventados. Version: 0.6.1 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: smidr-consulting */ /* ========================================================================== DESIGN TOKENS -- sobreescribe los del padre con los valores oficiales de Smiðr Consulting. Fuente de verdad: 07_Paleta_Color_Smidr.md / 08_Tipografia_Smidr.md (catálogo #1-20, v1.0, 11-sep-2026). ========================================================================== */ :root{ /* Paleta -- #07: Marino y Dorado forja son los 2 colores planos oficiales; Marino secundario (#00344F) es el contorno del hexágono; Papel y Blanco son neutros documentales. No hay un neutro "Tinta" separado: el Marino cumple ese rol (dice el propio #07). */ --ink:#00182D; /* Marino -- texto sobre fondo claro (15.89:1 sobre Papel) */ --paper:#F2F1EC; /* Papel -- fondo base (#07) */ --paper-raised:#FFFFFF; /* Blanco -- negativo del isotipo/logotipo */ --primary:#00182D; /* Marino -- primario, fondo del emblema */ --primary-2:#00344F; /* Marino secundario -- contorno del hexágono (#07); extensión propia del Child */ --primary-ink:#FFFFFF; /* Blanco sobre Marino -- 17.97:1, AA */ --accent:#FFBE00; /* Dorado forja -- acento, nunca más del 30% de una composición (#07) */ --accent-ink:#00182D; /* Marino sobre Dorado -- 10.80:1, AA. Blanco sobre Dorado solo 1.66:1: NUNCA usar Blanco aquí */ --accent-hover:color-mix(in srgb, var(--accent) 80%, var(--ink) 20%); /* El Gris de soporte #B4B8BC no está confirmado como color oficial (#07) y es demasiado claro para texto: --ink-soft/--muted/--line se derivan por color-mix() desde Marino/Papel, sin inventar hex nuevos (mismo criterio ya usado en Verkþing). Decisión de esta sesión, revisable por Jorge. */ --ink-soft:color-mix(in srgb, var(--ink) 68%, var(--paper) 32%); --muted:var(--ink-soft); --line:color-mix(in srgb, var(--ink) 16%, var(--paper) 84%); /* Colores funcionales de estado -- #07 (no son colores de marca) */ --state-good:#2F8F5B; --state-warn:#FFBE00; --state-bad:#A3432F; /* Tipografía -- #08: Inter para sitio/documentos. Cinzel es solo del wordmark/tagline DENTRO del logotipo (arte vectorial fijo, no CSS). */ --font-heading:'Inter', Arial, sans-serif; --font-body:'Inter', Arial, sans-serif; } /* Fix preventivo ya documentado en VOO/Hugr: sin fondo propio el video parallax del Hero deja un borde gris. */ .rgb-hero{background:var(--primary);} /* ========================================================================== Contenido de la Pagina "Inicio" (25-sep-2026) -- secciones ancladas dentro de UN solo the_content() (front-page.php del padre envuelve todo en
, nunca por secciones). Mismos anchors YA vigentes en el sitio standalone actual (#quienes-somos/#servicios/#casos/#proveedores/#ecosistema/#contacto, confirmado via JS en vivo) -- se preservan tal cual, sin renombrar, para no romper enlaces existentes. Copy reorganizado hacia este molde pero preservado literal del sitio real / Especificacion_Sitio_Institucional_ Smidr_Supply.md (fuente aprobada de contenido), nunca inventado. ========================================================================== */ #rgb-main section[id]{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:var(--nav-height);} #rgb-main section[id]:first-of-type{border-top:none;padding-top:0;} #rgb-main section[id] h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:20px;color:var(--ink);} #rgb-main section[id] p{line-height:1.65;color:var(--ink);max-width:760px;} #rgb-main section[id] p + p{margin-top:14px;} /* Contacto -- texto guia antes del shortcode [rgb_form]. */ #rgb-main .rgb-contacto-nota{max-width:760px;margin:0 auto 20px;color:var(--ink-soft);font-size:.95rem;} #rgb-main .rgb-contacto-secundario{max-width:760px;margin:20px auto 0;font-size:.9rem;color:var(--ink-soft);} /* ========================================================================== Hero de ficha (25-sep-2026) -- puerto del patron ya validado en VOO (Ronda 11) y Hugr (Ronda 8): .rgb-hero--ficha mas bajo que el Hero de portada, fondo degradado Acero->Tinta (paleta unificada de marca, no una imagen/video por ficha), breadcrumb/eyebrow con contraste claro sobre fondo oscuro, grid de 2 columnas debajo (contenido / imagen destacada con hover, si la ficha tiene una -- DEACERO hoy no, el grid se degrada solo a 1 columna). Ver single-ficha.php de este Child. ========================================================================== */ .rgb-hero--ficha{min-height:min(54vh,480px);} .rgb-hero--ficha .rgb-hero__bg{background:linear-gradient(160deg, var(--primary) 0%, var(--ink) 100%);} .rgb-hero--ficha .rgb-hero__watermark img{filter:none;} .rgb-hero .rgb-breadcrumb{justify-content:center;margin-bottom:22px;} .rgb-hero .rgb-breadcrumb, .rgb-hero .rgb-breadcrumb a, .rgb-hero .rgb-breadcrumb__current{color:rgba(255,255,255,.82);} .rgb-hero .rgb-breadcrumb__sep{color:rgba(255,255,255,.35);} .rgb-hero .rgb-breadcrumb a:hover, .rgb-hero .rgb-breadcrumb__back:hover{color:var(--accent);} .rgb-hero__eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:14px;} .rgb-ficha__content{max-width:760px;} .rgb-ficha__content > p{font-size:1.05rem;line-height:1.7;color:var(--ink);margin-bottom:22px;} .rgb-ficha__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start;} @media (max-width:900px){ .rgb-ficha__grid{grid-template-columns:1fr;gap:40px;} } .rgb-ficha__logo{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:12px;} .rgb-ficha__logo-icon{width:180px;height:180px;aspect-ratio:1/1;border-radius:50%;object-fit:contain;background:var(--primary);border:1px solid var(--line);box-sizing:border-box;margin-bottom:22px;transition:transform .3s, box-shadow .3s;} .rgb-ficha__logo:hover .rgb-ficha__logo-icon{transform:scale(1.06);box-shadow:rgba(0,24,45,.32) 0 10px 26px;} .rgb-ficha__logo-name::before{content:"";display:block;width:48px;height:2px;background:var(--accent);margin:0 auto 16px;} .rgb-ficha__logo-name{font-family:var(--font-heading);font-size:1.5rem;color:var(--primary);letter-spacing:.02em;} /* ========================================================================== #ecosistema -- diagrama radial "Smidr Orbit" (25-sep-2026, Jorge: "convertir la grid simple de 'Rol en el ecosistema' al diagrama radial/orbit ya usado en VOO Solutions"). Mismo mecanismo CSS puro que .voo-orbit (VOO Solutions) y .hugr-orbit (Hugr Innovations) -- rotate+ translate+contra-rotate, sin JS ni SVG. Namespaced como --smidr-orbit-* (no se reusan los nombres de otra marca porque cada Child es un tema independiente, nunca conviven en la misma pagina), pero la mecanica es identica y ya trae corregidos los 2 bugs documentados holding-wide: centrar la caja en su punto de anclaje ANTES de rotar (translate(-50%,-50%)), y overflow:hidden contra aspect-ratio con texto de 2 lineas. Contenido real: Smiðr Supply al centro (es la pagina de Smiðr), las otras 6 marcas del holding alrededor cada 60 grados -- mismos 7 roles/funciones YA publicados en la grid simple que este bloque reemplaza (VOO Solutions/Gobernanza, RG Studio/Monetizacion, Alfroði Learning Hub/Formacion, Meraki Cultural/Operacion cultural, Smiðr Consulting/Optimizacion, Hugr Innovations/Innovacion), sin dato nuevo -- solo el layout cambia de grid a radial. */ @property --smidr-orbit-spin{ syntax:''; inherits:true; initial-value:0deg; } @keyframes smidr-orbit-spin{ to{--smidr-orbit-spin:360deg;} } .smidr-orbit{ position:relative; width:min(680px,92vw); aspect-ratio:1/1; margin:56px auto 24px; --smidr-orbit-spin:0deg; animation:smidr-orbit-spin 90s linear infinite; } .smidr-orbit:hover{animation-play-state:paused;} @media (prefers-reduced-motion:reduce){ .smidr-orbit{animation:none;} } .smidr-orbit::before{ content:""; position:absolute; inset:13%; border:1px dashed var(--line); border-radius:50%; } .smidr-orbit__center{ position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:34%; aspect-ratio:1/1; border-radius:50%; background:var(--primary); color:var(--primary-ink); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; padding:6%; box-sizing:border-box; box-shadow:0 12px 32px rgba(0,24,45,.32); z-index:2; } .smidr-orbit__center .smidr-orbit__role{color:var(--accent);} .smidr-orbit__center .smidr-orbit__title{color:var(--paper) !important;} .smidr-orbit__node{ position:absolute; top:50%;left:50%; width:30%; aspect-ratio:1/1; margin:-15% 0 0 -15%; overflow:hidden; --smidr-node-scale:1; /* --smidr-angle se fija inline por nodo en el markup (0deg, 60deg, 120deg... 300deg -- 6 nodos a 60 grados). */ transform:rotate(calc(var(--smidr-angle) + var(--smidr-orbit-spin))) translate(124%) rotate(calc(-1 * (var(--smidr-angle) + var(--smidr-orbit-spin)))) scale(var(--smidr-node-scale)); border-radius:50%; background:var(--paper-raised); border:1px solid var(--line); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center; padding:5%; box-sizing:border-box; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .3s ease; } .smidr-orbit__node:hover{ --smidr-node-scale:1.14; border-color:var(--accent); box-shadow:0 26px 54px rgba(0,0,0,.28), 0 0 0 3px var(--accent) inset; z-index:3; } .smidr-orbit__role{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-hover);margin-bottom:2px;line-height:1.15;} .smidr-orbit__title{font-family:var(--font-heading);font-size:.86rem;font-weight:700;margin:0;color:var(--paper);line-height:1.15;} @media (max-width:640px){ .smidr-orbit{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;margin:24px 0;} .smidr-orbit::before{display:none;} .smidr-orbit__center,.smidr-orbit__node{position:static;transform:none;margin:0;width:100%;aspect-ratio:auto;border-radius:14px;padding:18px;} } /* ========================================================================== CORTINA ECOSISTEMA/CONTACTO (25-sep-2026, Jorge: "revierte la decision de NO construir cortina -- aplicar el mismo parallax horizontal + watermark con fade que el resto del holding"). Misma tecnica holding-wide que VOO Solutions/Hugr Innovations (sticky + margen negativo medido en runtime, ver assets/js/ecosistema-contacto-curtain.js -- puerto directo de la version ya corregida de Hugr, Ronda 10, con los 2 fixes de progreso (phaseBShare) y de margin-top (cancela hContacto, no el propio alto) ya incluidos). Igual que en Hugr, el alto de #ecosistema (ahora con el diagrama .smidr-orbit) NO se fija en vh -- se mide en runtime, porque es bastante mas alto y variable que un 100vh fijo. ========================================================================== */ .smidr-contacto-slide-in > h2, .smidr-contacto-slide-in > p{ text-align:center; } .smidr-contacto-slide-in > p{ margin-bottom:28px; } /* Isotipo en watermark fijo, muy tenue, encima del fondo claro de #contacto -- inyectado por smidr_contacto_watermark() (functions.php) como PRIMER hijo de la seccion, HERMANO de (y antes que) .smidr-contacto-slide-in, por eso no hereda su transform/opacity de slide-in. */ /* 10-oct-2026 (Jorge): el watermark de Contacto, que se desvanece con la cortina, se muestra 150 px mas arriba del centro vertical de la seccion. */ .smidr-contacto-watermark{ position:absolute; top:calc(50% - 150px); left:50%; transform:translate(-50%,-50%); width:34%; max-width:340px; max-height:60%; height:auto; opacity:.9; pointer-events:none; object-fit:contain; } @media (max-width:960px){ .smidr-contacto-watermark{ display:none; } } @media (min-width:961px){ .smidr-curtain-stack{ position:relative; } .smidr-curtain-stack #contacto{ position:sticky; top:0; min-height:100vh; z-index:1; margin:0 !important; padding-top:196px !important; padding-bottom:80px; } .smidr-curtain-stack #ecosistema{ position:relative; z-index:2; margin-top:0; /* Fondo opaco explicito -- Jorge (25-sep-2026): la seccion se veia "traslucida" durante el scroll de la cortina. Causa real: #ecosistema no tenia background propio (rgba(0,0,0,0), confirmado con getComputedStyle en vivo) -- al deslizarse con z-index:2 sobre #contacto (sticky, z-index:1) detras, el contenido de Contacto se veia parcialmente a traves de los huecos entre los nodos del orbit. Un fondo solido aqui (mismo tono que el body, --paper) soluciona la ocultacion sin alterar el aspecto visual normal fuera de la cortina (--paper es igual al fondo de pagina). */ background:var(--paper); } .smidr-contacto-slide-in{ display:block; transform:translate3d(60%,0,0); opacity:0; pointer-events:none; will-change:transform, opacity; } .smidr-contacto-slide-in .rgb-crm-form{ margin-left:auto; margin-right:auto; } .smidr-contacto-slide-in.is-revealed{ pointer-events:auto; } .rgb-footer{ position:relative; z-index:3; } } @media (max-width:960px){ .smidr-curtain-stack{ display:flex; flex-direction:column; } .smidr-curtain-stack #ecosistema{ order:1; } .smidr-curtain-stack #contacto{ order:2; } } /* ========================================================================== Logotipo del footer -- mas grande (28-sep-2026, Jorge: "un poco mas grande para que se aprecie mas"). El padre (rgstudio-base-wp-tema) trae height:56px por defecto para .rgb-footer__logo img, compartido por todo el holding -- se sobreescribe aqui SOLO para Smidr (no holding-wide, Jorge no lo pidio asi esta vez), subiendo a 84px: mismo tamano ya establecido como "presencia adecuada" cuando se aplico este mismo ajuste en Hugr Innovations (52px nav / 84px footer). ========================================================================== */ .rgb-footer__logo img{height:84px;} /* ========================================================================== Circulo hover en las cards del Showcase -- CORREGIDO 29-sep-2026. Jorge aclaro que el "circulo hover" pedido el 28-sep NO es para la card cerrada del grid (.rgb-showcase__trigger, que se queda rectangular como en el resto del holding) sino para la imagen DENTRO del lightbox que se abre al hacer clic -- patron ya estandarizado y verificado en Hugr Innovations (su style.css trae exactamente estas mismas reglas, con su paleta). Aqui portado con la paleta de Smidr (--primary #00182D). El ajuste analogo del icono lateral de ficha esta en .rgb-ficha__logo-icon arriba. ========================================================================== */ .rgb-showcase-lightbox__frame img{ box-sizing:border-box; aspect-ratio:1/1; object-fit:contain; background:var(--primary); border:1px solid var(--line); transition:transform .3s, box-shadow .3s; border-radius:50% !important; max-height:48vh !important; } .rgb-showcase-lightbox__frame img:hover{ transform:scale(1.06); box-shadow:rgba(0,24,45,.32) 0 10px 26px; } .smidr-showcase-lightbox__more{display:inline-block;margin-top:6px;font-size:.8rem;font-weight:700;color:var(--primary);} .smidr-showcase-lightbox__more:hover{text-decoration:underline;} /* Metodología -- tabla de 3 servicios (Servicio / Responde a la pregunta / Entregable principal). */ #rgb-main .rgb-tabla{width:100%;max-width:900px;border-collapse:collapse;margin:24px 0;font-size:.95rem;} #rgb-main .rgb-tabla th{text-align:left;background:var(--primary);color:var(--primary-ink);padding:12px 16px;font-weight:600;} #rgb-main .rgb-tabla td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);} #rgb-main .rgb-tabla td:first-child{font-weight:700;} @media (max-width:640px){#rgb-main .rgb-tabla{display:block;overflow-x:auto;}} /* Principio rector y notas -- bloque con filete Dorado. */ #rgb-main .rgb-principio{max-width:760px;margin-top:24px;padding:18px 22px;background:var(--paper-raised);border-left:3px solid var(--accent);} #rgb-main .rgb-principio__label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;} #rgb-main .rgb-principio p{margin:0;} /* Fondos diferenciados por sección (Papel / Blanco alternados). */ /* A ancho completo (full-bleed, mismo truco 100vw que Hugr): el fondo vive en ::before y no en la caja de la seccion, que queda dentro del .container (se veia "boxed"). */ /* #contacto se excluye: es sticky (cortina) y su position/z-index los define el bloque de la cortina. */ #rgb-main section[id]{border-top:none;} #rgb-main section[id]:not(#contacto){position:relative;isolation:isolate;} #rgb-main section[id]:not(#contacto)::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;z-index:-1;pointer-events:none;border-top:1px solid var(--line);} #rgb-main section[id]:not(#contacto):first-of-type::before{border-top:none;} #rgb-main #servicios::before, #rgb-main #metodologia::before{background:#FFFFFF;} #rgb-main #casos::before, #rgb-main #ecosistema::before{background:var(--paper);} /* Efecto de Ondas del Hero (assets/js/hero-ondas.js): overlay sobre el video/gradiente, mismo z-index/blend que el efecto análogo de Hugr/Verkþing. */ .rgb-hero .smidr-hero-ondas{position:absolute;inset:0;z-index:1;mix-blend-mode:screen;pointer-events:none;} /* Logo de nav horizontal (Secundario 3.44:1): altura 48px como en Hugr/VOO. */ .rgb-nav__brand img,.rgb-nav__brand svg{height:48px;width:auto;} /* Nav inicial (estático) en Marino, el mismo color del fondo del logotipo FullColor Secundario, para que el logo se integre sin recuadro. Al hacer scroll el padre ya aplica Marino + logotipo negativo, así que ambos estados quedan iguales. */ .rgb-nav:not(.is-scrolled){background:var(--primary);} .rgb-nav:not(.is-scrolled) .rgb-nav__social a{color:var(--primary-ink);} .rgb-nav:not(.is-scrolled) .rgb-nav__social a:hover{background:var(--accent);color:var(--accent-ink);} .rgb-nav:not(.is-scrolled) .rgb-nav__toggle span{background:var(--primary-ink);} @media (min-width:961px){ .rgb-nav:not(.is-scrolled) .rgb-menu > li > a{color:var(--primary-ink);} .rgb-nav:not(.is-scrolled) .rgb-menu > li > a:hover, .rgb-nav:not(.is-scrolled) .rgb-menu > li.current-menu-item > a{color:var(--accent);} } /* Contacto: el párrafo de apertura queda centrado (max-width 760 sin margen auto lo dejaba a la izquierda). */ #rgb-main #contacto .smidr-contacto-slide-in > p{margin-left:auto;margin-right:auto;text-align:center;} /* Showcase (Servicios/Casos): sin panel translúcido propio ni radio, para que las tarjetas alineen con el texto y no se lea como una caja dentro de la sección a ancho completo. */ #rgb-main .rgb-showcase{background:transparent;padding-left:0;padding-right:0;} /* ========================================================================== v0.5.0 -- Propuesta UI/UX (Jorge, 29-sep-2026) 1) Quienes somos en dos columnas (logo FullColor izquierda / contenido derecha) 2) Servicios en Marino secundario con watermark negativo fijo (parallax) 3) Tabla de Metodologia rediseñada (filas-tarjeta con numeracion) ========================================================================== */ /* ---- 1) Quienes somos: contenido a la izquierda, logo FullColor a la derecha, centrado horizontal y verticalmente en el area de su columna ---- */ #rgb-main #quienes-somos .smidr-qs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,380px); column-gap:64px; align-items:stretch; } #rgb-main #quienes-somos .smidr-qs__logo{ margin:0; display:flex; align-items:center; justify-content:center; } #rgb-main #quienes-somos .smidr-qs__logo img{ display:block; width:100%; max-width:340px; height:auto; border-radius:18px; box-shadow:0 24px 60px rgba(0,24,45,.22); } #rgb-main #quienes-somos .smidr-qs__body > h2{margin-top:0;} @media (max-width:860px){ #rgb-main #quienes-somos .smidr-qs__grid{grid-template-columns:minmax(0,1fr);row-gap:32px;} #rgb-main #quienes-somos .smidr-qs__logo img{max-width:240px;} } /* ---- 2) Servicios: Marino secundario + watermark negativo fijo ---- */ #rgb-main #servicios::before{ border-top:none; background-color:var(--primary-2); background-image: linear-gradient(rgba(0,52,79,.86),rgba(0,52,79,.86)), var(--smidr-watermark-negativo); background-repeat:no-repeat,no-repeat; background-position:center center,center center; background-size:cover,auto 80vh; background-attachment:scroll,fixed; } #rgb-main #servicios{padding-top:72px;padding-bottom:72px;} #rgb-main #servicios > h2{color:var(--primary-ink);} #rgb-main #servicios > h2::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-top:14px;} #rgb-main #servicios > p{color:rgba(255,255,255,.88);} @media (max-width:960px){ /* iOS/Android ignoran background-attachment:fixed; se deja el watermark centrado en la seccion. */ #rgb-main #servicios::before{background-attachment:scroll,scroll;background-size:cover,auto 60%;} } @media (prefers-reduced-motion:reduce){ #rgb-main #servicios::before{background-attachment:scroll,scroll;} } /* ---- 3) Metodologia: tabla como filas-tarjeta ---- */ #rgb-main .rgb-tabla{ width:100%; max-width:none; border-collapse:separate; border-spacing:0 14px; margin:20px 0 8px; font-size:1rem; counter-reset:smidr-fila; } #rgb-main .rgb-tabla thead th{ background:transparent; color:var(--ink-soft); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:0 26px 2px; border:none; } #rgb-main .rgb-tabla tbody tr{counter-increment:smidr-fila;} #rgb-main .rgb-tabla tbody td{ background:var(--paper); padding:24px 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink); transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } #rgb-main .rgb-tabla tbody td:first-child{ border-left:4px solid var(--accent); border-radius:14px 0 0 14px; font-family:var(--font-heading); font-size:1.12rem; font-weight:700; color:var(--primary); display:table-cell; /* sangria francesa: si el nombre ocupa 2 lineas, la 2a alinea con el texto y no con la insignia */ padding-left:84px; text-indent:-58px; } #rgb-main .rgb-tabla tbody td:first-child::before{ content:counter(smidr-fila,decimal-leading-zero); display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-right:16px; border-radius:50%; background:var(--primary); color:var(--accent); font-family:var(--font-body,inherit); font-size:.9rem; font-weight:700; letter-spacing:.02em; vertical-align:middle; text-indent:0; } #rgb-main .rgb-tabla tbody td:nth-child(2){ font-style:italic; color:var(--ink-soft); line-height:1.5; } #rgb-main .rgb-tabla tbody td:last-child{ border-right:1px solid var(--line); border-radius:0 14px 14px 0; font-weight:600; color:var(--primary); padding-left:56px; text-indent:-30px; } #rgb-main .rgb-tabla tbody td:last-child::before{ text-indent:0; content:""; display:inline-block; width:20px; height:20px; margin-right:10px; vertical-align:-4px; background:var(--accent); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } #rgb-main .rgb-tabla tbody tr:hover td{ background:#FFFFFF; border-color:var(--primary-2); box-shadow:0 14px 28px -18px rgba(0,24,45,.45); } #rgb-main .rgb-tabla tbody tr:hover td:first-child{border-left-color:var(--accent);} @media (max-width:760px){ #rgb-main .rgb-tabla, #rgb-main .rgb-tabla tbody, #rgb-main .rgb-tabla tr, #rgb-main .rgb-tabla td{display:block;width:100%;overflow:visible;} #rgb-main .rgb-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} #rgb-main .rgb-tabla tbody tr{ margin-bottom:16px; background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; overflow:hidden; } #rgb-main .rgb-tabla tbody td, #rgb-main .rgb-tabla tbody td:first-child, #rgb-main .rgb-tabla tbody td:last-child{ border:none; border-radius:0; background:transparent; padding:14px 18px; text-indent:0; } #rgb-main .rgb-tabla tbody td:first-child{padding-top:18px;padding-left:76px;text-indent:-58px;} #rgb-main .rgb-tabla tbody td:last-child{padding-bottom:18px;} #rgb-main .rgb-tabla tbody tr:hover td{box-shadow:none;background:transparent;} #rgb-main .rgb-tabla tbody td:nth-child(2)::before, #rgb-main .rgb-tabla tbody td:last-child::before{ display:block; width:auto; height:auto; margin:0 0 4px; background:none; -webkit-mask:none; mask:none; font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); vertical-align:baseline; } #rgb-main .rgb-tabla tbody td:nth-child(2)::before{content:"Responde a la pregunta";} #rgb-main .rgb-tabla tbody td:last-child::before{content:"Entregable principal";} } /* ========================================================================== v0.6.0 (10-oct-2026) -- Jorge: "estilo similar a Meráki (efecto parallax con isotipo en watermark fijo de su marca)" en Quiénes somos, Casos reales, Metodología y Ecosistema. Servicios conserva su propio fondo Marino con watermark fijo y Contacto su cortina. Misma receta que Meráki, VOO y Hugr: el isotipo es un ::after con position:fixed (solo CSS, sin background-attachment:fixed, que en iOS no funciona) y cada sección se recorta con clip-path para que la marca solo se vea dentro de su sección. Cada sección ya es contexto de apilamiento (isolation:isolate) y su fondo es un ::before sin sobresalir, por eso el recorte vertical es 0. Isotipo a color (hexágono Marino + Mjölnir Dorado) a 9 % de opacidad. ========================================================================== */ :root{--smidr-wm-o:.09;} #rgb-main #quienes-somos, #rgb-main #casos, #rgb-main #metodologia, #rgb-main #ecosistema{clip-path:inset(0 -100vmax);} #rgb-main #quienes-somos::after, #rgb-main #casos::after, #rgb-main #metodologia::after, #rgb-main #ecosistema::after{ content:""; position:fixed; z-index:-1; pointer-events:none; top:calc(50% + 36px); right:max(-4vw,-56px); width:clamp(260px,30vw,440px); aspect-ratio:880/977; transform:translateY(-50%); background:url("assets/img/isotipo-smidr-fullcolor.png") center/contain no-repeat; opacity:var(--smidr-wm-o); } @media (max-width:960px){ #rgb-main #quienes-somos::after, #rgb-main #casos::after, #rgb-main #metodologia::after, #rgb-main #ecosistema::after{ right:-8vw; width:min(64vw,260px); } } @media (prefers-reduced-motion:reduce){ #rgb-main #quienes-somos::after, #rgb-main #casos::after, #rgb-main #metodologia::after, #rgb-main #ecosistema::after{ position:absolute; top:50%; } } @media print{ #rgb-main #quienes-somos::after, #rgb-main #casos::after, #rgb-main #metodologia::after, #rgb-main #ecosistema::after{display:none;} } /* ========================================================================== v0.6.1 (10-oct-2026, Jorge): «Servicios y Casos reales: las cards del showcase mantienen su diseno, solo el color de fondo de la card sea 70 % de transparencia», corregido despues a 30 %. El fondo de la card queda al 70 % de su color (alfa .70) y deja ver el fondo y el isotipo fijo de la seccion. El boton interior (la zona del circulo) tambien se vuelve transparente: tenia su propio fondo opaco y tapaba el efecto. - Servicios (fondo Marino): la card blanca queda en un azul claro grisaceo (aprox. #B2C2CA); el texto Marino sigue en 9.8:1. «+ Mas» pasa del Dorado (1.1:1 sobre esa card; ya era de 1.6:1 sobre blanco) a Marino secundario #00344F (7.2:1). Solo en modo claro del Showcase: el modo oscuro conserva su card y su acento. - Casos reales (fondo claro): la card queda casi del color del fondo, con su borde; el texto Marino sigue en 17:1 y «+ Mas» no cambia. Solo en modo claro: el modo oscuro del Showcase conserva su card solida (texto claro sobre fondo claro no se leeria). El hover de las cards queda como estaba. El numero es el `70%` de las dos primeras reglas. ========================================================================== */ #servicios .rgb-showcase__item, #casos .rgb-showcase--claro .rgb-showcase__item{background:color-mix(in srgb, var(--rgb-sc-bg) 70%, transparent);} #servicios .rgb-showcase__trigger, #casos .rgb-showcase--claro .rgb-showcase__trigger{background:transparent;} #servicios .rgb-showcase--claro .rgb-showcase__more{color:var(--primary-2);}