/* ========================================================================== ProDrive · Rediseño de sitio (enmaquetado 2026) Sistema de componentes para header, footer y páginas internas. Depende de las variables --pd-* declaradas en frontend/head.blade.php ========================================================================== */ :root { --pd-navy: #10173f; --pd-navy-deep: #0c1230; --pd-ink: #0f1a2e; --pd-teal-dark: #122436; --pd-cyan: #22a4d6; --pd-cyan-dark: #1b8bb8; --pd-green: #1f9d55; --pd-green-dark: #17864597; --pd-amber: #ffb100; --pd-text: #3f4557; --pd-muted: #7b8296; --pd-line: #e4e8f1; --pd-surface: #ffffff; --pd-surface-alt: #f2f5fb; --pd-radius: 14px; --pd-shadow: 0 18px 40px -24px rgba(16, 23, 63, .35); --pd-container: 1180px; --pd-font-display: 'Bebas Neue', 'Work Sans', sans-serif; --pd-font-body: 'Work Sans', system-ui, -apple-system, sans-serif; --pd-font-mono: 'IBM Plex Mono', ui-monospace, monospace; } .pd { color: var(--pd-text); font-family: var(--pd-font-body); } .pd *, .pd *::before, .pd *::after { box-sizing: border-box; } /* the theme sets body{overflow-x:hidden}, which turns into a scroll container and breaks position:sticky on the navbar. `clip` hides the same horizontal overflow without creating a scroll container, so sticky works. */ html { overflow-x: clip; } body { overflow-x: clip; } /* ---------- scroll-reveal animations (Animate.css + IntersectionObserver) ---------- */ html.pd-anim .pd [data-anim]:not(.animated) { opacity: 0; will-change: opacity, transform; } .pd .animated { -webkit-animation-duration: .65s; animation-duration: .65s; -webkit-animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-timing-function: cubic-bezier(.16, 1, .3, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html.pd-anim .pd [data-anim]:not(.animated) { opacity: 1; } .pd .animated { -webkit-animation: none !important; animation: none !important; } html { scroll-behavior: auto; } } .pd-container { width: 100%; max-width: var(--pd-container); margin: 0 auto; padding: 0 24px; } .pd-section { padding: 84px 0; } .pd-section--tight { padding: 56px 0; } .pd-section--alt { background: var(--pd-surface-alt); } .pd-section--navy { background: var(--pd-navy); color: #fff; } .pd-section--ink { background: var(--pd-ink); color: #fff; } /* ---------- typography helpers ---------- */ .pd-eyebrow { display: inline-block; font-family: var(--pd-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pd-muted); margin: 0 0 14px; } .pd-eyebrow--cyan { color: var(--pd-cyan-dark); } .pd-eyebrow--green { color: var(--pd-green); } .pd-eyebrow--amber { color: #b07600; } .pd-eyebrow--pill { border: 1px solid rgba(34, 164, 214, .4); background: rgba(34, 164, 214, .12); border-radius: 999px; padding: 6px 14px; color: var(--pd-cyan); } .pd-eyebrow--pill.pd-eyebrow--green { border-color: rgba(31, 157, 85, .4); background: rgba(31, 157, 85, .14); color: #6ee7a8; } .pd-h1, .pd-h2, .pd-h3 { font-family: var(--pd-font-display); font-weight: 400; letter-spacing: .02em; line-height: 1.05; margin: 0; color: var(--pd-navy); } .pd-h1 { font-size: clamp(38px, 5vw, 58px); } .pd-h2 { font-size: clamp(30px, 3.6vw, 42px); } .pd-h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: .04em; } .pd-section--navy .pd-h1, .pd-section--navy .pd-h2, .pd-section--ink .pd-h2, .pd-hero .pd-h1 { color: #fff; } .pd-lead { font-size: 17px; line-height: 1.75; color: var(--pd-text); max-width: 62ch; margin: 0; } .pd-section--navy .pd-lead, .pd-hero .pd-lead { color: rgba(255, 255, 255, .82); } .pd-center { text-align: center; } .pd-center .pd-lead { margin-left: auto; margin-right: auto; } .pd-section-head { margin-bottom: 46px; } .pd-section-head .pd-lead { margin-top: 16px; } /* ---------- buttons ---------- */ .pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--pd-font-body); font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1; padding: 15px 26px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease; text-align: center; } .pd-btn:hover { transform: translateY(-2px); } .pd-btn--primary { background: var(--pd-navy); color: #fff; } .pd-btn--primary:hover { background: #1a2456; color: #fff; box-shadow: var(--pd-shadow); } .pd-btn--cyan { background: var(--pd-cyan); color: #fff; } .pd-btn--cyan:hover { background: var(--pd-cyan-dark); color: #fff; } .pd-btn--green { background: var(--pd-green); color: #fff; } .pd-btn--green:hover { background: #17864a; color: #fff; } .pd-btn--ghost { background: transparent; border-color: currentColor; color: var(--pd-navy); } .pd-hero .pd-btn--ghost, .pd-section--navy .pd-btn--ghost, .pd-section--ink .pd-btn--ghost { color: #fff; } .pd-btn--ghost:hover { background: rgba(255, 255, 255, .08); } .pd-btn--block { width: 100%; } .pd-btn--lg { padding: 17px 30px; font-size: 15px; } .pd-textlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--pd-navy); letter-spacing: .02em; } .pd-textlink:hover { color: var(--pd-cyan-dark); gap: 11px; } .pd-textlink--cyan { color: var(--pd-cyan-dark); } .pd-textlink--green { color: var(--pd-green); } /* ========================================================================== Topbar + Navbar ========================================================================== */ .pd-topbar { background: var(--pd-navy-deep); color: rgba(255, 255, 255, .74); font-size: 12.5px; } .pd-topbar .pd-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; } .pd-topbar__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .pd-topbar__meta span { display: inline-flex; align-items: center; gap: 7px; } .pd-topbar__meta i { color: var(--pd-cyan); font-size: 12px; } .pd-topbar__social { display: flex; align-items: center; gap: 14px; } .pd-topbar__social a { color: rgba(255, 255, 255, .68); font-size: 13px; } .pd-topbar__social a:hover { color: #fff; } .pd-topbar, .pd-topbar *, .pd-nav, .pd-nav * { box-sizing: border-box; } .pd-nav { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--pd-line); box-shadow: 0 2px 14px rgba(16, 23, 63, .06); transition: box-shadow .2s ease; } .pd-nav.is-stuck { box-shadow: 0 10px 30px -12px rgba(16, 23, 63, .28); } .pd-nav .pd-container { display: flex; align-items: center; gap: 28px; min-height: 76px; } .pd-nav__logo { display: flex; align-items: center; flex-shrink: 0; } .pd-nav__logo img { height: 52px; width: auto; display: block; object-fit: contain; } .pd-nav__links { display: flex; align-items: center; gap: 26px; margin: 0 auto 0 18px; padding: 0; list-style: none; } .pd-nav__links a { font-size: 14px; font-weight: 600; color: var(--pd-navy); letter-spacing: .01em; padding: 6px 0; position: relative; } .pd-nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--pd-cyan); transition: width .2s ease; } .pd-nav__links a:hover::after, .pd-nav__links a.is-active::after { width: 100%; } .pd-nav__links a.is-active { color: var(--pd-cyan-dark); } .pd-nav__actions { display: flex; align-items: center; gap: 16px; } .pd-nav__wa { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pd-navy); } .pd-nav__wa i { color: #25d366; font-size: 16px; } .pd-nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; } .pd-nav__toggle span { width: 24px; height: 2px; background: var(--pd-navy); display: block; border-radius: 2px; } /* piezas que solo existen en el panel móvil */ .pd-nav__panel-head, .pd-nav__panel-cta { display: none; } /* telón de fondo del menú móvil */ .pd-nav__scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; animation: pdScrimIn .25s ease forwards; } @keyframes pdScrimIn { to { opacity: 1; } } body.pd-nav-open { overflow: hidden; } /* con el menú abierto, la barra queda por encima del telón y sin su "chrome" */ body.pd-nav-open .pd-nav { z-index: 1001; background: transparent; border-color: transparent; box-shadow: none; } body.pd-nav-open .pd-nav__logo, body.pd-nav-open .pd-nav__toggle { opacity: 0; pointer-events: none; } @media (max-width: 1080px) { .pd-nav__links { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0 22px calc(22px + env(safe-area-inset-bottom)); background: #fff; border-radius: 22px 0 0 22px; box-shadow: -30px 0 70px rgba(16, 23, 63, .28); transform: translateX(105%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; z-index: 1001; } .pd-nav__links.is-open { transform: translateX(0); } .pd-nav__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(16, 23, 63, .08); } .pd-nav__panel-logo { height: 40px; width: auto; } .pd-nav__close { position: relative; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(16, 23, 63, .06); cursor: pointer; flex-shrink: 0; } .pd-nav__close span { position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; background: var(--pd-navy); border-radius: 2px; } .pd-nav__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .pd-nav__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .pd-nav__links li:not(.pd-nav__panel-head):not(.pd-nav__panel-cta) { border-bottom: 1px solid rgba(16, 23, 63, .06); } .pd-nav__links a { display: block; width: 100%; padding: 16px 12px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--pd-navy); transition: background-color .15s ease, color .15s ease; } .pd-nav__links a::after { display: none; } .pd-nav__links a:hover { background: rgba(16, 23, 63, .04); } .pd-nav__links a.is-active { color: var(--pd-cyan-dark); background: rgba(34, 164, 214, .10); box-shadow: inset 3px 0 0 var(--pd-cyan); } .pd-nav__panel-cta { display: block; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(16, 23, 63, .08); } .pd-nav__panel-wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--pd-navy); } .pd-nav__panel-wa i { color: #25d366; font-size: 17px; } .pd-nav__toggle { display: flex; } /* la lista está fuera de flujo (position:fixed): empujamos la hamburguesa a la derecha */ .pd-nav__actions { margin-left: auto; } .pd-nav__actions .pd-nav__wa, .pd-nav__actions > .pd-btn { display: none; } .pd-topbar__meta span:nth-child(2) { display: none; } } @media (max-width: 620px) { .pd-topbar__social { display: none; } } /* ========================================================================== Page hero (navy band with breadcrumb + title) ========================================================================== */ .pd-hero { background: var(--pd-navy); color: #fff; padding: 66px 0; position: relative; overflow: hidden; } .pd-hero--tall { padding: 92px 0; } .pd-hero--ink { background: var(--pd-ink); } .pd-breadcrumb { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); display: flex; align-items: center; gap: 9px; margin-bottom: 16px; flex-wrap: wrap; } .pd-breadcrumb a { color: rgba(255, 255, 255, .55); } .pd-breadcrumb a:hover { color: #fff; } .pd-breadcrumb .sep { opacity: .5; } .pd-breadcrumb .current { color: var(--pd-cyan); } .pd-hero__lead { margin-top: 18px; max-width: 60ch; } .pd-hero__actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; } /* split hero (home / empresas) */ .pd-hero--split .pd-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .pd-hero--split .pd-checklist { margin-top: 22px; } @media (max-width: 900px) { .pd-hero--split .pd-hero__grid { grid-template-columns: 1fr; } } /* diagonal corner accent for the empresas hero */ .pd-hero--green::before { content: ""; position: absolute; top: -60px; left: -60px; width: 200px; height: 200px; background: var(--pd-green); transform: rotate(45deg); } .pd-hero--green .pd-breadcrumb .current { color: #6ee7a8; } /* ========================================================================== Media placeholder (diagonal hatch) ========================================================================== */ .pd-media { position: relative; border-radius: var(--pd-radius); overflow: hidden; background: #e8ecf5; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 12px, transparent 12px 24px); display: flex; align-items: center; justify-content: center; min-height: 240px; aspect-ratio: 16 / 10; color: var(--pd-muted); } .pd-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-media__label { position: relative; z-index: 1; font-size: 12px; background: rgba(255, 255, 255, .82); padding: 5px 12px; border-radius: 6px; text-align: center; } .pd-media--free { aspect-ratio: auto; height: 100%; } /* ========================================================================== Feature row (4 icon columns) ========================================================================== */ .pd-feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; } .pd-feature__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: var(--pd-navy); margin-bottom: 14px; } .pd-feature h4 { font-size: 16px; font-weight: 700; color: var(--pd-navy); margin: 0 0 8px; } .pd-feature p { font-size: 14px; line-height: 1.65; color: var(--pd-muted); margin: 0; } .pd-feature-row--center .pd-feature { text-align: center; } .pd-feature-row--center .pd-feature__icon { background: rgba(31, 157, 85, .1); border-radius: 12px; color: var(--pd-green); } @media (max-width: 860px) { .pd-feature-row { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 460px) { .pd-feature-row { grid-template-columns: 1fr; } } /* ========================================================================== Split content block (image + text) ========================================================================== */ .pd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .pd-split--media-right .pd-split__media { order: 2; } .pd-split__body .pd-lane { width: 56px; border-top: 3px solid var(--pd-amber); margin: 18px 0 22px; } .pd-split__body .pd-checklist { margin: 22px 0; } .pd-split__body .pd-btn { margin-top: 8px; } @media (max-width: 880px) { .pd-split { grid-template-columns: 1fr; gap: 32px; } .pd-split--media-right .pd-split__media { order: 0; } } /* ========================================================================== Checklist ========================================================================== */ .pd-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .pd-checklist--2col { grid-template-columns: 1fr 1fr; gap: 12px 28px; } .pd-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.55; color: var(--pd-text); } .pd-checklist li::before { content: "\f00c"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; color: var(--pd-cyan); font-size: 12px; margin-top: 3px; flex-shrink: 0; } .pd-section--navy .pd-checklist li, .pd-hero .pd-checklist li { color: rgba(255, 255, 255, .85); } .pd-hero .pd-checklist li::before, .pd-section--navy .pd-checklist li::before { color: var(--pd-cyan); } @media (max-width: 620px) { .pd-checklist--2col { grid-template-columns: 1fr; } } /* inline hero checklist (home) */ .pd-hero .pd-checklist--inline { display: flex; flex-wrap: wrap; gap: 10px 26px; } /* ========================================================================== Course cards grid ========================================================================== */ .pd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } @media (max-width: 940px) { .pd-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .pd-grid-3, .pd-grid-2 { grid-template-columns: 1fr; } } .pd-course-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .pd-course-card:hover { transform: translateY(-4px); box-shadow: var(--pd-shadow); } .pd-course-card .pd-media { border-radius: 0; aspect-ratio: 16 / 9; min-height: 0; } .pd-course-card__body { padding: 24px 24px 0; flex: 1; } .pd-course-card__body h3 { font-family: var(--pd-font-display); font-size: 22px; letter-spacing: .03em; color: var(--pd-navy); margin: 0 0 10px; } .pd-course-card__body h3 a { color: inherit; text-decoration: none; transition: color .15s ease; } .pd-course-card__body h3 a:hover { color: var(--pd-cyan); } .pd-course-card__body p { font-size: 14px; line-height: 1.6; color: var(--pd-muted); margin: 0; } .pd-course-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; margin-top: 20px; border-top: 1px solid var(--pd-line); } .pd-course-card__price { font-size: 13px; font-weight: 700; color: var(--pd-navy); line-height: 1.3; } .pd-course-card__price small { display: block; font-weight: 500; color: var(--pd-muted); font-size: 11px; } .pd-badge { display: inline-block; font-family: var(--pd-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #b07600; background: rgba(255, 177, 0, .16); padding: 4px 10px; border-radius: 999px; } /* ========================================================================== Steps (numbered) ========================================================================== */ .pd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pd-steps--plain { gap: 40px; } .pd-step { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 28px 26px; background: #fff; } .pd-section--navy .pd-step, .pd-steps--plain .pd-step { border: 0; background: transparent; padding: 0; } .pd-step__num { font-family: var(--pd-font-display); font-size: 40px; letter-spacing: .04em; color: #c9d0e2; line-height: 1; display: block; margin-bottom: 14px; } .pd-section--navy .pd-step__num { color: rgba(255, 255, 255, .28); } .pd-step h4 { font-size: 16px; font-weight: 700; color: var(--pd-navy); margin: 0 0 8px; } .pd-section--navy .pd-step h4 { color: #fff; } .pd-step p { font-size: 14px; line-height: 1.6; color: var(--pd-muted); margin: 0; } .pd-section--navy .pd-step p { color: rgba(255, 255, 255, .7); } @media (max-width: 780px) { .pd-steps { grid-template-columns: 1fr; } } /* ========================================================================== Stats ========================================================================== */ .pd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; } .pd-stat__num { font-family: var(--pd-font-display); font-size: 46px; color: var(--pd-navy); letter-spacing: .03em; line-height: 1; } .pd-stat__label { font-size: 13px; color: var(--pd-muted); margin-top: 8px; } .pd-stat__label em { color: var(--pd-amber); font-style: normal; } @media (max-width: 680px) { .pd-stats { grid-template-columns: 1fr; gap: 22px; } } /* ========================================================================== Testimonials ========================================================================== */ .pd-quote { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 26px; } .pd-quote__stars { color: var(--pd-cyan); font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; } .pd-quote p { font-size: 14.5px; line-height: 1.7; color: var(--pd-text); margin: 0 0 18px; } .pd-quote__who { display: flex; align-items: center; gap: 12px; } .pd-quote__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--pd-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--pd-font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; flex-shrink: 0; } .pd-quote__who strong { display: block; font-size: 14px; color: var(--pd-navy); } .pd-quote__who span { font-size: 12px; color: var(--pd-muted); } /* ========================================================================== CTA bands ========================================================================== */ .pd-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .pd-cta-band__text { display: flex; align-items: center; gap: 18px; } .pd-cta-band__icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .pd-cta-band h3 { font-family: var(--pd-font-display); font-size: 21px; letter-spacing: .03em; margin: 0 0 4px; color: var(--pd-navy); } .pd-cta-band p { font-size: 14px; margin: 0; opacity: .82; } .pd-section--navy .pd-cta-band h3, .pd-section--ink .pd-cta-band h3 { color: #fff; } .pd-section--navy .pd-cta-band p, .pd-section--ink .pd-cta-band p { color: rgba(255, 255, 255, .8); } .pd-cta-band--dark { background: var(--pd-navy); color: #fff; border-radius: var(--pd-radius); padding: 30px 34px; } .pd-cta-band--dark .pd-cta-band__icon { background: rgba(34, 164, 214, .18); color: var(--pd-cyan); } .pd-cta-band--dark h3 { color: #fff; } .pd-cta-band--light { background: var(--pd-surface-alt); border-radius: var(--pd-radius); padding: 30px 34px; } .pd-cta-band--light .pd-cta-band__icon { background: rgba(16, 23, 63, .06); color: var(--pd-navy); } .pd-cta-band--light h3 { color: var(--pd-navy); } .pd-cta-strip { text-align: center; } .pd-cta-strip .pd-h2 { margin-bottom: 12px; } .pd-cta-strip .pd-lead { margin: 0 auto 26px; } .pd-cta-strip__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* full-width CTA row used on empresas / cecove bottom */ .pd-cta-wide { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .pd-cta-wide h3 { font-family: var(--pd-font-display); font-size: clamp(22px, 3vw, 30px); letter-spacing: .03em; color: #fff; margin: 0 0 8px; } .pd-cta-wide p { margin: 0; opacity: .78; font-size: 14px; max-width: 46ch; } .pd-cta-wide__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .pd-cta-wide__phone { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 700; color: #fff; } .pd-cta-wide__phone i { color: var(--pd-green); } /* ========================================================================== Pricing cards ========================================================================== */ .pd-price-card { position: relative; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 30px 28px; display: flex; flex-direction: column; } .pd-price-card.is-recommended { border: 2px solid var(--pd-cyan); box-shadow: 0 20px 44px -22px rgba(34, 164, 214, .5); } .pd-price-card__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--pd-cyan); color: #fff; font-family: var(--pd-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; } .pd-price-card__tier { font-family: var(--pd-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pd-navy); margin-bottom: 14px; } .pd-price-card__price { font-family: var(--pd-font-display); font-size: 40px; letter-spacing: .02em; color: var(--pd-navy); line-height: 1; } .pd-price-card__price span { font-family: var(--pd-font-body); font-size: 13px; font-weight: 500; color: var(--pd-muted); letter-spacing: 0; } .pd-price-card__sub { font-size: 13px; color: var(--pd-muted); margin: 8px 0 0; } .pd-price-card__rule { border: 0; border-top: 1px solid var(--pd-line); margin: 22px 0; } .pd-price-card .pd-checklist { margin-bottom: 26px; flex: 1; } .pd-price-card .pd-checklist li { font-size: 14px; } /* toggle */ .pd-toggle { display: inline-flex; background: #fff; border: 1px solid var(--pd-line); border-radius: 999px; padding: 5px; gap: 4px; margin: 0 auto 44px; } .pd-toggle button { border: 0; background: transparent; font-family: var(--pd-font-body); font-size: 14px; font-weight: 600; color: var(--pd-muted); padding: 11px 26px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .16s ease, color .16s ease; } .pd-toggle button.is-active { background: var(--pd-navy); color: #fff; } .pd-toggle--cyan button.is-active { background: var(--pd-cyan); } /* ========================================================================== Info cards (contacto) ========================================================================== */ .pd-info-card { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 30px 26px; text-align: center; } .pd-info-card__icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(34, 164, 214, .12); color: var(--pd-cyan-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; } .pd-info-card h4 { font-size: 16px; font-weight: 700; color: var(--pd-navy); margin: 0 0 8px; } .pd-info-card p { font-size: 14px; line-height: 1.65; color: var(--pd-muted); margin: 0; } .pd-info-card a { color: var(--pd-cyan-dark); font-weight: 600; } /* ========================================================================== Forms ========================================================================== */ .pd-form { display: grid; gap: 18px; } .pd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .pd-field { display: flex; flex-direction: column; gap: 7px; } .pd-field label { font-size: 13px; font-weight: 600; color: var(--pd-navy); } .pd-field input, .pd-field select, .pd-field textarea { width: 100%; height: auto; font-family: var(--pd-font-body); font-size: 14px; color: var(--pd-text); padding: 13px 15px; border: 1px solid var(--pd-line); border-radius: 10px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; } .pd-field textarea { min-height: 120px; resize: vertical; } .pd-field input:focus, .pd-field select:focus, .pd-field textarea:focus { outline: none; border-color: var(--pd-cyan); box-shadow: 0 0 0 3px rgba(34, 164, 214, .15); } @media (max-width: 620px) { .pd-form__row { grid-template-columns: 1fr; } } .pd-field-error { font-size: 12.5px; font-weight: 600; color: #c0392b; } .pd-field input.is-invalid, .pd-field textarea.is-invalid { border-color: #c0392b; } .pd-form-alert { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: 10px; font-size: 14px; line-height: 1.55; margin-bottom: 22px; } .pd-form-alert i { margin-top: 2px; font-size: 15px; flex-shrink: 0; } .pd-form-alert--ok { background: rgba(31, 157, 85, .1); color: #157a43; } .pd-form-alert--err { background: rgba(192, 57, 43, .1); color: #a5281c; } .pd-form-alert a { color: inherit; text-decoration: underline; } .pd-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .pd-contact-grid { grid-template-columns: 1fr; gap: 32px; } } /* ========================================================================== Requisitos por tipo de licencia (imágenes) ========================================================================== */ .pd-req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pd-req-card { display: block; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .pd-req-card:hover { transform: translateY(-4px); box-shadow: var(--pd-shadow); } .pd-req-card img { width: 100%; height: auto; display: block; background: #f4f6fb; } .pd-req-card__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--pd-line); font-size: 13px; font-weight: 700; color: var(--pd-navy); } .pd-req-card__cap i { color: var(--pd-cyan-dark); font-size: 12px; } @media (max-width: 900px) { .pd-req-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pd-req-grid { grid-template-columns: 1fr; } } /* ========================================================================== Archivos descargables ========================================================================== */ .pd-download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pd-download-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 24px; transition: transform .18s ease, box-shadow .18s ease; } .pd-download-card:hover { transform: translateY(-4px); box-shadow: var(--pd-shadow); } .pd-download-card__icon { width: 42px; height: 42px; border-radius: 11px; background: rgba(34, 164, 214, .12); color: var(--pd-cyan-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; } .pd-download-card h4 { font-size: 15px; font-weight: 700; color: var(--pd-navy); margin: 4px 0 0; } .pd-download-card p { font-size: 13px; line-height: 1.55; color: var(--pd-muted); margin: 0; flex: 1; } .pd-download-card__meta { font-family: var(--pd-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-muted); } .pd-download-card .pd-textlink { margin-top: 6px; } @media (max-width: 900px) { .pd-download-grid { grid-template-columns: 1fr; } } /* ========================================================================== Requisitos table (categorías profesionales) ========================================================================== */ .pd-table-wrap { overflow-x: auto; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); } .pd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; } .pd-table caption { text-align: left; padding: 16px 20px; font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); background: var(--pd-surface-alt); } .pd-table th { text-align: left; font-family: var(--pd-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-muted); padding: 12px 20px; border-bottom: 1px solid var(--pd-line); } .pd-table td { padding: 14px 20px; border-bottom: 1px solid var(--pd-line); color: var(--pd-text); vertical-align: top; } .pd-table tr:last-child td { border-bottom: 0; } .pd-table td:first-child { font-weight: 700; color: var(--pd-navy); } /* ========================================================================== Exam preview card (cecove) ========================================================================== */ .pd-exam-preview { background: #fff; border-radius: var(--pd-radius); padding: 26px; color: var(--pd-text); box-shadow: var(--pd-shadow); } .pd-exam-preview__head { display: flex; justify-content: space-between; font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-muted); margin-bottom: 14px; } .pd-exam-preview__q { font-size: 15px; font-weight: 700; color: var(--pd-navy); margin: 0 0 16px; } .pd-exam-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--pd-line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 10px; } .pd-exam-opt.is-picked { border-color: var(--pd-cyan); background: rgba(34, 164, 214, .08); } .pd-exam-opt .dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--pd-line); flex-shrink: 0; } .pd-exam-opt.is-picked .dot { border-color: var(--pd-cyan); background: var(--pd-cyan); } /* ========================================================================== Sidebar (curso detalle) ========================================================================== */ .pd-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; } .pd-aside-card { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 24px; margin-bottom: 20px; } .pd-aside-card__price { font-family: var(--pd-font-display); font-size: 40px; color: var(--pd-navy); letter-spacing: .02em; line-height: 1; margin: 4px 0 18px; } .pd-aside-card .pd-btn { margin-bottom: 10px; } .pd-aside-card h4 { font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); margin: 0 0 14px; } .pd-aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pd-aside-links a { font-size: 14px; font-weight: 600; color: var(--pd-navy); } .pd-aside-links a:hover { color: var(--pd-cyan-dark); } .pd-aside-schedule { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--pd-line); } .pd-aside-schedule:last-child { border-bottom: 0; } .pd-aside-schedule span:first-child { color: var(--pd-muted); } .pd-aside-schedule span:last-child { font-weight: 700; color: var(--pd-navy); } @media (max-width: 900px) { .pd-detail-grid { grid-template-columns: 1fr; } } /* ========================================================================== Footer ========================================================================== */ .pd-footer { background: var(--pd-ink); color: rgba(255, 255, 255, .62); } .pd-footer__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 48px; } .pd-footer__brand .pd-footer__logo { display: inline-block; } .pd-footer__brand .pd-footer__logo img { height: 58px; width: auto; display: block; } .pd-footer__brand p { font-size: 13.5px; line-height: 1.7; margin: 16px 0 18px; max-width: 34ch; } .pd-footer__social { display: flex; gap: 14px; } .pd-footer__social a { color: rgba(255, 255, 255, .55); font-size: 15px; } .pd-footer__social a:hover { color: #fff; } .pd-footer h5 { font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 18px; } .pd-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .pd-footer ul a, .pd-footer ul li { font-size: 13.5px; color: rgba(255, 255, 255, .62); } .pd-footer ul a:hover { color: #fff; } .pd-footer__contact li { display: flex; gap: 10px; align-items: flex-start; } .pd-footer__contact i { color: var(--pd-cyan); font-size: 12px; margin-top: 4px; } .pd-footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .45); } .pd-footer__bar a { color: rgba(255, 255, 255, .55); } .pd-footer__bar a:hover { color: #fff; } .pd-footer__bar-links { display: flex; gap: 22px; } @media (max-width: 900px) { .pd-footer__main { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 560px) { .pd-footer__main { grid-template-columns: 1fr; } } /* ========================================================================== Misc utilities ========================================================================== */ .pd-mt-0 { margin-top: 0 !important; } .pd-divider-lane { width: 56px; border-top: 3px solid var(--pd-amber); margin: 16px auto 30px; } .pd-section-head--left .pd-divider-lane { margin-left: 0; } .pd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 780px) { .pd-grid-4 { grid-template-columns: repeat(2, 1fr); } } .pd-client-logo { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 22px 24px; min-height: 92px; } .pd-client-logo img { max-height: 40px; width: auto; opacity: 1; filter: none; } /* ========================================================================== Simulador de examen teórico ========================================================================== */ .pd-exam-q { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 24px 26px; margin-bottom: 18px; } .pd-exam-q__num { font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-muted); } .pd-exam-q__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pd-exam-q__text { font-size: 17px; font-weight: 600; color: var(--pd-navy); margin: 8px 0 16px; line-height: 1.5; } .pd-exam-q__flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a6100; background: #ffe9a8; padding: 4px 10px; border-radius: 999px; } .pd-exam-q.is-missing { border-color: #f0b400; border-width: 2px; background: #fffaf0; box-shadow: 0 0 0 3px rgba(240, 180, 0, .18); } /* progreso */ .pd-exam-progress { position: sticky; top: 84px; z-index: 5; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--pd-line); border-radius: 999px; padding: 10px 18px; margin-bottom: 22px; box-shadow: 0 6px 18px -10px rgba(16, 23, 63, .2); } .pd-exam-progress__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--pd-surface-alt); overflow: hidden; } .pd-exam-progress__bar span { display: block; height: 100%; background: var(--pd-cyan); border-radius: 999px; transition: width .3s ease; } .pd-exam-progress__txt { font-family: var(--pd-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-muted); white-space: nowrap; } /* acceso al simulador (invitado) */ .pd-exam-login { background: var(--pd-surface-alt); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 24px 26px; } /* login */ .pd-login-card { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 28px; box-shadow: var(--pd-shadow); } .pd-login-remember { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--pd-text); cursor: pointer; } .pd-login-remember input { width: 16px; height: 16px; accent-color: var(--pd-cyan); } .pd-exam-q__img { max-width: 280px; border-radius: 10px; margin-bottom: 16px; display: block; } .pd-exam-q__opts { display: flex; flex-direction: column; gap: 10px; } .pd-exam-choice { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--pd-line); border-radius: 10px; cursor: pointer; font-size: 14.5px; color: var(--pd-text); transition: border-color .15s ease, background-color .15s ease; } .pd-exam-choice:hover { border-color: var(--pd-cyan); } .pd-exam-choice.is-picked { border-color: var(--pd-cyan); background: rgba(34, 164, 214, .08); } .pd-exam-choice input { width: 16px; height: 16px; accent-color: var(--pd-cyan); flex-shrink: 0; } /* Preguntas cuyas cuatro respuestas son señales de tránsito. */ .pd-exam-q__opts--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .pd-exam-choice--img { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 10px; } .pd-exam-choice--img input { align-self: center; } .pd-exam-choice__media { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 96px; } .pd-exam-choice__media img { max-width: 100%; max-height: 110px; object-fit: contain; } .pd-exam-choice__label { font-size: 13px; color: var(--pd-muted); font-weight: 600; } .pd-review__img { max-width: 200px; border-radius: 8px; margin: 10px 0 4px; display: block; } .pd-review__thumb { max-width: 84px; max-height: 84px; object-fit: contain; border: 1px solid var(--pd-line); border-radius: 8px; background: #fff; padding: 4px; } .pd-result { text-align: center; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 40px 30px; box-shadow: var(--pd-shadow); } .pd-result__tag { display: inline-block; font-family: var(--pd-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; } .pd-result.is-ok .pd-result__tag { background: rgba(31, 157, 85, .12); color: #157a43; } .pd-result.is-fail .pd-result__tag { background: rgba(192, 57, 43, .1); color: #a5281c; } .pd-result__score { font-family: var(--pd-font-display); font-size: 64px; line-height: 1; color: var(--pd-navy); margin: 16px 0 6px; letter-spacing: .02em; } .pd-result__sub { font-size: 15px; color: var(--pd-muted); margin: 0 0 18px; } .pd-result__tallies { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } .pd-tally { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; } .pd-tally--ok { background: rgba(31, 157, 85, .12); color: #157a43; } .pd-tally--bad { background: rgba(192, 57, 43, .1); color: #a5281c; } .pd-result__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .pd-review { display: flex; flex-direction: column; gap: 12px; } .pd-review__item { border: 1px solid var(--pd-line); border-left-width: 4px; border-radius: 10px; padding: 18px 20px; background: #fff; } .pd-review__item.is-ok { border-left-color: var(--pd-green); } .pd-review__item.is-bad { border-left-color: #c0392b; } .pd-review__head { display: flex; gap: 12px; align-items: flex-start; } .pd-review__badge { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; flex-shrink: 0; margin-top: 2px; } .pd-review__item.is-ok .pd-review__badge { background: var(--pd-green); } .pd-review__item.is-bad .pd-review__badge { background: #c0392b; } .pd-review__q { font-size: 15px; color: var(--pd-text); line-height: 1.5; display: block; } .pd-review__q strong { display: block; font-size: 16px; color: var(--pd-navy); margin-top: 3px; font-weight: 700; } .pd-review__qlabel { font-family: var(--pd-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); } .pd-review__answers { margin: 14px 0 0 36px; padding: 12px 16px; background: var(--pd-surface-alt); border-radius: 10px; } .pd-review__line { font-size: 13.5px; margin: 5px 0; display: flex; gap: 8px; flex-wrap: wrap; } .pd-review__label { color: var(--pd-muted); font-family: var(--pd-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; min-width: 130px; padding-top: 1px; } .pd-review__ok { color: #157a43; font-weight: 700; } .pd-review__bad { color: #a5281c; font-weight: 700; } @media (max-width: 560px) { .pd-review__answers { margin-left: 0; } } /* ---------- panel de administración ---------- */ .pd-admin-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 26px; transition: transform .18s ease, box-shadow .18s ease; } .pd-admin-card:hover { transform: translateY(-4px); box-shadow: var(--pd-shadow); } .pd-admin-card__icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(34, 164, 214, .12); color: var(--pd-cyan-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 6px; } .pd-admin-card h3 { font-family: var(--pd-font-display); font-size: 21px; letter-spacing: .03em; color: var(--pd-navy); margin: 0; } .pd-admin-card p { font-size: 13.5px; color: var(--pd-muted); margin: 0; line-height: 1.55; flex: 1; } .pd-admin-card__meta { font-family: var(--pd-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-muted); } .pd-admin-card .pd-textlink { margin-top: 6px; } /* ---------- blog article body ---------- */ .pd-article p { margin: 0 0 18px; } .pd-article h2, .pd-article h3 { font-family: var(--pd-font-display); color: var(--pd-navy); letter-spacing: .03em; margin: 32px 0 14px; } .pd-article a { color: var(--pd-cyan-dark); text-decoration: underline; } .pd-article ul, .pd-article ol { margin: 0 0 18px; padding-left: 22px; } .pd-article img { border-radius: var(--pd-radius); margin: 8px 0 18px; } /* ---------- blog pagination (bootstrap-5 markup) ---------- */ .pd-blog-pagination nav { display: flex; justify-content: center; } .pd-blog-pagination .pagination { display: flex; list-style: none; gap: 6px; padding: 0; margin: 0; } .pd-blog-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--pd-line); border-radius: 10px; color: var(--pd-navy); font-size: 14px; font-weight: 600; background: #fff; } .pd-blog-pagination .page-item.active .page-link { background: var(--pd-navy); border-color: var(--pd-navy); color: #fff; } .pd-blog-pagination .page-item.disabled .page-link { opacity: .4; } .pd-blog-pagination .page-link:hover { border-color: var(--pd-cyan); color: var(--pd-cyan-dark); } /* ========================================================================== Hero carousel (carrusel de la portada) ========================================================================== */ .pd-carousel { position: relative; border-radius: var(--pd-radius); overflow: hidden; background: var(--pd-navy-deep); aspect-ratio: 16 / 11; box-shadow: var(--pd-shadow); } .pd-carousel__viewport { position: absolute; inset: 0; } .pd-carousel__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; } .pd-carousel__slide.is-active { opacity: 1; pointer-events: auto; } .pd-carousel__slide > img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-carousel__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 26px 24px; display: flex; flex-direction: column; gap: 6px; color: #fff; background: linear-gradient(to top, rgba(12, 18, 48, .92), rgba(12, 18, 48, .5) 55%, transparent); } .pd-carousel__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--pd-cyan); } .pd-carousel__caption strong { font-family: var(--pd-font-display); font-weight: 400; font-size: clamp(21px, 2.5vw, 28px); letter-spacing: .02em; line-height: 1.1; } .pd-carousel__text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); } .pd-carousel__dots { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; } .pd-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .2s ease, transform .2s ease; } .pd-carousel__dot:hover { background: rgba(255, 255, 255, .75); } .pd-carousel__dot.is-active { background: #fff; transform: scale(1.3); } @media (max-width: 900px) { .pd-carousel { aspect-ratio: 16 / 10; } } @media (prefers-reduced-motion: reduce) { .pd-carousel__slide { transition: none; } } /* ========================================================================== Buscador con icono (blog / listados) ========================================================================== */ .pd-search { position: relative; } .pd-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--pd-muted); font-size: 15px; pointer-events: none; } .pd-search input { width: 100%; font-family: var(--pd-font-body); font-size: 14px; color: var(--pd-text); padding: 14px 16px 14px 44px; border: 1px solid var(--pd-line); border-radius: 10px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; } .pd-search input::-webkit-search-cancel-button { cursor: pointer; } .pd-search input:focus { outline: none; border-color: var(--pd-cyan); box-shadow: 0 0 0 3px rgba(34, 164, 214, .15); } /* ========================================================================== Hero a pantalla completa con carrusel (portada) ========================================================================== */ .pd-hero-carousel { position: relative; padding: 0 !important; min-height: clamp(440px, 60vh, 560px); display: flex; align-items: center; overflow: hidden; } .pd-hero-carousel .pd-carousel__viewport { position: absolute; inset: 0; } .pd-hero-carousel .pd-carousel__slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity .9s ease; pointer-events: none; } .pd-hero-carousel .pd-carousel__slide.is-active { opacity: 1; pointer-events: auto; } .pd-hero-carousel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .pd-hero-carousel .pd-carousel__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12, 18, 48, .93) 0%, rgba(12, 18, 48, .82) 38%, rgba(12, 18, 48, .45) 72%, rgba(12, 18, 48, .25) 100%); } .pd-hero-carousel .pd-container { position: relative; z-index: 2; width: 100%; } .pd-hero-carousel__content { max-width: 620px; padding: 72px 0; } .pd-hero-carousel__content .pd-h1 { margin-top: 18px; } .pd-hero-carousel__content .pd-hero__lead { max-width: 52ch; } /* Flechas prev / next */ .pd-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s ease; } .pd-carousel__arrow:hover { background: rgba(255, 255, 255, .28); } .pd-carousel__arrow--prev { left: 18px; } .pd-carousel__arrow--next { right: 18px; } .pd-hero-carousel .pd-carousel__dots { top: auto; right: auto; bottom: 24px; left: 0; width: 100%; justify-content: center; } @media (max-width: 720px) { .pd-hero-carousel { min-height: 82vh; } .pd-hero-carousel__content { padding: 56px 0; } .pd-hero-carousel .pd-carousel__slide::after { background: linear-gradient(180deg, rgba(12, 18, 48, .78) 0%, rgba(12, 18, 48, .92) 100%); } .pd-carousel__arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .pd-hero-carousel .pd-carousel__slide { transition: none; } } /* ========================================================================== Hero de página con imagen de fondo (examen, contacto, etc.) ========================================================================== */ .pd-hero--image { position: relative; overflow: hidden; padding-top: 54px !important; padding-bottom: 54px !important; } .pd-hero--image > .pd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .pd-hero--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(12, 18, 48, .95) 0%, rgba(12, 18, 48, .86) 45%, rgba(12, 18, 48, .66) 100%); } .pd-hero--image > .pd-container { position: relative; z-index: 2; } .pd-hero--image .pd-lead { color: rgba(255, 255, 255, .82); } /* ---------- legal / long-form document page ---------- */ .pd-legal { max-width: 860px; } .pd-legal__updated { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-muted); margin: 0 0 24px; } .pd-legal h2 { scroll-margin-top: 90px; } .pd-legal h3 { font-family: var(--pd-font-display, var(--font-display)); font-size: 17px; letter-spacing: .02em; color: var(--pd-navy); margin: 28px 0 8px; } .pd-legal p { font-size: 14.5px; line-height: 1.75; color: var(--pd-text); margin: 0 0 14px; } .pd-legal__list { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .pd-legal__list li { font-size: 14.5px; line-height: 1.7; color: var(--pd-text); } .pd-legal__pdf { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); overflow: hidden; margin: 0 auto 48px; background: #fff; } .pd-legal__pdf-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid var(--pd-line); } .pd-legal__pdf-head h3 { margin: 0 0 4px; font-size: 16px; color: var(--pd-navy); } .pd-legal__pdf-head p { margin: 0; font-size: 13px; color: var(--pd-muted); } .pd-legal__pdf-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; } .pd-legal__pdf-frame { display: block; width: 100%; height: 85vh; min-height: 560px; border: 0; background: var(--pd-surface-alt, #f4f6fb); } .pd-legal__pdf-fallback { margin: 0; padding: 12px 22px; font-size: 12.5px; color: var(--pd-muted); border-top: 1px solid var(--pd-line); background: var(--pd-surface-alt, #f4f6fb); } @media (max-width: 640px) { .pd-legal__pdf-actions { margin-left: 0; width: 100%; } .pd-legal__pdf-actions .pd-btn { flex: 1; justify-content: center; } .pd-legal__pdf-frame { height: 70vh; min-height: 420px; } }