/** * Valoracar — assets/css/components.css * Capa premium: botones scaleX, header sticky+blur, hero con imagen+overlay, * cards con imagen, reveal scroll, menú móvil, scroll-top. * Cargado DESPUÉS de theme.css. * * Paleta aplicada: * --color-primary = #0A3D62 (navy) * --color-primary-deep = #072A44 (navy-deep) * --color-accent = #39B54A (verde — NUNCA fondo con texto blanco) * --color-accent-ink = #15803D (verde oscuro — texto sobre blanco WCAG AA 5:1) * Botón PRIMARY hover → navy-deep (NO verde sobre blanco) * * Easing premium: cubic-bezier(0.25, 0.46, 0.45, 0.94) */ /* ========================================================================= BOTONES — rectangulares con uppercase y relleno deslizante (scaleX) Sobrescribe los radius de theme.css para el look premium del studio. ========================================================================= */ .wp-block-button__link { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0.95rem 2.1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; border-radius: 2px; border: 1.5px solid transparent; text-decoration: none; transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); } .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform 0.45s var(--ease-premium); } .wp-block-button__link:hover::before { transform: scaleX(1); transform-origin: left center; } /* Primary — navy sólido, hover = navy-deep (WCAG: blanco sobre #072A44 = 14:1) */ .wp-block-button.is-style-primary .wp-block-button__link, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } .wp-block-button.is-style-primary .wp-block-button__link::before, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link::before { background-color: var(--color-primary-deep); } .wp-block-button.is-style-primary .wp-block-button__link:hover, .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover { color: #fff; border-color: var(--color-primary-deep); } /* Ghost — contorno navy, se rellena de navy */ .wp-block-button.is-style-ghost .wp-block-button__link { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .wp-block-button.is-style-ghost .wp-block-button__link::before { background-color: var(--color-primary); } .wp-block-button.is-style-ghost .wp-block-button__link:hover { color: #fff; } /* White — sobre fondos navy; se rellena de navy con texto blanco */ .wp-block-button.is-style-white .wp-block-button__link { background-color: #fff; color: var(--color-primary); border-color: #fff; } .wp-block-button.is-style-white .wp-block-button__link::before { background-color: var(--color-primary); } .wp-block-button.is-style-white .wp-block-button__link:hover { color: #fff; border-color: #fff; } /* Outline Light — contorno blanco sobre navy (CTA secundario del hero) */ .wp-block-button.is-style-outline-light .wp-block-button__link { background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); } .wp-block-button.is-style-outline-light .wp-block-button__link::before { background-color: rgba(255, 255, 255, 0.15); } .wp-block-button.is-style-outline-light .wp-block-button__link:hover { color: #fff; border-color: #fff; } .wp-block-button__link[disabled], .wp-block-button__link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } /* ========================================================================= GSAP HERO — cuando GSAP toma el control, desactiva las animaciones CSS del hero para evitar doble animación. JS añade .gsap-hero al . ========================================================================= */ .gsap-hero .vc-hero .vc-hero__content > * { animation: none; opacity: 0; /* GSAP parte desde 0 */ } /* Ken-Burns (::before) corre por CSS también con GSAP activo: no hay conflicto porque GSAP solo anima los hijos de contenido, nunca el pseudo-elemento. */ /* Q2 — CTA hover: lift sutil para todos los botones */ .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(10, 61, 98, 0.55); } /* Q2 — CTA hero principal (primary en hero): lift + escala micro */ .vc-hero .wp-block-button.is-style-primary .wp-block-button__link:hover { transform: translateY(-2px) scale(1.015); } /* CTA del header — más compacto */ .site-header__cta .wp-block-button__link { min-height: 42px; padding: 0.7rem 1.5rem; font-size: 0.68rem; } /* ========================================================================= HEADER — fino ~72px, sticky, blur, clase is-scrolled ========================================================================= */ .site-header { position: sticky; top: 0; z-index: var(--wp--custom--z-index--header, 200); background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 var(--color-line), 0 10px 30px -18px rgba(10, 61, 98, 0.2); border-color: var(--color-line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1240px; margin-inline: auto; padding-inline: var(--container-x); height: var(--header-h); transition: height 0.4s var(--ease-premium); } /* La navegación ocupa el centro; el CTA queda a la derecha */ .site-header .nav-desktop { margin-inline: auto; } .site-header .nav-desktop ul { gap: 0.25rem; } .site-header__cta { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; } /* Teléfono visible en cabecera (desktop) */ .site-header__phone { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; transition: color 0.25s var(--ease-premium); } .site-header__phone:hover { color: var(--color-primary-deep); } .site-header__phone svg { color: var(--color-accent-ink); flex-shrink: 0; } /* En anchos intermedios, ocultar el número y dejar solo el botón para no apretar la barra */ @media (max-width: 1100px) { .site-header__phone span { display: none; } } .site-header.is-scrolled .site-header__inner { height: calc(var(--header-h) - 12px); } /* Logo */ .site-header .custom-logo, .site-header .valoracar-logo { height: 56px; width: auto; transition: height 0.4s var(--ease-premium); } .site-header.is-scrolled .custom-logo, .site-header.is-scrolled .valoracar-logo { height: 46px; } /* Navegación desktop — estilizada: mayúsculas, tracking amplio, peso ligero */ .site-header .nav-desktop { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .site-header .wp-block-navigation-item__content { position: relative; display: inline-block; padding: 0.5rem 0.95rem; color: var(--color-ink); text-decoration: none; white-space: nowrap; transition: color 0.25s var(--ease-premium); } .site-header .wp-block-navigation-item__content:hover { color: var(--color-primary); } .site-header .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.15rem; height: 2px; /* Verde como acento decorativo — no como fondo de texto blanco */ background: var(--color-accent); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s var(--ease-premium); } .site-header .wp-block-navigation-item__content:hover::after, .site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left center; } /* Flexbox wrapper del inner del header */ .site-header .nav-flex { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; } /* ========================================================================= IMÁGENES DE TEMA como background (rutas relativas a assets/css/) ========================================================================= */ /* bg-hero ahora se aplica a ::before para Ken-Burns */ .bg-hero::before { background-image: url(../img/hero.jpg); background-image: image-set( url(../img/hero.webp) type("image/webp"), url(../img/hero.jpg) type("image/jpeg") ); } .bg-cover::before { background-size: cover; background-position: center 42%; background-repeat: no-repeat; } /* ========================================================================= HERO — imagen en ::before (Ken-Burns) + overlay/glows en ::after ========================================================================= */ .vc-hero { position: relative; display: flex; align-items: center; min-height: 82vh; overflow: hidden; } /* Capa imagen — Ken-Burns al cargar */ .vc-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 42%; background-repeat: no-repeat; transform-origin: center center; animation: kenBurns 1.2s var(--ease-premium) forwards; } @keyframes kenBurns { from { transform: scale(1.06); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .vc-hero::before { animation: none; transform: scale(1); } } .vc-hero .vc-hero__content { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--container-x); padding-block: 6rem 5rem; position: relative; z-index: 2; } /* Texto del hero a la izquierda */ .vc-hero__content > * { max-width: 660px; margin-inline-end: auto; } .vc-hero__content > .wp-block-buttons { max-width: none; } /* Overlay + glows de profundidad — legibilidad AA + luz ambiental */ .vc-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 18% 35%, rgba(57, 181, 74, 0.10) 0%, transparent 45%), radial-gradient(100% 100% at 50% 100%, rgba(7, 42, 68, 0.55) 0%, transparent 60%), linear-gradient(100deg, rgba(7, 42, 68, 0.90) 0%, rgba(10, 61, 98, 0.68) 42%, rgba(10, 61, 98, 0.30) 72%, rgba(10, 61, 98, 0.12) 100%); } /* Todo hijo directo sobre las capas ::before (0) y ::after (1) */ .vc-hero > * { position: relative; z-index: 2; } /* Entrada staggered del contenido del hero */ .vc-hero__content > * { opacity: 0; transform: translateY(22px); animation: heroIn 0.9s var(--ease-premium) forwards; } .vc-hero__content > *:nth-child(1) { animation-delay: 0.15s; } .vc-hero__content > *:nth-child(2) { animation-delay: 0.30s; } .vc-hero__content > *:nth-child(3) { animation-delay: 0.45s; } .vc-hero__content > *:nth-child(4) { animation-delay: 0.60s; } .vc-hero__content > *:nth-child(5) { animation-delay: 0.72s; } @keyframes heroIn { to { opacity: 1; transform: none; } } /* Textos dentro del hero — siempre blancos sobre overlay navy */ .vc-hero h1, .vc-hero h2, .vc-hero p { color: #ffffff; } /* Eyebrow del hero — chip navy (regla completa en theme.css §Eyebrow) */ /* Sobrescritura local: margen-bottom para separación del h1 */ .vc-hero .vc-hero__eyebrow { margin-bottom: 1rem; } /* Indicador de scroll */ .vc-hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.7); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; } .vc-hero__scroll-line { width: 1px; height: 42px; background: rgba(255, 255, 255, 0.35); overflow: hidden; position: relative; } .vc-hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); animation: scrollCue 2s var(--ease-premium) infinite; } @keyframes scrollCue { 0% { transform: translateY(-100%); } 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } } /* ========================================================================= SERVICIOS — cards con imagen, aspect-ratio 4/3, hover zoom ========================================================================= */ .vc-services { padding-block: var(--section-y); } .vc-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .vc-service-card { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); transition: box-shadow 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .vc-service-card:hover { box-shadow: var(--shadow-card-hover); } .vc-service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); } .vc-service-card:hover img { transform: scale(1.05); } .vc-service-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(7, 42, 68, 0.82) 100%); display: flex; align-items: flex-end; padding: 1.5rem; } .vc-service-card__title { color: #ffffff; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } /* ========================================================================= SPLIT — proceso a domicilio (imagen + texto lado a lado) ========================================================================= */ .vc-split { padding-block: var(--section-y); } .vc-split__img { border-radius: 0; box-shadow: 0 30px 60px -30px rgba(10, 61, 98, 0.4); width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* ========================================================================= PLANES/PRECIOS — 3 cards con destaque ========================================================================= */ .vc-plans { padding-block: var(--section-y); background-color: var(--color-surface); } .vc-plans__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; max-width: 1000px; margin-inline: auto; } @media (min-width: 700px) { .vc-plans__grid { grid-template-columns: repeat(3, 1fr); } } .vc-plan-card { background: #ffffff; border: 1px solid var(--color-line); border-top: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .vc-plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } /* Featured — domina visualmente, translateY permanente */ .vc-plan-card--featured { border-color: var(--color-primary); border-top: 3px solid var(--color-primary); box-shadow: var(--shadow-featured); position: relative; transform: translateY(-6px); } .vc-plan-card--featured:hover { transform: translateY(-10px); box-shadow: var(--shadow-featured-hover); } .vc-plan-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) scale(0.8); background: var(--color-primary); color: #ffffff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 1rem; border-radius: var(--radius-full); white-space: nowrap; } /* Q7 — badge pop-in cuando la card está visible (añadido por JS reveal) */ .js-reveal .vc-plan-card--featured.is-revealed .vc-plan-card__badge { transform: translateX(-50%) scale(1); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; } /* Sin JS o reduced-motion: badge visible directamente */ .vc-plan-card--featured:not(.js-reveal *) .vc-plan-card__badge, .vc-plan-card--featured .vc-plan-card__badge { transform: translateX(-50%) scale(1); } /* Restaurar para el caso JS+reveal */ .js-reveal .vc-plan-card--featured:not(.is-revealed) .vc-plan-card__badge { transform: translateX(-50%) scale(0.8); } .vc-plan-card__name { font-size: 1.25rem; font-weight: 700; color: var(--color-ink); margin: 0; } .vc-plan-card__price { font-size: 2.75rem; font-family: var(--font-display); font-weight: 500; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1; } .vc-plan-card__price span { display: block; font-size: 0.82rem; font-family: var(--font-body); font-weight: 500; color: var(--color-ink-soft); letter-spacing: 0; margin-bottom: 0.2rem; line-height: 1; } .vc-plan-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .vc-plan-card__features li { font-size: 0.9rem; color: var(--color-ink-soft); padding-left: 1.5rem; position: relative; } .vc-plan-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-ink); font-weight: 700; } /* ========================================================================= PÁGINAS LEGALES — lectura cómoda ========================================================================= */ .vc-legal { max-width: 760px; margin-inline: auto; } .vc-legal h2 { margin-top: 2.25rem; font-size: 1.35rem; } .vc-legal h3 { margin-top: 1.5rem; font-size: 1.1rem; } .vc-legal p, .vc-legal li { color: var(--color-ink); line-height: 1.7; } .vc-legal ul { padding-left: 1.25rem; } .vc-legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } .vc-legal th, .vc-legal td { border: 1px solid var(--color-line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } .vc-legal th { background: var(--color-surface); } /* ========================================================================= FORMULARIO — contacto / filtrado ========================================================================= */ .vc-form { display: flex; flex-direction: column; gap: 1.1rem; } .vc-form label { font-weight: 600; font-size: 0.9rem; color: var(--color-ink); display: block; margin-bottom: 0.4rem; } .vc-form input, .vc-form textarea, .vc-form select { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--color-line); border-radius: var(--radius-md); font: inherit; color: var(--color-ink); background: #fff; transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium); } .vc-form input:focus, .vc-form textarea:focus, .vc-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.12); } .vc-form textarea { min-height: 140px; resize: vertical; } .vc-form__check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--color-ink-soft, #5B6B78); } .vc-form__check input { width: auto; margin-top: 0.2rem; } .vc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 640px) { .vc-form__row { grid-template-columns: 1fr; } } /* ========================================================================= FOOTER — asegurar texto claro sobre navy ========================================================================= */ .site-footer :is(h2, h3) { color: #fff; } .site-footer a { color: rgba(255, 255, 255, 0.82); } .site-footer a:hover { color: var(--color-accent); } /* ========================================================================= PAGE HERO — cabecera compacta de páginas internas ========================================================================= */ .vc-page-hero { background: radial-gradient(80% 120% at 50% 0%, #0E4E7A 0%, transparent 55%), linear-gradient(160deg, #072A44 0%, #0A3D62 100%); color: #fff; padding-block: clamp(3.5rem, 8vw, 6rem); padding-inline: var(--container-x); text-align: center; } .vc-page-hero__inner { max-width: 760px; margin-inline: auto; } /* .vc-page-hero__eyebrow — chip navy (regla completa en theme.css §Eyebrow) */ .vc-page-hero .vc-page-hero__eyebrow { margin: 0 0 1rem; margin-inline: auto; } .vc-page-hero h1 { color: #fff; margin: 0 0 1rem; } .vc-page-hero p { color: rgba(255, 255, 255, 0.85); font-size: 1.075rem; line-height: 1.6; margin: 0 auto; max-width: 560px; } /* ========================================================================= BANDA CTA FINAL — foto hero oscurecida + overlay navy profundo ========================================================================= */ .vc-cta-band { position: relative; overflow: hidden; background: radial-gradient(80% 120% at 50% 0%, #0E4E7A 0%, transparent 55%), linear-gradient(160deg, #072A44 0%, #0A3D62 100%); padding-block: clamp(3rem, 7vw, 5rem); text-align: center; } /* Foto de fondo con overlay navy — cierre distinto usando hero-llave (no reusar hero) */ .vc-cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: image-set( url(../img/hero-llave.webp) type("image/webp"), url(../img/hero-llave.webp) type("image/jpeg") ); background-size: cover; background-position: center 40%; background-repeat: no-repeat; opacity: 0.48; /* atenuado: la foto se ve, texto blanco legible */ } /* Overlay navy sólido sobre la foto */ .vc-cta-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(7, 42, 68, 0.64) 0%, rgba(10, 61, 98, 0.56) 100%); pointer-events: none; } /* Todo el contenido por encima de los pseudoelementos */ .vc-cta-band > * { position: relative; z-index: 2; } .vc-cta-band h2, .vc-cta-band p { color: #ffffff; } .vc-cta-band p { color: rgba(255, 255, 255, 0.8); } /* Estructura del CTA band (reemplaza estilos inline previos) */ .vc-cta-band__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--container-x); text-align: center; } .vc-cta-band .is-style-eyebrow { margin-bottom: 1rem; margin-inline: auto; /* El eyebrow hereda color blanco de .vc-cta-band context */ color: rgba(255, 255, 255, 0.78); } /* Divider lima del eyebrow queda visible sobre navy oscuro — contraste OK */ .vc-cta-band .is-style-eyebrow::after { left: 50%; transform: translateX(-50%); } .vc-cta-band__title { font-size: clamp(1.75rem, 4vw, 2.75rem); color: #ffffff; margin-bottom: 1rem; } .vc-cta-band__lead { font-size: 1.05rem; max-width: 520px; margin-inline: auto; margin-bottom: 2rem; } .vc-cta-band__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ========================================================================= REVEAL al scroll (IntersectionObserver añade .is-revealed) Anti-FOUC: solo se oculta si hay JS (html.js-reveal). ========================================================================= */ /* Q8 — Entrada de página: solo opacity. NO animar transform en : un transform (aunque sea identidad) en fill forwards convierte al body en containing block y rompe position:fixed (FAB WhatsApp / scroll-top quedaban anclados al footer). */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageIn 400ms var(--ease-premium) forwards; } /* Default (sin JS): siempre visible */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium); will-change: opacity, transform; } /* Q3 — Variante sm: textos/párrafos */ .js-reveal [data-reveal="sm"] { transform: translateY(16px); transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium); } /* Q3 — Variante lg: titulares/imágenes */ .js-reveal [data-reveal="lg"] { transform: translateY(40px); transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium); } .js-reveal [data-reveal="left"] { transform: translateX(-28px); } .js-reveal [data-reveal="right"] { transform: translateX(28px); } .js-reveal [data-reveal="fade"] { transform: none; } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; } .js-reveal [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); } .js-reveal [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; } .js-reveal [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.05s; } .js-reveal [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.15s; } .js-reveal [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.25s; } .js-reveal [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.35s; } /* Q6 — Delays extendidos del proceso (stagger pasos) */ .vc-split [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.10s; } .vc-split [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.20s; } .vc-split [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.30s; } .vc-split [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.40s; } /* Q6 — Pop de números en los spans del proceso */ .js-reveal .vc-split [data-reveal-stagger] > li > span:first-child { transform: scale(0.7); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .js-reveal .vc-split [data-reveal-stagger].is-revealed > li > span:first-child { transform: scale(1); } /* ========================================================================= PRIORIDAD 2 — Números de paso: Cormorant, verde ink, hairline lima Reemplaza los círculos navy 32px del HTML inline con overrides CSS. El HTML tiene: span con background navy, color blanco, border-radius:50%. Los sobreescribimos directamente. ========================================================================= */ [data-process-line] li > span:first-child { /* Quitar círculo navy */ background: transparent !important; border-radius: 0 !important; color: var(--color-accent-ink) !important; /* #15803D texto sobre blanco */ font-family: var(--font-display) !important; font-size: 2.4rem !important; font-weight: 400 !important; line-height: 1 !important; width: auto !important; height: auto !important; display: block !important; place-items: unset !important; /* Hairline de 28px en verde lima debajo del número */ padding-bottom: 6px; border-bottom: 3px solid #39B54A; /* gráfico — no texto */ /* Separación del texto que sigue */ margin-bottom: 0.35rem; flex-shrink: 0; } /* ========================================================================= PRIORIDAD 2 — Dividers de sección bajo eyebrow (h2 de sección) Regla 3px × 40px verde lima debajo del .is-style-eyebrow. En secciones sobre fondo claro (blanco/surface) y navy por igual. ========================================================================= */ .is-style-eyebrow { position: relative; padding-bottom: 10px; } .is-style-eyebrow::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: #39B54A; border-radius: 2px; } /* Centrado cuando el eyebrow está centrado */ .has-text-align-center .is-style-eyebrow::after, [style*="text-align:center"] .is-style-eyebrow::after, [style*="text-align: center"] .is-style-eyebrow::after { left: 50%; transform: translateX(-50%); } /* En navy (vc-perito-navy): la regla verde lima se mantiene igual — contraste OK */ /* ========================================================================= PRIORIDAD 2 — Iconos Trust Strip: verde-ink sobre fondo blanco ========================================================================= */ .vc-trust__icon { color: var(--color-accent-ink) !important; /* #15803D stroke sobre blanco — AA */ } /* ========================================================================= PRIORIDAD 2 — Iconos "Qué revisamos" cards: verde-ink sobre blanco ========================================================================= */ .vc-check-card__icon { color: var(--color-accent-ink); /* #15803D */ } /* Icono circular para tarjetas de valores (Sobre nosotros) */ .vc-value-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(57, 181, 74, 0.12); margin-bottom: 1rem; } /* ========================================================================= PRIORIDAD 2 — Hover con borde verde + lift en cards ========================================================================= */ .vc-check-card:hover { border-color: #39B54A; transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .vc-plan-card:hover { border-color: #39B54A; } /* ========================================================================= PRIORIDAD 2 — Badge "Recomendado": fondo verde lima, texto navy-deep ========================================================================= */ .vc-plan-card__badge { background: #39B54A; /* verde lima — fondo gráfico, no texto sobre blanco */ color: #072A44; /* navy-deep — AA sobre #39B54A (~6:1) */ } /* ========================================================================= PROCESO — línea conectora vertical (animada por GSAP / fallback visible) ========================================================================= */ [data-process-line] { position: relative; } [data-process-line]::before { content: ""; position: absolute; left: 16px; /* centro del número 32px */ top: 32px; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(10, 61, 98, 0.2) 0%, rgba(57, 181, 74, 0.35) 100%); transform: scaleY(0); transform-origin: top; transition: transform 0.8s var(--ease-premium); } /* Fallback: sin JS o con reduced-motion → línea completa visible */ [data-process-line].is-revealed::before, :not(.js-reveal) [data-process-line]::before { transform: scaleY(1); } /* Con GSAP activo: la línea la dibuja el div físico con scrub. Ocultamos la pseudo CSS para no tener dos líneas desincronizadas. */ .gsap-hero [data-process-line]::before { display: none; } /* ========================================================================= PROFUNDIDAD SECCIONES CLARAS — separadores, glow y dot-grid ========================================================================= */ /* Hairline entre secciones sobre blanco */ .vc-plans, .vc-services { border-top: 1px solid var(--color-line); } /* Glow tenue detrás de cabecera de sección (eyebrow + título) */ .vc-services > .wp-block-group, .vc-plans > .wp-block-group { position: relative; } .vc-services > .wp-block-group::before, .vc-plans > .wp-block-group::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(57, 181, 74, 0.05), transparent); z-index: 0; } /* Dot-grid + fondo surface SOLO en FAQ (sección 7), no en "Cómo funciona" (sección 4). Sección 4 ahora va en blanco para el ritmo: hero > white trust > surface revisamos > white como-funciona > navy perito > white comparador > surface faq > navy cta */ .has-surface-background-color.has-background { background-color: var(--color-surface) !important; background-image: radial-gradient(rgba(10, 61, 98, 0.04) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } /* "Cómo funciona" (sección 4): sobreescribir surface → blanco. Identificada por contener .vc-split (split proceso a domicilio). La FAQ también usa has-surface pero no contiene .vc-split, así que no se ve afectada. */ .wp-block-group.has-surface-background-color.has-background:has(.vc-split) { background-color: #ffffff !important; background-image: none; } /* ========================================================================= HAMBURGUESA + MENÚ MÓVIL (overlay propio, focus-trap en theme.js) ========================================================================= */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--color-primary); transition: transform 0.3s var(--ease-premium), opacity 0.3s var(--ease-premium); margin-inline: auto; } body.menu-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle__bar:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: var(--wp--custom--z-index--modal, 300); background: rgba(7, 42, 68, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.4s var(--ease-premium); } .mobile-menu[hidden] { display: none; } .mobile-menu.is-open { opacity: 1; } .mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); background: var(--color-bg-deep); color: var(--color-on-primary); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; transform: translateX(100%); transition: transform 0.45s var(--ease-premium); overflow-y: auto; } .mobile-menu.is-open .mobile-menu__panel { transform: none; } .mobile-menu__close { align-self: flex-end; font-size: 2rem; line-height: 1; background: none; border: 0; color: var(--color-on-primary); cursor: pointer; width: 44px; height: 44px; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; } .mobile-menu__nav a { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-on-primary); text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color 0.25s var(--ease-premium), padding-left 0.25s var(--ease-premium); } .mobile-menu__nav a:hover { /* Verde sobre navy-deep = contraste AA para textos grandes */ color: var(--color-accent); padding-left: 0.5rem; } .mobile-menu__cta { margin-top: 1.25rem; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.9rem 1.5rem; background: var(--color-primary); color: #ffffff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background 0.3s var(--ease-premium); } .mobile-menu__cta:hover { background: var(--color-primary-deep); color: #ffffff; } .mobile-menu__meta { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; } .mobile-menu__meta a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .mobile-menu__meta a:hover { color: #ffffff; } /* ========================================================================= WHATSAPP FAB ========================================================================= */ .whatsapp-fab { position: fixed; right: clamp(1rem, 3vw, 2rem); /* Apilado sobre el scroll-top (56px + 12px de separación). */ bottom: calc(clamp(1rem, 3vw, 2rem) + 68px); z-index: var(--wp--custom--z-index--floating, 250); width: 56px; height: 56px; display: grid; place-items: center; background: #25d366; color: #fff; border-radius: 50%; box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.55); transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), background 0.3s; } .whatsapp-fab:hover, .whatsapp-fab:focus-visible { background: #1da851; transform: translateY(-2px); box-shadow: 0 16px 38px -8px rgba(37, 211, 102, 0.6); } .whatsapp-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .whatsapp-fab { transition: background 0.3s; } .whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: none; } } /* ========================================================================= SCROLL TO TOP ========================================================================= */ .scroll-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--wp--custom--z-index--floating, 250); width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-primary); color: #fff; border: 0; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), visibility 0.3s, background 0.3s; box-shadow: 0 10px 30px -10px rgba(10, 61, 98, 0.5); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; } .scroll-top:hover { background: var(--color-primary-deep); } .scroll-top svg { width: 20px; height: 20px; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 900px) { .site-header .nav-desktop, .site-header__cta { display: none !important; } .nav-toggle { display: flex; } } @media (min-width: 901px) { .mobile-menu { display: none !important; } } @media (max-width: 781px) { .vc-split .wp-block-columns { gap: 2.5rem; } } body.menu-open { overflow: hidden; } /* ========================================================================= prefers-reduced-motion — todo estático y visible ========================================================================= */ /* ========================================================================= WOOCOMMERCE — look premium acorde al tema Paleta: navy #0A3D62, navy-deep #072A44, surface #F7F9FB, line #E2E8EF Verde #39B54A NUNCA como fondo con texto blanco ========================================================================= */ /* --- Reset base WC para integración con tema --- */ .woocommerce, .woocommerce-page { /* Evita sidebar WC flotante */ --wc-content-width: min(1200px, calc(100% - 2 * var(--container-x))); } /* Contenedor principal de tienda/producto centrado al ancho del tema */ .woocommerce .woocommerce-product-details__short-description, .woocommerce div.product, .woocommerce ul.products, .woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { max-width: var(--wc-content-width, 1200px); margin-inline: auto; } /* Breadcrumb "Peritajes" (Uncategorized renombrado) — quitar si distrae */ .woocommerce .woocommerce-breadcrumb { font-size: 0.8rem; color: var(--color-ink-soft, #5B6B78); margin-bottom: 1.5rem; } /* --- BOTONES WooCommerce --- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button, .woocommerce #respond input#submit, .woocommerce #place_order, .single_add_to_cart_button, .wc-block-components-button, .woocommerce button.button.alt, .woocommerce a.button.alt { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.95rem 2.1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; border-radius: 2px; border: 1.5px solid var(--color-primary); background-color: var(--color-primary); color: #fff !important; text-decoration: none; cursor: pointer; transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium); } .woocommerce a.button::before, .woocommerce button.button::before, .woocommerce input.button::before, .woocommerce .button::before, .woocommerce #place_order::before, .single_add_to_cart_button::before, .wc-block-components-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-primary-deep); transform: scaleX(0); transform-origin: right center; transition: transform 0.45s var(--ease-premium); } .woocommerce a.button:hover::before, .woocommerce button.button:hover::before, .woocommerce input.button:hover::before, .woocommerce .button:hover::before, .woocommerce #place_order:hover::before, .single_add_to_cart_button:hover::before, .wc-block-components-button:hover::before { transform: scaleX(1); transform-origin: left center; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover, .woocommerce #place_order:hover, .single_add_to_cart_button:hover, .wc-block-components-button:hover { color: #fff !important; border-color: var(--color-primary-deep); transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(10, 61, 98, 0.55); } /* Botón "Añadir al carrito" en listados — ghost */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button { background-color: transparent; color: var(--color-primary) !important; border-color: var(--color-primary); } .woocommerce ul.products li.product .button::before, .woocommerce ul.products li.product a.button::before { background-color: var(--color-primary); } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.button:hover { color: #fff !important; } /* --- GRID DE PRODUCTOS WC en página Servicios --- */ /* Ocultar botón add-to-cart del loop (se elimina por PHP, pero por si hubiera alguna ruta alternativa de renderizado). */ .woocommerce ul.products li.product .button.add_to_cart_button { display: none !important; } /* Tarjetas del loop: aspecto limpio y alineado al design system */ .woocommerce ul.products li.product { border: 1px solid var(--color-line, #E2E8EF); border-radius: var(--radius-lg, 12px); padding: 1.5rem 1.5rem 1.75rem; background: #fff; box-shadow: var(--shadow-card); transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); display: flex; flex-direction: column; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display, 'Cormorant', Georgia, serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; color: var(--color-ink); margin-bottom: 0.5rem; } .woocommerce ul.products li.product .price { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); letter-spacing: -0.02em; } /* --- PRECIO DE PRODUCTO --- */ .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce .price { font-family: var(--font-display, 'Cormorant', Georgia, serif); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; color: var(--color-primary); letter-spacing: -0.02em; } .woocommerce div.product p.price del, .woocommerce .price del { font-size: 1.1rem; color: var(--color-ink-soft, #5B6B78); opacity: 0.7; } /* --- INPUTS DE CHECKOUT / CARRITO --- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout input[type="password"], .woocommerce-checkout input[type="number"], .woocommerce-checkout textarea, .woocommerce-checkout select, .select2-container--default .select2-selection--single { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--color-line, #E2E8EF); border-radius: 8px; font: inherit; font-size: 0.95rem; color: var(--color-ink); background: #fff; transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium); appearance: none; -webkit-appearance: none; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce-checkout input:focus, .woocommerce-checkout textarea:focus, .woocommerce-checkout select:focus, .select2-container--default.select2-container--focus .select2-selection--single { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.12); } /* Select2 altura mínima */ .select2-container--default .select2-selection--single { height: auto; min-height: 48px; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0; color: var(--color-ink); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 0.75rem; } /* Labels checkout */ .woocommerce form .form-row label, .woocommerce-checkout label { font-weight: 600; font-size: 0.85rem; color: var(--color-ink); margin-bottom: 0.4rem; display: block; } /* --- TABLA ORDER REVIEW (Tu pedido) --- */ .woocommerce-checkout-review-order table, .woocommerce table.shop_table, .woocommerce table.woocommerce-checkout-payment table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .woocommerce-checkout-review-order table thead th, .woocommerce table.shop_table thead th { background: var(--color-surface, #F7F9FB); color: var(--color-ink); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1rem; border-bottom: 1.5px solid var(--color-line, #E2E8EF); text-align: left; } .woocommerce-checkout-review-order table td, .woocommerce table.shop_table td, .woocommerce-checkout-review-order table tfoot td, .woocommerce-checkout-review-order table tfoot th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line, #E2E8EF); color: var(--color-ink); vertical-align: middle; } .woocommerce table.shop_table tfoot tr:last-child td, .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce-checkout-review-order table tfoot tr.order-total td, .woocommerce-checkout-review-order table tfoot tr.order-total th { font-weight: 700; font-size: 1rem; color: var(--color-primary); border-top: 1.5px solid var(--color-line, #E2E8EF); border-bottom: none; } /* Tabla carrito */ .woocommerce table.cart td.actions, .woocommerce table.cart td { border-color: var(--color-line, #E2E8EF); } /* --- SELECTOR DE DEPÓSITO (plugin "advanced-partial-payment") --- * Estrategia: ocultar el .switch-wrapper del plugin (que usa position:absolute * en sus divs y causa layout roto) y reconstruir el toggle usando las labels * nativas del plugin (for="ID-pay-deposit" / for="ID-pay-full-amount"). * Los radio inputs siguen siendo funcionales — solo cambiamos el aspecto. */ .magepeople_mepp_single_deposit_form, .wc-deposits-options-form { margin: 1.25rem 0; } /* Ocultar radio inputs nativos (SR-only accesible) */ .toggle-switch-woocommerce-deposits input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Ocultar el .switch-wrapper del plugin — tiene layout roto (position:absolute en divs) */ .toggle-switch-woocommerce-deposits .switch-wrapper { display: none !important; } /* Mostrar las labels nativas del plugin (que el plugin oculta con display:none) */ .toggle-switch-woocommerce-deposits > label { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.6rem 1.2rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-soft); background: #fff; cursor: pointer; white-space: nowrap; transition: background 0.25s var(--ease-premium), color 0.25s var(--ease-premium); } /* Contenedor de labels como toggle */ .toggle-switch-woocommerce-deposits { display: flex !important; border: 1.5px solid var(--color-line); border-radius: 2px; overflow: hidden; background: #fff; box-shadow: none; width: 100%; } /* Divisor entre labels */ .toggle-switch-woocommerce-deposits > label:first-of-type { border-right: 1.5px solid var(--color-line); flex: 1; } .toggle-switch-woocommerce-deposits > label:last-of-type { flex: 1; } /* Estado activo — señal */ .toggle-switch-woocommerce-deposits:has(.pay-deposit:checked) > label[for$="pay-deposit"] { background: var(--color-primary); color: #fff; } .toggle-switch-woocommerce-deposits:has(.pay-deposit:checked) > label[for$="pay-full-amount"] { background: #fff; color: var(--color-ink-soft); } /* Estado activo — total */ .toggle-switch-woocommerce-deposits:has(.pay-full-amount:checked) > label[for$="pay-full-amount"] { background: var(--color-primary); color: #fff; } .toggle-switch-woocommerce-deposits:has(.pay-full-amount:checked) > label[for$="pay-deposit"] { background: #fff; color: var(--color-ink-soft); } /* Hover en opción inactiva */ .toggle-switch-woocommerce-deposits:has(.pay-deposit:checked) > label[for$="pay-full-amount"]:hover, .toggle-switch-woocommerce-deposits:has(.pay-full-amount:checked) > label[for$="pay-deposit"]:hover { background: var(--color-surface); } /* Móvil estrecho: las etiquetas ("Pagar señal (50%)" / "Pagar el total") son * largas; permitir que envuelvan en dos líneas evita el desbordamiento y el * solapamiento que se veía en pantallas pequeñas. */ @media (max-width: 480px) { .toggle-switch-woocommerce-deposits > label { padding: 0.55rem 0.45rem; font-size: 0.62rem; letter-spacing: 0.03em; white-space: normal; text-align: center; line-height: 1.25; min-width: 0; } } /* Notas y tipo de depósito */ .mepp-deposit-type-info { margin-top: 0.5rem; font-size: 0.8rem; color: var(--color-ink-soft, #5B6B78); } .mepp-deposit-type-label { font-weight: 600; } /* Nota de depósito */ .wc-deposits-notice { display: block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-ink-soft, #5B6B78); } /* Campo de código postal para el cálculo del desplazamiento (ficha producto) */ .vc-displacement-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 1.25rem 0; } .vc-displacement-field label { font-size: 0.9rem; } .vc-displacement-field input { width: 100%; max-width: 220px; padding: 0.7rem 0.85rem; border: 1.5px solid var(--color-line); border-radius: 6px; font: inherit; font-size: 0.95rem; } .vc-displacement-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.12); } .vc-displacement-field__help { font-size: 0.8rem; color: var(--color-ink-soft); } /* --- ENLACE "VER DETALLE" EN LOOP (reemplaza al botón add-to-cart) --- */ .vc-product-loop__detail-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); text-decoration: none; transition: gap 0.25s var(--ease-premium), color 0.25s var(--ease-premium); } .vc-product-loop__detail-link:hover { gap: 0.55rem; color: var(--color-primary-deep); } /* --- NOTIFICACIONES WC --- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top: 3px solid var(--color-primary); background: var(--color-surface, #F7F9FB); padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: 0 0 6px 6px; font-size: 0.9rem; } .woocommerce-error { border-top-color: #dc2626; } .woocommerce-info { border-top-color: var(--color-primary); } /* --- PÁGINA DE CONFIRMACIÓN --- */ .woocommerce-order-received h2, .woocommerce-thankyou-order-received { color: var(--color-primary); } /* --- CANTIDAD (input qty) --- */ .woocommerce .quantity input.qty { width: 72px; padding: 0.7rem 0.5rem; border: 1.5px solid var(--color-line, #E2E8EF); border-radius: 6px; text-align: center; font: inherit; font-size: 0.95rem; } .woocommerce .quantity input.qty:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.12); } /* --- SINGLE PRODUCT — layout 2 columnas ≥980px (block theme FSE) --- * En block themes, WC usa wp-block-columns (flex) para galería + summary. * Corregimos el ancho del contenedor y la columna del summary sticky. */ /* Expandir el main constrained al ancho completo en single product */ .single-product .woocommerce-content-wrapper main.is-layout-constrained, .single-product .woocommerce-content-wrapper main { max-width: none; padding-inline: 0; } /* Dar al wrapper y al main el ancho correcto del contenedor */ .single-product .woocommerce-content-wrapper { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--container-x, 1.25rem); } /* El wp-block-columns de WC (galería + summary) — 2 columnas a ≥980px */ @media (min-width: 980px) { .single-product .wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery) { display: flex; flex-wrap: nowrap; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } /* Columna galería: 55% */ .single-product .wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery) .wp-block-column:first-child { flex: 0 0 55%; max-width: 55%; } /* Columna summary: resto, sticky */ .single-product .wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery) .wp-block-column:last-child { flex: 1 1 0; min-width: 0; position: sticky; top: 104px; align-self: start; } } /* --- PRODUCT SECTION PADDING --- */ .woocommerce div.product { padding-block: clamp(2.5rem, 6vw, 5rem); padding-inline: var(--container-x, 1.25rem); } /* --- GALERÍA — imagen protagonista --- */ .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image, .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__wrapper, .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image { background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; } .woocommerce-product-gallery__image img, .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } /* --- EYEBROW CATEGORÍA — verde, sobre el título --- * En block themes el eyebrow PHP se inyecta después del precio. * Usamos CSS order para subirlo antes del H1. * La columna summary es un flex-column (is-layout-flow). */ .wp-block-column.is-layout-flow:has(.vc-product-eyebrow) { display: flex; flex-direction: column; } .wp-block-column.is-layout-flow .vc-product-eyebrow { order: -2; /* antes del H1 (order 0) y del precio (order 0) */ font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-ink); margin-bottom: 0.4rem; } .wp-block-column.is-layout-flow .wp-block-post-title { order: -1; } /* Ocultar el bloque meta "Category: Peritajes" (wp-block-woocommerce-product-meta) */ .wp-block-woocommerce-product-meta { display: none; } /* --- BUY-CARD — wrap visual toggle + importes + CTA --- */ .single-product .vc-buy-card { margin-top: 2rem; padding: 1.5rem 1.5rem 1.75rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); display: block; /* no flex — permite que el toggle respire */ } /* Toggle en bloque propio — contiene el switch al 100% del grid cell */ .single-product .vc-buy-card .toggle-switch-woocommerce-deposits, .single-product .vc-buy-card .wc-deposits-options-form, .single-product .vc-buy-card .magepeople_mepp_single_deposit_form { display: block; margin-bottom: 0; max-width: 100%; } /* form.cart — grid 2 columnas: toggle full-width arriba, qty + CTA en segunda fila */ .single-product form.cart { display: grid; grid-template-columns: 72px 1fr; gap: 0.75rem; margin-top: 1rem; } /* deposit-option y toggle-form: full-width (toda la fila del grid) */ .single-product form.cart .deposit-option, .single-product form.cart .magepeople_mepp_single_deposit_form, .single-product form.cart .wc-deposits-options-form { grid-column: 1 / -1; } /* El propio toggle (.toggle-switch-woocommerce-deposits) está dentro del form — necesita también span full-width */ .single-product form.cart .toggle-switch-woocommerce-deposits { grid-column: 1 / -1; } /* qty: columna 1, button: columna 2 */ .single-product form.cart .quantity { grid-column: 1; } .single-product form.cart .single_add_to_cart_button { grid-column: 2; min-height: 52px; } .single-product .quantity input.qty { width: 64px; } /* --- FILA "A PAGAR AHORA" — serif navy, jerarquía --- */ .deposit-option, .payment-amount-info { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); } .deposit-option .woocommerce-Price-amount, .payment-amount-info .woocommerce-Price-amount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-primary); letter-spacing: -0.01em; } /* --- RELATED PRODUCTS — grid con aire, tipografía Cormorant --- */ .woocommerce div.product .related.products, .wp-block-woocommerce-product-collection { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--color-line); } .woocommerce div.product .related.products > h2, .wp-block-woocommerce-product-collection .wp-block-heading { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 500; color: var(--color-primary); margin-bottom: 2rem; } .woocommerce div.product .related.products ul.products, .wp-block-woocommerce-product-collection ul.wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.75rem; } .woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title, .wp-block-woocommerce-product-collection .woocommerce-loop-product__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--color-ink); } .woocommerce div.product .related.products ul.products li.product .price, .wp-block-woocommerce-product-collection .price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--color-primary); } /* --- CHECKOUT PADDING --- */ .woocommerce-checkout .woocommerce, .woocommerce-cart .woocommerce { padding-block: clamp(2rem, 5vw, 4rem); padding-inline: var(--container-x, 1.25rem); } /* ========================================================================= CARRITO — H1 alineado al contenedor 1200px ========================================================================= */ /* El H1 "Carrito" vive en wp:post-title (layout constrained WP). Lo limitamos al mismo ancho máximo del contenido WC. */ .woocommerce-cart .entry-title, .woocommerce-cart h1.page-title, .woocommerce-cart .wp-block-post-title { max-width: min(1200px, calc(100% - 2 * var(--container-x, 1.25rem))); margin-inline: auto; padding-inline: var(--container-x, 1.25rem); } /* ========================================================================= CARRITO — tabla editorial ========================================================================= */ /* Tabla sin bordes de plugin, solo líneas finas */ .woocommerce-cart table.cart { border: none; border-collapse: collapse; } .woocommerce-cart table.cart thead th { background: transparent; border-bottom: 1.5px solid var(--color-line); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft); padding: 0 0 0.85rem; text-align: left; } .woocommerce-cart table.cart tbody td { border-top: 1px solid var(--color-line); padding: 1.25rem 0; vertical-align: middle; } /* Miniatura con radius */ .woocommerce-cart table.cart img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-md); } /* Nombre del producto en Cormorant */ .woocommerce-cart .product-name a { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-ink); text-decoration: none; } .woocommerce-cart .product-name a:hover { color: var(--color-primary); } /* Botón eliminar — discreto navy, sin rojo */ .woocommerce-cart td.product-remove a.remove { color: var(--color-ink-soft) !important; font-size: 1.1rem; opacity: 0.6; background: none !important; } .woocommerce-cart td.product-remove a.remove:hover { color: var(--color-primary) !important; background: none !important; opacity: 1; } /* Botones cupón/actualizar = ghost (solo "Finalizar compra" lleva navy sólido) */ .woocommerce-cart .actions .button[name="apply_coupon"], .woocommerce-cart .actions .button[name="update_cart"] { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-line); } .woocommerce-cart .actions .button[name="apply_coupon"]::before, .woocommerce-cart .actions .button[name="update_cart"]::before { display: none; } .woocommerce-cart .actions .button[name="apply_coupon"]:hover, .woocommerce-cart .actions .button[name="update_cart"]:hover { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); transform: none; box-shadow: none; } /* Totales — surface card */ .cart_totals { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.75rem; } /* Total en Cormorant navy */ .cart_totals .order-total .amount { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; color: var(--color-primary); } /* CTA "Finalizar compra" full-width */ .cart_totals .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 52px; margin-top: 1.25rem; } /* --- Caja de totales: filas label/valor limpias --- */ .cart_totals h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin: 0 0 1rem; color: var(--color-ink); } .cart_totals table.shop_table { border: none; margin: 0; } /* Reset de cualquier td/th heredado y layout en flex por fila */ .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--color-line); } .cart_totals table.shop_table tr:first-child { border-top: none; } .cart_totals table.shop_table th, .cart_totals table.shop_table td { border: none; padding: 0; background: none; font-size: 0.95rem; } .cart_totals table.shop_table th { font-weight: 600; color: var(--color-ink-soft); text-align: left; flex: 1 1 auto; } .cart_totals table.shop_table td { text-align: right; color: var(--color-ink); white-space: nowrap; flex: 0 0 auto; } /* Fila Total — separador más marcado, etiqueta en tinta plena */ .cart_totals tr.order-total { border-top: 1.5px solid var(--color-line) !important; margin-top: 0.2rem; padding-top: 1rem !important; align-items: center; } .cart_totals tr.order-total th { color: var(--color-ink); font-weight: 700; } /* (el .amount del total ya es Cormorant navy, definido arriba) */ .cart_totals .order-total .amount { line-height: 1; } /* ========================================================================= CARRITO — móvil: ítem como tarjeta legible, sin desbordes ========================================================================= */ @media (max-width: 768px) { /* Ocultar cabecera de columnas (se usan etiquetas data-title) */ .woocommerce-cart table.cart thead { display: none; } .woocommerce-cart table.cart, .woocommerce-cart table.cart tbody, .woocommerce-cart table.cart tr { display: block; width: 100%; } /* Cada fila de producto = tarjeta */ .woocommerce-cart table.cart tr.cart_item { border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1rem; position: relative; } /* Celdas: fila etiqueta/valor */ .woocommerce-cart table.cart tr.cart_item td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border: none; border-top: 1px solid var(--color-line); text-align: right; overflow-wrap: anywhere; } .woocommerce-cart table.cart tr.cart_item td::before { content: attr(data-title); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--color-ink-soft); text-align: left; flex: 0 0 auto; } /* Miniatura: fila propia, sin etiqueta, centrada-izquierda */ .woocommerce-cart table.cart tr.cart_item td.product-thumbnail { border-top: none; padding-top: 0; justify-content: flex-start; } .woocommerce-cart table.cart tr.cart_item td.product-thumbnail::before { display: none; } .woocommerce-cart table.cart img { width: 72px; height: 72px; } /* Nombre + meta del producto: a ancho completo, alineado a la izquierda */ .woocommerce-cart table.cart tr.cart_item td.product-name { flex-wrap: wrap; text-align: left; border-top: none; padding-top: 0; } .woocommerce-cart table.cart tr.cart_item td.product-name::before { display: none; } .woocommerce-cart .product-name a { font-size: 1.1rem; } .woocommerce-cart td.product-name .wc-item-meta, .woocommerce-cart td.product-name dl.variation, .woocommerce-cart td.product-name .variation { width: 100%; margin: 0.35rem 0 0; text-align: left; font-size: 0.82rem; color: var(--color-ink-soft); overflow-wrap: anywhere; } /* Botón eliminar: esquina superior derecha de la tarjeta */ .woocommerce-cart table.cart tr.cart_item td.product-remove { position: absolute; top: 0.6rem; right: 0.8rem; padding: 0; border: none; } .woocommerce-cart table.cart tr.cart_item td.product-remove::before { display: none; } /* Acciones (cupón / actualizar): apiladas full-width */ .woocommerce-cart table.cart td.actions { display: block; padding: 0; } .woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .woocommerce-cart table.cart td.actions .coupon input { flex: 1 1 auto; min-width: 0; } .woocommerce-cart .actions .button[name="update_cart"] { width: 100%; } /* Totales en móvil: WC oculta el y usa td::before como etiqueta. Hacemos del td un flex para separar etiqueta (izda) y valor (dcha). */ .cart_totals table.shop_table tr { display: block; padding: 0.75rem 0; } .cart_totals table.shop_table td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; white-space: normal; text-align: right; } .cart_totals table.shop_table td::before { font-weight: 600; color: var(--color-ink-soft); text-align: left; flex: 1 1 auto; } } /* ========================================================================= CHECKOUT — refinos de coherencia ========================================================================= */ /* Total del pedido en Cormorant navy */ .woocommerce-checkout-review-order tfoot tr.order-total td, .woocommerce-checkout-review-order tfoot tr.order-total th { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-primary); } /* Resumen del pedido sticky en desktop — surface card */ @media (min-width: 980px) { .woocommerce-checkout-review-order { position: sticky; top: 104px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.5rem; } } /* Block checkout — mismo patrón para el resumen de orden */ @media (min-width: 980px) { .wp-block-woocommerce-checkout-order-summary-block { position: sticky; top: 104px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 1.5rem; } } /* Total y "A pagar ahora" en block checkout */ .wc-block-components-totals-item:last-child { font-family: var(--font-display) !important; font-size: 1.4rem !important; font-weight: 600 !important; color: var(--color-primary) !important; } /* Títulos secciones checkout */ .woocommerce-checkout h3, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-checkout #order_review_heading { font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--color-line, #E2E8EF); } /* --- RESPONSIVE --- */ @media (max-width: 768px) { .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } } /* ========================================================================= WOOCOMMERCE BLOCK CHECKOUT — checkout moderno (wp-block-woocommerce-*) Aplica cuando WC usa el checkout de bloques (página /checkout/ con block) ========================================================================= */ /* Restaurar header completo del tema en checkout de bloques */ .wc-block-checkout__main, .wp-block-woocommerce-checkout { max-width: min(1200px, calc(100% - 2 * var(--container-x, 1.25rem))); margin-inline: auto; padding-block: clamp(2rem, 5vw, 4rem); } /* Headings de sección del block checkout */ .wc-block-components-title, .wc-block-checkout__contact-fields > h2, .wc-block-checkout__billing-fields > h2, .wc-block-checkout__shipping-fields > h2, .wc-block-checkout__additional-fields > h2, .wc-block-checkout__payment-method > h2, .wc-block-checkout__order-notes > h2, h2.wc-block-checkout__contact-fields-title, .wc-block-components-checkout-step__title { font-family: var(--font-body); font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--color-line, #E2E8EF); } /* Inputs del block checkout */ .wc-block-components-text-input input, .wc-block-components-country-input input, .wc-block-components-state-input input, .wc-block-components-select select, .wc-block-components-textarea textarea { padding: 0.85rem 1rem !important; border: 1.5px solid var(--color-line, #E2E8EF) !important; border-radius: 8px !important; font: inherit !important; font-size: 0.95rem !important; color: var(--color-ink) !important; background: #fff !important; transition: border-color 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium) !important; } .wc-block-components-text-input input:focus, .wc-block-components-country-input input:focus, .wc-block-components-state-input input:focus, .wc-block-components-select select:focus, .wc-block-components-textarea textarea:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(10, 61, 98, 0.12) !important; } /* Labels del block checkout */ .wc-block-components-text-input label, .wc-block-components-country-input label, .wc-block-components-state-input label, .wc-block-components-select label, .wc-block-components-textarea label { font-weight: 600 !important; font-size: 0.85rem !important; color: var(--color-ink) !important; } /* Tabla de pedido (order summary) en block checkout */ .wc-block-components-order-summary, .wc-block-order-summary-totals { border: 1px solid var(--color-line, #E2E8EF); border-radius: 8px; overflow: hidden; } .wc-block-components-order-summary-item { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line, #E2E8EF); font-size: 0.9rem; } .wc-block-components-totals-item { padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-line, #E2E8EF); font-size: 0.9rem; color: var(--color-ink); } .wc-block-components-totals-item:last-child { font-weight: 700; font-size: 1rem; color: var(--color-primary); border-bottom: none; } /* Contenedor del pago */ .wc-block-components-payment-methods { border: 1.5px solid var(--color-line, #E2E8EF); border-radius: 8px; overflow: hidden; background: #fff; } .wc-block-components-payment-method-label { font-weight: 600; font-size: 0.9rem; color: var(--color-ink); } /* Botón "Realizar el pedido" del block checkout */ .wc-block-components-checkout-place-order-button, .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-place-order-button { position: relative; isolation: isolate; overflow: hidden; display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 1rem 2rem !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 0.72rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; line-height: 1 !important; border-radius: 2px !important; border: 1.5px solid var(--color-primary) !important; background-color: var(--color-primary) !important; color: #fff !important; cursor: pointer !important; transition: border-color 0.4s var(--ease-premium), transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium) !important; } .wc-block-components-checkout-place-order-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-primary-deep); transform: scaleX(0); transform-origin: right center; transition: transform 0.45s var(--ease-premium); } .wc-block-components-checkout-place-order-button:hover::before { transform: scaleX(1); transform-origin: left center; } .wc-block-components-checkout-place-order-button:hover { color: #fff !important; border-color: var(--color-primary-deep) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px -10px rgba(10, 61, 98, 0.55) !important; } /* Ocultar botones "Añadir al carrito" de bloques WC en "Productos relacionados" y en cualquier loop de bloques (wc-block). Las tarjetas del listado solo deben mostrar el enlace "Ver detalle →" del loop PHP. */ .wc-block-grid__product-add-to-cart, .wp-block-button.wc-block-components-product-button, .wc-block-components-product-button { display: none !important; } /* Mensaje de añadido al carrito en block checkout — estilo del tema */ .wc-block-store-notice, .woocommerce-store-notice { border-left: 3px solid var(--color-primary); background: var(--color-surface, #F7F9FB); padding: 0.75rem 1.25rem; border-radius: 0 6px 6px 0; font-size: 0.9rem; } /* Responsive block checkout */ @media (max-width: 768px) { .wp-block-woocommerce-checkout { padding-inline: var(--container-x, 1rem); } } /* ========================================================================= OCULTAR EXPRESS CHECKOUT ELEMENTS (Google Pay, Apple Pay, Amazon Pay, Link) en página de detalle de producto y checkout. El plugin Stripe v10+ los inyecta vía iframe incluso cuando están desactivados en settings, porque respetan el PMC de la cuenta de Stripe. Ocultamos los contenedores iframe y wrappers express. ========================================================================= */ #wc-stripe-express-checkout-element, #wc-stripe-payment-request-wrapper, .wcpay-express-checkout-wrapper, .wc-stripe-payment-request-wrapper, #wc-stripe-payment-request-button-separator, .wc-stripe-payment-request-section { display: none !important; } /* Amazon Pay wrapper específico del plugin WC */ .wc-gateway-stripe-amazon-pay, #payment .payment_method_amazon_pay, #payment .payment_method_stripe_amazon_pay, #payment .payment_method_stripe_alipay, #payment .payment_method_stripe_klarna, #payment .payment_method_stripe_bancontact, #payment .payment_method_stripe_eps, #payment .payment_method_stripe_giropay, #payment .payment_method_stripe_p24, #payment .payment_method_stripe_sepa, #payment .payment_method_stripe_sofort, #payment .payment_method_stripe_boleto, #payment .payment_method_stripe_oxxo, #payment .payment_method_stripe_link, #payment .payment_method_stripe_affirm, #payment .payment_method_stripe_afterpay_clearpay { display: none !important; } /* ========================================================================= prefers-reduced-motion — todo estático y visible ========================================================================= */ @media (prefers-reduced-motion: reduce) { /* Estado final instantáneo para todas las animaciones CSS */ body { animation: none; } .vc-hero__content > *, [data-reveal], [data-reveal-stagger] > *, [data-reveal="sm"], [data-reveal="lg"], .vc-split [data-reveal-stagger] > li > span:first-child { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .vc-hero__scroll-line::after { animation: none; } .vc-service-card:hover img { transform: none; } /* Plan cards — sin translate permanente ni hover */ .vc-plan-card:hover, .vc-plan-card--featured, .vc-plan-card--featured:hover { transform: none !important; } /* Badge sin pop, visible directamente */ .vc-plan-card__badge, .js-reveal .vc-plan-card--featured .vc-plan-card__badge, .js-reveal .vc-plan-card--featured.is-revealed .vc-plan-card__badge { transform: translateX(-50%) scale(1) !important; transition: none !important; } /* Línea del proceso visible completa */ [data-process-line]::before { transform: scaleY(1) !important; animation: none !important; } /* Sin hover lift en botones */ .wp-block-button__link:hover { transform: none !important; box-shadow: none !important; } } /* ========================================================================= NAV DROPDOWN — "Servicios" con submenú (Peritaje / Informes / Asesoría) ========================================================================= */ .nav-has-submenu { position: relative; } .nav-has-submenu > a { display: inline-flex; align-items: center; gap: 0.35rem; } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; transition: transform 0.25s var(--ease-premium); } .nav-has-submenu:hover .nav-caret, .nav-has-submenu:focus-within .nav-caret { transform: rotate(180deg); } .nav-submenu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 200px; list-style: none; margin: 0; padding: 0.4rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: 0 18px 40px -20px rgba(10, 61, 98, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-premium), transform 0.25s var(--ease-premium); z-index: 60; } /* Puente invisible que cubre el hueco link↔tarjeta para que el hover no se corte */ .nav-submenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px; background: transparent; } /* Amplía el área de hover del propio item hacia abajo */ .nav-has-submenu > a { padding-bottom: 0.55rem; } .nav-has-submenu:hover .nav-submenu, .nav-has-submenu:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-submenu li { margin: 0; } .nav-submenu a { display: block; padding: 0.6rem 0.9rem; border-radius: 6px; color: var(--color-ink); text-decoration: none; letter-spacing: 0.04em; text-transform: none; font-size: 0.8rem; transition: background-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium); } .nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--color-surface); color: var(--color-primary); } /* Offset de scroll para las anclas (header sticky ~88px) */ .vc-anchor { scroll-margin-top: 104px; } /* Submenú dentro del menú móvil — indentado y más pequeño */ .mobile-menu__sub { padding-left: 1.25rem !important; font-size: 0.95rem !important; opacity: 0.85; } .mobile-menu__sub::before { content: "— "; opacity: 0.5; } /* Fix: botones ghost de cupón/actualizar carrito — texto navy visible (no blanco) */ .woocommerce-cart .actions .button[name="apply_coupon"], .woocommerce-cart .actions .button[name="update_cart"], .woocommerce-cart .coupon .button[name="apply_coupon"], .woocommerce-cart form.woocommerce-cart-form .button[name="update_cart"] { color: var(--color-primary) !important; } /* ========================================================================= HERO — micro-labels bajo CTAs (dots verdes gráficos, texto muted) Verde #39B54A SOLO como ::before gráfico — NUNCA color en texto ========================================================================= */ .vc-hero__labels { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; } .vc-hero__labels li { font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.45rem; } .vc-hero__labels li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #39B54A; /* gráfico, no texto */ } /* ========================================================================= TRUST STRIP — banda blanca 4 ítems con borde inferior ========================================================================= */ .vc-trust { background: #fff; border-bottom: 1px solid var(--color-line); padding-block: clamp(1.5rem, 3vw, 2.25rem); padding-inline: var(--container-x); } .vc-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2rem; max-width: 1200px; margin-inline: auto; } @media (max-width: 768px) { .vc-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 480px) { .vc-trust__grid { grid-template-columns: 1fr; } } .vc-trust__item { display: flex; flex-direction: column; gap: 0.25rem; } .vc-trust__icon { color: var(--color-primary); margin-bottom: 0.35rem; } .vc-trust__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--color-primary); margin: 0; line-height: 1.3; } .vc-trust__desc { font-size: 0.82rem; color: var(--color-ink-soft); margin: 0; line-height: 1.4; } /* ========================================================================= QUÉ REVISAMOS — grid de 4 cards de contenido ========================================================================= */ .vc-check-cards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } @media (max-width: 640px) { .vc-check-cards__grid { grid-template-columns: 1fr; } } .vc-check-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.75rem; transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium); } .vc-check-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .vc-check-card__icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--color-primary); flex-shrink: 0; } .vc-check-card__icon svg { width: 28px; height: 28px; } .vc-check-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-primary); margin: 0; } .vc-check-card__lead { font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.5; margin: 0; } .vc-check-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.25rem; } .vc-check-card__list li { font-size: 0.875rem; color: var(--color-ink); padding-left: 1.35rem; position: relative; line-height: 1.4; } /* Check verde SOLO como gráfico (no como texto) — contraste no aplica */ .vc-check-card__list li::before { content: "✓"; position: absolute; left: 0; color: #39B54A; /* gráfico decorativo */ font-weight: 700; font-size: 0.8rem; line-height: 1.55; } /* ========================================================================= QUÉ REVISAMOS — imagen de banda editorial encima del grid de cards ========================================================================= */ .vc-check-band-img { width: 100%; border-radius: var(--radius-lg); /* 16px */ margin-bottom: 2.5rem; max-height: 360px; object-fit: cover; object-position: center 40%; display: block; } /* Tratamiento uniforme: fotos de contenido interior con radius y overlay navy sutil */ .vc-split__img, .vc-check-band-img { border-radius: var(--radius-lg); } /* Overlay navy 8% multiply sobre fotos de contenido (no hero, no perito que ya tiene navy de sección) */ .vc-split__img { position: relative; } /* ========================================================================= SPLIT INVERTIDO — imagen a la derecha en desktop ========================================================================= */ @media (min-width: 782px) { .vc-split--reverse .wp-block-column:first-child { order: 1; } .vc-split--reverse .wp-block-column:last-child { order: -1; } } /* Foto arriba en móvil (orden natural) — no override needed */ /* ========================================================================= CHIPS — pills surface + borde, texto navy ========================================================================= */ .vc-chips { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .vc-chips li { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); background: var(--color-surface); border: 1.5px solid var(--color-line); border-radius: var(--radius-full); padding: 0.35rem 0.9rem; white-space: nowrap; } /* ========================================================================= SECCIÓN PERITO + BANDA INFORME — fondo navy gradiente ========================================================================= */ /* Wrapper que engloba el split Perito + Informe en navy */ .vc-perito-navy { background: linear-gradient(135deg, var(--color-primary-deep) 0%, var(--color-primary) 100%); padding-bottom: clamp(2rem, 4vw, 3rem); } /* Textos del perito sobre navy */ .vc-perito-navy h2, .vc-perito-navy .wp-block-heading { color: #ffffff; } .vc-perito-navy p, .vc-perito-navy .has-muted-color { color: rgba(255, 255, 255, 0.88) !important; } /* Eyebrow sobre navy: chip blanco traslúcido (reutiliza patrón del hero) */ .vc-perito-navy .is-style-eyebrow { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.16); } .vc-perito-navy .is-style-eyebrow::before { background: #39B54A; /* dot verde lima — gráfico sobre navy, contraste OK */ } /* Chips de credencial sobre navy */ .vc-perito-navy .vc-chips li { background: transparent; border-color: #39B54A; color: #ffffff; } /* Enlace "Conoce al perito →" sobre navy */ .vc-perito-navy a[href*="sobre-nosotros"] { color: #ffffff; } .vc-perito-navy a[href*="sobre-nosotros"] span { color: #39B54A; /* flecha verde lima — gráfico */ } /* Foto del perito con radius */ .vc-perito-navy .vc-split__img { border-radius: 16px; } /* ========================================================================= BANDA INFORME — fusionada en navy (dentro de .vc-perito-navy) ========================================================================= */ .vc-informe { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: clamp(2rem, 4vw, 3rem); padding-inline: var(--container-x); } .vc-informe__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2rem; max-width: 1200px; margin-inline: auto; } @media (max-width: 768px) { .vc-informe__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 480px) { .vc-informe__grid { grid-template-columns: 1fr; } } .vc-informe__item { display: flex; flex-direction: column; gap: 0.3rem; } .vc-informe__item svg { color: #39B54A; /* verde lima — gráfico sobre navy */ margin-bottom: 0.35rem; flex-shrink: 0; } .vc-informe__label { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.3; } .vc-informe__desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); margin: 0; line-height: 1.4; } /* ========================================================================= FAQ — acordeón details/summary nativo, columna 760px ========================================================================= */ .vc-faq { padding-inline: var(--container-x); } .vc-faq__inner { max-width: 760px; margin-inline: auto; } .vc-faq__item { border-bottom: 1px solid var(--color-line); } .vc-faq__item:first-child { border-top: 1px solid var(--color-line); } .vc-faq__question { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--color-ink); cursor: pointer; user-select: none; min-height: 44px; /* target ≥44px */ } /* Quitar el triángulo nativo en todos los browsers */ .vc-faq__question::-webkit-details-marker, .vc-faq__question::marker { display: none; } /* Chevron SVG navy */ .vc-faq__question::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3D62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transition: transform 0.3s var(--ease-premium); } .vc-faq__item[open] .vc-faq__question::after { transform: rotate(180deg); } .vc-faq__question:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } .vc-faq__answer { padding-bottom: 1.1rem; } .vc-faq__answer p { font-size: 0.95rem; color: var(--color-ink-soft); line-height: 1.7; margin: 0; } /* prefers-reduced-motion — chevron sin transición */ @media (prefers-reduced-motion: reduce) { .vc-faq__question::after { transition: none; } .vc-check-card:hover { transform: none; box-shadow: var(--shadow-card); } /* Nuevos hovers P2 — sin lift */ .vc-plan-card:hover, .vc-check-card:hover { transform: none !important; } /* Números de paso sin pop */ [data-process-line] li > span:first-child { transform: none !important; } } /* ========================================================================= FOOTER — logo (blanco sobre navy) ========================================================================= */ .site-footer__logo-link { display:inline-block; margin-bottom:1rem; } .site-footer__logo { width:160px; height:auto; } /* ========================================================================= POR QUÉ CONTRATAR — sección conversión, tipografía a varias escalas ========================================================================= */ .vc-why { background:var(--color-surface); padding-block:var(--wp--preset--spacing--70); } .vc-why__inner { max-width:840px; margin-inline:auto; padding-inline:var(--container-x); text-align:center; } .vc-why__headline { font-family:var(--wp--preset--font-family--display, "Cormorant"); font-weight:600; color:var(--color-primary); font-size:clamp(2.25rem, 5.5vw, 4rem); line-height:1.04; letter-spacing:-0.01em; margin:0.75rem 0 1.25rem; } .vc-why__headline em { font-style:italic; color:var(--color-accent-ink); } .vc-why__lead { max-width:640px; margin:0 auto 2.5rem; font-size:1.15rem; line-height:1.6; color:var(--color-ink-soft); } .vc-why__lead strong { color:var(--color-ink); font-weight:600; } .vc-why__contrast { display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,2.75rem); margin-bottom:2rem; flex-wrap:wrap; } .vc-why__fig { display:flex; flex-direction:column; gap:0.35rem; max-width:230px; } .vc-why__num { font-family:var(--wp--preset--font-family--display, "Cormorant"); font-weight:600; font-size:clamp(1.75rem, 4vw, 2.75rem); line-height:1; color:var(--color-primary); letter-spacing:-0.01em; } .vc-why__fig--risk .vc-why__num { color:var(--color-ink-soft); opacity:0.75; } .vc-why__cap { font-size:0.82rem; line-height:1.4; color:var(--color-ink-soft); } .vc-why__vs { font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-ink-soft); flex-shrink:0; } .vc-why__kicker { font-size:1.05rem; color:var(--color-primary); margin:0 auto 1.75rem; max-width:560px; } .vc-why__kicker strong { font-weight:600; } @media (max-width:600px){ .vc-why__contrast { flex-direction:column; gap:1.25rem; } .vc-why__fig { max-width:none; } } /* ========================================================================= BLOG — NOTICIAS Componentes: vc-news-grid, vc-news-card, vc-news-hero, vc-pagination, vc-article__*, vc-prose, vc-article-cta, vc-related Regla de color: lima #39B54A SOLO gráfico/decorativo verde-ink #15803D para texto (contraste AA 5:1 sobre blanco) ========================================================================= */ /* ------------------------------------------------------------------------- Grid de tarjetas — 3 columnas → 2 → 1 ------------------------------------------------------------------------- */ .vc-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; list-style: none; padding: 0; margin: 0; } @media (max-width: 960px) { .vc-news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .vc-news-grid { grid-template-columns: 1fr; gap: 1.5rem; } } /* ------------------------------------------------------------------------- Tarjeta de noticia — .vc-news-card ------------------------------------------------------------------------- */ .vc-news-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-line, #E2E8EF); transition: box-shadow 0.3s var(--ease-premium, cubic-bezier(0.25,0.46,0.45,0.94)); } .vc-news-card:hover { box-shadow: 0 12px 40px -12px rgba(10, 61, 98, 0.18); } /* Imagen destacada */ .vc-news-card__media, .vc-news-card .wp-block-post-featured-image { display: block; width: 100%; overflow: hidden; border-radius: 16px 16px 0 0; flex-shrink: 0; } .vc-news-card__media img, .vc-news-card .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px 16px 0 0; transition: transform 0.55s var(--ease-premium, cubic-bezier(0.25,0.46,0.45,0.94)); } @media (prefers-reduced-motion: no-preference) { .vc-news-card:hover .vc-news-card__media img, .vc-news-card:hover .wp-block-post-featured-image img { transform: scale(1.02); } } /* Contenido de la tarjeta — padding */ .vc-news-card__meta, .vc-news-card .vc-news-card__meta, .vc-news-card .wp-block-post-terms, .vc-news-card .wp-block-post-date, .vc-news-card .wp-block-post-title, .vc-news-card .wp-block-post-excerpt, .vc-news-card .wp-block-read-more, .vc-news-card__cat, .vc-news-card__date, .vc-news-card__title, .vc-news-card__excerpt, .vc-news-card__more { padding-inline: 1.25rem; } .vc-news-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 0; } /* Categoría — verde-ink, nunca lima (#39B54A) sobre blanco */ .vc-news-card__cat, .vc-news-card .wp-block-post-terms { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #15803D; /* verde-ink — contraste 5:1 AA */ text-decoration: none; } .vc-news-card__cat a, .vc-news-card .wp-block-post-terms a { color: #15803D; text-decoration: none; } .vc-news-card__cat a:hover, .vc-news-card .wp-block-post-terms a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Fecha */ .vc-news-card__date, .vc-news-card .wp-block-post-date { font-size: 0.78rem; color: var(--color-ink-soft, #5B6B78); text-decoration: none; } /* Título */ .vc-news-card__title, .vc-news-card .wp-block-post-title { font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 600; line-height: 1.2; color: var(--color-primary, #0A3D62); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vc-news-card__title a, .vc-news-card .wp-block-post-title a { color: var(--color-primary, #0A3D62); text-decoration: none; } .vc-news-card__title a:hover, .vc-news-card .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Extracto */ .vc-news-card__excerpt, .vc-news-card .wp-block-post-excerpt { font-size: 0.9rem; line-height: 1.55; color: var(--color-ink-soft, #5B6B78); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vc-news-card .wp-block-post-excerpt p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Enlace "Leer más →" */ .vc-news-card__more, .vc-news-card .wp-block-read-more { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary, #0A3D62); text-decoration: none; padding-bottom: 1.25rem; margin-top: auto; transition: gap 0.25s var(--ease-premium); } .vc-news-card__more:hover, .vc-news-card .wp-block-read-more:hover { gap: 0.55rem; } /* Cover link — make entire card clickable */ .vc-news-card { isolation: isolate; } .vc-news-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Subordinar otros enlaces al cover-link */ .vc-news-card .wp-block-post-terms a, .vc-news-card .wp-block-read-more, .vc-news-card .wp-block-post-date a { position: relative; z-index: 2; } /* ------------------------------------------------------------------------- Tarjeta hero horizontal (primer post destacado) — 58/42 → stack móvil Si en el futuro se añade la tarjeta horizontal, se usa esta clase ------------------------------------------------------------------------- */ .vc-news-hero { display: grid; grid-template-columns: 58fr 42fr; gap: 2rem; align-items: center; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-line, #E2E8EF); margin-bottom: 2rem; } .vc-news-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; } .vc-news-hero__body { padding: 2rem 2rem 2rem 0; display: flex; flex-direction: column; gap: 0.75rem; } @media (max-width: 768px) { .vc-news-hero { grid-template-columns: 1fr; } .vc-news-hero__body { padding: 1.5rem; } } /* ------------------------------------------------------------------------- Paginación — .vc-pagination ------------------------------------------------------------------------- */ .vc-pagination, .wp-block-query-pagination.vc-pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; } .vc-pagination .page-numbers, .vc-pagination .wp-block-query-pagination-numbers a, .vc-pagination .wp-block-query-pagination-numbers span, .vc-pagination .wp-block-query-pagination-previous a, .vc-pagination .wp-block-query-pagination-next a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.35rem 0.75rem; border-radius: 2px; font-size: 0.85rem; font-weight: 500; color: var(--color-primary, #0A3D62); text-decoration: none; border: 1px solid var(--color-line, #E2E8EF); transition: background 0.25s var(--ease-premium), color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium); } .vc-pagination .page-numbers:hover, .vc-pagination .wp-block-query-pagination-numbers a:hover, .vc-pagination .wp-block-query-pagination-previous a:hover, .vc-pagination .wp-block-query-pagination-next a:hover { background: var(--color-surface, #F5F7FA); border-color: var(--color-primary, #0A3D62); } /* Activo — pill navy */ .vc-pagination .page-numbers.current, .vc-pagination .wp-block-query-pagination-numbers span.current { background: var(--color-primary, #0A3D62); color: #fff; border-color: var(--color-primary, #0A3D62); } /* Flechas anterior/siguiente con tinte lima SOLO como acento gráfico */ .vc-pagination .wp-block-query-pagination-previous a, .vc-pagination .wp-block-query-pagination-next a { font-weight: 600; } /* ------------------------------------------------------------------------- ARTÍCULO INDIVIDUAL — cabecera ------------------------------------------------------------------------- */ .vc-article__header { max-width: 760px; margin-inline: auto; padding-inline: var(--container-x, 1.5rem); } /* Categoría eyebrow sobre el título */ .vc-article__cat, .vc-article__header .wp-block-post-terms { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #15803D; /* verde-ink — WCAG AA */ margin-bottom: 0.75rem; text-decoration: none; } .vc-article__cat a, .vc-article__header .wp-block-post-terms a { color: #15803D; text-decoration: none; } /* H1 Cormorant grande */ .vc-article__title, .vc-article__header .wp-block-post-title { font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-primary, #0A3D62); margin: 0 0 1rem; } /* Meta: fecha · autor */ .vc-article__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--color-ink-soft, #5B6B78); } .vc-article__meta .wp-block-post-date, .vc-article__meta time { color: var(--color-ink-soft, #5B6B78); } .vc-article__meta-sep { color: var(--color-line, #E2E8EF); user-select: none; } .vc-article__meta-author { font-weight: 500; color: var(--color-ink-soft, #5B6B78); } /* Imagen destacada del artículo — alignwide, sombra */ .vc-article__featured-img, .single .wp-block-post-featured-image { display: block; margin-block: 1.5rem; box-shadow: 0 8px 40px -8px rgba(10, 61, 98, 0.14); } .vc-article__featured-img img, .single .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; } /* ------------------------------------------------------------------------- PROSA DEL ARTÍCULO — .vc-prose Tipografía Schibsted, headings Cormorant, blockquote borde-izq lima ------------------------------------------------------------------------- */ .vc-prose { max-width: 720px; margin-inline: auto; padding-inline: var(--container-x, 1.5rem); } .vc-prose p { font-family: var(--wp--preset--font-family--body, 'Schibsted Grotesk'); font-size: 1.1875rem; line-height: 1.7; color: var(--color-ink, #0B1F2D); margin: 0 0 1.25em; } .vc-prose h2 { font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-size: 1.875rem; font-weight: 600; line-height: 1.15; color: var(--color-primary, #0A3D62); margin: 3rem 0 0.75rem; letter-spacing: -0.01em; } .vc-prose h3 { font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--color-primary, #0A3D62); margin: 2rem 0 0.6rem; } /* Blockquote — borde izquierdo lima + Cormorant italic navy */ .vc-prose blockquote { border-left: 3px solid #39B54A; /* lima solo como acento gráfico */ padding-left: 1.25rem; margin: 2rem 0; font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--color-primary, #0A3D62); } .vc-prose blockquote cite, .vc-prose blockquote p:last-child { display: block; font-size: 0.875rem; font-style: normal; font-family: var(--wp--preset--font-family--body); color: var(--color-ink-soft, #5B6B78); margin-top: 0.5rem; } /* Listas */ .vc-prose ul, .vc-prose ol { padding-left: 1.5rem; margin: 0 0 1.25em; } .vc-prose ul li { list-style: none; position: relative; padding-left: 0.25rem; margin-bottom: 0.5em; line-height: 1.6; } .vc-prose ul li::before { content: "▸"; position: absolute; left: -1.25rem; color: #15803D; /* verde-ink — texto accesible */ font-size: 0.8em; top: 0.1em; } .vc-prose ol li { margin-bottom: 0.5em; line-height: 1.6; } .vc-prose ol li::marker { color: #15803D; font-weight: 600; } /* Enlace en prosa */ .vc-prose a { color: var(--color-primary, #0A3D62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s var(--ease-premium); } .vc-prose a:hover { color: var(--color-primary-deep, #072A44); } /* Imágenes en prosa */ .vc-prose img, .vc-prose figure img { display: block; max-width: 100%; height: auto; border-radius: 16px; margin-block: 2rem; } .vc-prose figcaption { font-size: 0.82rem; font-style: italic; color: var(--color-ink-soft, #5B6B78); text-align: center; margin-top: -1.25rem; margin-bottom: 2rem; } /* Strong */ .vc-prose strong { font-weight: 600; color: var(--color-ink, #0B1F2D); } /* ------------------------------------------------------------------------- CTA DEL ARTÍCULO — banda navy compacta ------------------------------------------------------------------------- */ .vc-article-cta { background: linear-gradient(135deg, var(--color-primary, #0A3D62) 0%, var(--color-primary-deep, #072A44) 100%); padding-block: 60px; text-align: center; } .vc-article-cta__inner { max-width: 640px; margin-inline: auto; padding-inline: var(--container-x, 1.5rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* El eyebrow reutiliza is-style-eyebrow sobre navy — lima como gráfico OK */ .vc-article-cta .is-style-eyebrow { color: #39B54A; /* lima sobre navy — contraste 4.7:1 AA */ margin: 0; } .vc-article-cta__heading { font-family: var(--wp--preset--font-family--display, 'Cormorant'); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.1; color: #fff; margin: 0; } .vc-article-cta__lead { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 480px; margin: 0; } @media (max-width: 600px) { .vc-article-cta { padding-block: 40px; } } /* ------------------------------------------------------------------------- RELACIONADOS — .vc-related (sobre surface, hereda vc-news-grid) ------------------------------------------------------------------------- */ .vc-related .vc-news-card { background: #fff; /* tarjeta blanca sobre surface */ } /* ========================================================================= A11Y — focus visible en tarjetas y paginación ========================================================================= */ .vc-news-card .wp-block-post-title a:focus-visible, .vc-news-card .wp-block-post-terms a:focus-visible, .vc-news-card .wp-block-read-more:focus-visible, .vc-pagination a:focus-visible { outline: 2px solid var(--color-primary, #0A3D62); outline-offset: 3px; border-radius: 2px; } /* ========================================================================= prefers-reduced-motion — deshabilita animaciones de la imagen de tarjeta ========================================================================= */ @media (prefers-reduced-motion: reduce) { .vc-news-card__media img, .vc-news-card .wp-block-post-featured-image img { transition: none !important; transform: none !important; } } /* vc-why → split con imagen (override del centrado) */ .vc-why__inner { max-width:1100px; display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2rem,5vw,4rem); align-items:center; text-align:left; } .vc-why__media { margin:0; } .vc-why__img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; box-shadow:0 20px 45px -25px rgba(10,61,98,.4); display:block; } .vc-why__text { text-align:left; } .vc-why__lead, .vc-why__kicker { margin-left:0; margin-right:0; } .vc-why__contrast { justify-content:flex-start; } @media (max-width:880px){ .vc-why__inner { grid-template-columns:1fr; text-align:center; } .vc-why__media { order:-1; } .vc-why__text { text-align:center; } .vc-why__lead, .vc-why__kicker { margin-inline:auto; } .vc-why__contrast { justify-content:center; } } /* vc-why → banda con imagen de fondo (handshake) + overlay navy, texto claro */ /* Overlay bajado para que lea como BANDA DE FOTO, no como banda navy plana. Contraste blanco sobre rgba(7,42,68,0.55)+rgba(10,61,98,0.42) ≈ 8:1 — AA OK. */ .vc-why { position:relative; background:var(--color-primary-deep); isolation:isolate; overflow:hidden; } .vc-why::before { content:""; position:absolute; inset:0; background-image:url(../img/vc-why-bg.webp); background-size:cover; background-position:center; opacity:0.62; z-index:-2; } .vc-why::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(7,42,68,0.55) 0%, rgba(10,61,98,0.42) 100%); z-index:-1; } .vc-why__inner { display:block; max-width:820px; margin-inline:auto; text-align:center; } .vc-why__text { text-align:center; } .vc-why .is-style-eyebrow { color:var(--color-accent); } .vc-why__headline { color:#ffffff; } .vc-why__headline em { color:var(--color-accent); } .vc-why__lead { color:rgba(255,255,255,0.86); margin-inline:auto; } .vc-why__lead strong { color:#ffffff; } .vc-why__contrast { justify-content:center; } .vc-why__num { color:#ffffff; } .vc-why__fig--risk .vc-why__num { color:rgba(255,255,255,0.62); } .vc-why__cap { color:rgba(255,255,255,0.72); } .vc-why__vs { color:rgba(255,255,255,0.6); } .vc-why__kicker { color:#ffffff; margin-inline:auto; } /* ========================================================================= RITMO DE PÁGINA — alternancia claro/oscuro (dirección de arte 2026-06-10) ========================================================================= */ /* "Qué revisamos" (#que-revisamos) a fondo surface — rompe el doble-blanco que la precede (trust strip blanca + sección blanca). */ #que-revisamos { background-color: var(--color-surface); } /* Dot-grid tenue en "Qué revisamos" (igual que las otras secciones surface) */ #que-revisamos::before { display: none; /* el dot-grid lo pone el wp-block-group rule; esta sección usa id, no la clase has-surface-background-color, así que añadimos la imagen directamente en el bloque */ } #que-revisamos.wp-block-group { background-image: radial-gradient(rgba(10, 61, 98, 0.04) 1px, transparent 1px); background-size: 24px 24px; background-position: 0 0; } /* ========================================================================= TARIFAS — cards con elevación + destacada navy (dirección de arte 2026-06-10) ========================================================================= */ /* Cards: más elevación sobre surface, sin borde lima en hover */ .vc-plan-card { padding: 2.25rem 1.75rem; box-shadow: 0 2px 4px rgba(10,61,98,0.05), 0 16px 32px -14px rgba(10,61,98,0.20); } .vc-plan-card:hover { transform: translateY(-6px); border-color: var(--color-line); box-shadow: 0 24px 52px -18px rgba(10,61,98,0.30); } /* Nombre = kicker; el precio Cormorant es el héroe */ .vc-plan-card__name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); } /* Separador fino bajo el precio */ .vc-plan-card__price { padding-bottom: 1.1rem; border-bottom: 1px solid var(--color-line); margin-bottom: 0.35rem; } /* Card destacada (Estándar): navy invertida, domina */ .vc-plan-card--featured { background: var(--color-primary); border: none; padding: 2.6rem 2rem; transform: translateY(-12px); box-shadow: 0 30px 64px -20px rgba(7,42,68,0.55); } .vc-plan-card--featured:hover { transform: translateY(-16px); box-shadow: 0 40px 84px -22px rgba(7,42,68,0.62); } .vc-plan-card--featured .vc-plan-card__name { color: rgba(255,255,255,0.72); } .vc-plan-card--featured .vc-plan-card__price { color: #ffffff; border-bottom-color: rgba(255,255,255,0.18); } .vc-plan-card--featured .vc-plan-card__price span { color: rgba(255,255,255,0.66); } .vc-plan-card--featured .vc-plan-card__features li { color: rgba(255,255,255,0.84); } .vc-plan-card--featured .vc-plan-card__features li::before { color: var(--color-accent); } /* Posicionar todas las cards para anclar badges (no solo la destacada) */ .vc-plan-card { position: relative; } /* Tagline corto bajo el nombre del plan */ .vc-plan-card__tagline { font-size: 0.85rem; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .vc-plan-card--featured .vc-plan-card__tagline { color: rgba(255,255,255,0.8); } /* Badge secundario (plan no destacado): chip suave, sin competir con Premium */ .vc-plan-card__badge--soft { background: var(--color-surface); color: var(--color-ink-soft); border: 1px solid var(--color-line); font-weight: 600; } /* ========================================================================= TABLA COMPARATIVA DE SERVICIOS — Eco / Estándar / Premium ========================================================================= */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .vc-compare__scroll { max-width: 1000px; margin-inline: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vc-compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; } .vc-compare th, .vc-compare td { padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); } .vc-compare thead th { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); background: var(--color-surface); } .vc-compare tbody th[scope="row"] { font-weight: 600; color: var(--color-primary); } .vc-compare td { color: var(--color-ink-soft); } .vc-compare tbody tr:last-child th, .vc-compare tbody tr:last-child td { border-bottom: none; } /* Columna Premium destacada */ .vc-compare .vc-compare__premium { background: rgba(10, 61, 98, 0.05); color: var(--color-ink); font-weight: 500; } .vc-compare thead th.vc-compare__premium { background: var(--color-primary); color: #fff; }