/* ========================================================================== TPC METAL — Sistema de diseño editorial Prevención Siglo 21 · Centro homologado Fundación Laboral de la Construcción Dirección: revista impresa premium — Didone de portada + grotesca de texto, papel cálido, tinta acero, un único acento ascua. ========================================================================== */ /* --- 1. TOKENS ----------------------------------------------------------- */ :root{ /* Tinta y papel */ --paper: #F6F4F0; --paper-warm: #EFEBE4; --paper-cold: #E7E9EB; --ink: #0E1114; --ink-soft: #383F46; --steel: #7E868F; --rule: #D6D1C8; --rule-soft: #E4E0D8; /* Acento */ --ember: #C8410D; --ember-deep: #8F2D07; --navy: #14202F; --navy-soft: #1E2E42; /* Rejilla de revista */ --page-max: 1380px; --gutter: clamp(20px, 4.6vw, 68px); --col-gap: clamp(20px, 2.4vw, 36px); /* Ritmo vertical */ --space-xs: 8px; --space-s: 16px; --space-m: 32px; --space-l: clamp(48px, 6vw, 80px); --space-section: clamp(72px, 10vw, 152px); /* Escala tipográfica */ --t-cover: clamp(2.5rem, 6.6vw, 5.6rem); --t-display: clamp(2.2rem, 5.6vw, 4.6rem); --t-h2: clamp(1.8rem, 3.4vw, 2.9rem); --t-h3: clamp(1.15rem, 1.7vw, 1.45rem); --t-lead: clamp(1.2rem, 1.75vw, 1.55rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-caption: 0.8125rem; --t-eyebrow: 0.72rem; /* Familias */ --font-display: "Bodoni Moda", "Didot", "Playfair Display", Georgia, "Times New Roman", serif; --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --measure: 66ch; --measure-narrow: 52ch; } /* --- 2. RESET ------------------------------------------------------------ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-text); font-size:var(--t-body); line-height:1.75; font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; } /* El recorte lateral va en el , no en el . En el body rompia dos cosas: con "hidden" los enlaces del menu dejaban de desplazar la pagina, y con "clip" el cuadro de cookies dejaba de pegarse al borde de abajo (position:fixed pasaba a medirse contra el body recortado). */ html{ overflow-x:hidden; } img,svg,iframe{ max-width:100%; } img{ height:auto; display:block; } a{ color:inherit; } h1,h2,h3,h4{ margin:0; font-weight:inherit; } p{ margin:0 0 1.15em; } ul,ol{ margin:0 0 1.15em; padding-left:1.2em; } li{ margin-bottom:.4em; } hr{ border:0; border-top:1px solid var(--rule); margin:var(--space-l) 0; } /* --- 3. REJILLA ---------------------------------------------------------- */ .grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); } .wrap{ max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); } .bleed{ width:100%; } /* Colocaciones editoriales (asimétricas, no centradas) */ .col-full { grid-column:1 / -1; } .col-main { grid-column:1 / span 8; } .col-side { grid-column:9 / span 4; } .col-lead { grid-column:2 / span 8; } .col-text { grid-column:2 / span 7; } .col-offset{ grid-column:4 / span 8; } .col-half-l{ grid-column:1 / span 6; } .col-half-r{ grid-column:7 / span 6; } .col-quote { grid-column:3 / span 8; } @media (max-width:900px){ .col-main,.col-side,.col-lead,.col-text,.col-offset, .col-half-l,.col-half-r,.col-quote{ grid-column:1 / -1; } } .section{ padding-block:var(--space-section); } .section--tight{ padding-block:clamp(48px,6vw,88px); } .section--dark{ background:var(--navy); color:var(--paper); } .section--dark .eyebrow{ color:#9BB0C6; } .section--dark a{ color:var(--paper); } .section--warm{ background:var(--paper-warm); } /* --- 4. TIPOGRAFÍA ------------------------------------------------------- */ .eyebrow{ font-family:var(--font-text); font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ember); margin:0 0 var(--space-s); display:block; } .eyebrow--steel{ color:var(--steel); } .cover-title{ font-family:var(--font-display); font-size:var(--t-cover); font-weight:700; line-height:.90; letter-spacing:-.025em; margin:0; text-wrap:balance; } .display{ font-family:var(--font-display); font-size:var(--t-display); font-weight:600; line-height:1.02; letter-spacing:-.018em; text-wrap:balance; } h2.display,h2.h2{ margin-bottom:var(--space-m); } .h2{ font-family:var(--font-display); font-size:var(--t-h2); font-weight:600; line-height:1.10; letter-spacing:-.012em; text-wrap:balance; } .h3{ font-family:var(--font-text); font-size:var(--t-h3); font-weight:650; line-height:1.3; letter-spacing:-.005em; margin-bottom:var(--space-xs); } .lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-soft); max-width:var(--measure); font-weight:380; } .body{ max-width:var(--measure); } .body--narrow{ max-width:var(--measure-narrow); } .small{ font-size:var(--t-small); color:var(--ink-soft); } .caption{ font-size:var(--t-caption); line-height:1.5; color:var(--steel); letter-spacing:.01em; margin-top:var(--space-s); } .caption strong{ color:var(--ink-soft); font-weight:600; } /* Capitular de revista */ .dropcap::first-letter{ font-family:var(--font-display); float:left; font-size:4.4em; line-height:.78; padding:.06em .12em 0 0; font-weight:700; color:var(--ember); } /* Cita destacada — sobredimensionada y desplazada */ .pullquote{ font-family:var(--font-display); font-size:clamp(1.7rem, 3.5vw, 3.1rem); line-height:1.14; font-weight:500; font-style:italic; letter-spacing:-.015em; margin:0; text-wrap:balance; } .pullquote::before{ content:"\201C"; margin-left:-.42em; color:var(--ember); } .pullquote::after{ content:"\201D"; color:var(--ember); } .pullquote-source{ display:block; margin-top:var(--space-m); font-family:var(--font-text); font-style:normal; font-size:var(--t-caption); letter-spacing:.18em; text-transform:uppercase; color:var(--steel); } /* Reglas y folios */ .rule{ border-top:1px solid var(--rule); margin-block:var(--space-l); } .rule--heavy{ border-top:2px solid var(--ink); } .folio{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-m); border-top:1px solid var(--rule); padding-top:var(--space-s); font-size:var(--t-caption); letter-spacing:.16em; text-transform:uppercase; color:var(--steel); } /* --- 5. CABECERA / MASTHEAD ---------------------------------------------- */ .masthead{ position:sticky; top:0; z-index:60; background:rgba(246,244,240,.94); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--rule); } .masthead__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-m); max-width:var(--page-max); margin-inline:auto; padding:14px var(--gutter); } .logo{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; } .logo__name{ font-family:var(--font-display); font-size:1.42rem; font-weight:700; letter-spacing:-.02em; line-height:1; } .logo__mark{ font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); border:1px solid var(--ember); padding:3px 6px; border-radius:2px; } .nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); } .nav a{ text-decoration:none; font-size:.83rem; font-weight:520; letter-spacing:.045em; color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent; white-space:nowrap; } .nav a:hover,.nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--ember); } .nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); } @media (max-width:900px){ .nav{ display:none; } } /* Barra de teléfonos — visible siempre, tocable en móvil */ .callbar{ background:var(--ink); color:var(--paper); } .callbar__inner{ max-width:var(--page-max); margin-inline:auto; padding:9px var(--gutter); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(10px,2vw,26px); font-size:.8rem; letter-spacing:.05em; } .callbar__label{ color:#9AA2AA; text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; font-weight:600; } .callbar a{ color:var(--paper); text-decoration:none; font-weight:620; letter-spacing:.03em; white-space:nowrap; } .callbar a:hover{ color:#FFB38A; } .callbar a::before{ content:"\203A\00a0"; color:var(--ember); } /* --- 6. PORTADA (COVER STORY) -------------------------------------------- */ .cover{ position:relative; background:var(--navy); color:var(--paper); overflow:hidden; isolation:isolate; } .cover__art{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; } .cover__scrim{ position:absolute; inset:0; z-index:-1; background: linear-gradient(100deg, rgba(12,20,32,.94) 0%, rgba(12,20,32,.80) 46%, rgba(12,20,32,.34) 100%), linear-gradient(0deg, rgba(10,16,26,.75) 0%, rgba(10,16,26,0) 55%); } .cover__inner{ max-width:var(--page-max); margin-inline:auto; padding:clamp(60px,8vw,124px) var(--gutter) clamp(48px,6vw,88px); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); } .cover__type{ grid-column:1 / span 9; } @media (max-width:900px){ .cover__type{ grid-column:1 / -1; } } .cover__kicker{ font-size:var(--t-eyebrow); font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:#F0A57A; margin:0 0 var(--space-m); display:flex; flex-wrap:wrap; align-items:center; gap:.9em; } .cover__kicker span::before{ content:"\2014"; margin-right:.7em; color:#5C7089; } .cover__kicker span:first-child::before{ content:none; } .cover-title em{ font-style:italic; color:#F2A87C; } .cover__standfirst{ margin-top:clamp(24px,3vw,44px); font-size:var(--t-lead); line-height:1.55; font-weight:340; color:#D3DAE2; max-width:44ch; } .cover__meta{ margin-top:clamp(28px,3.5vw,52px); display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,52px); border-top:1px solid rgba(255,255,255,.18); padding-top:var(--space-m); } .cover__meta div{ min-width:118px; } .cover__meta dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:#7E93AB; font-weight:600; margin-bottom:6px; } .cover__meta dd{ margin:0; font-family:var(--font-display); font-size:1.55rem; font-weight:600; line-height:1.1; } /* --- 7. BOTONES ---------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-text); font-size:.86rem; font-weight:640; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:15px 30px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:2px; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; cursor:pointer; } .btn:hover,.btn:focus-visible{ background:var(--ember); border-color:var(--ember); color:#fff; transform:translateY(-1px); } .btn--ember{ background:var(--ember); border-color:var(--ember); color:#fff; } .btn--ember:hover,.btn--ember:focus-visible{ background:var(--ember-deep); border-color:var(--ember-deep); } .btn--ghost{ background:transparent; color:var(--ink); } .btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .btn--on-dark{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--paper); } .btn--on-dark:hover,.btn--on-dark:focus-visible{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:var(--space-m); } /* --- Boton destacado: mas grande y con barrido de laser -------------------- */ .btn--grande{ font-size:1.02rem; padding:20px 44px; letter-spacing:.1em; border-radius:3px; box-shadow:0 6px 22px rgba(200,65,13,.34); } .btn--laser{ position:relative; overflow:hidden; isolation:isolate; animation:latido-ember 2.6s ease-in-out infinite; } /* El barrido: una franja de luz que cruza el boton */ .btn--laser::after{ content:""; position:absolute; z-index:-1; top:-60%; bottom:-60%; width:38%; left:-50%; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 28%, rgba(255,255,255,.72) 50%,rgba(255,255,255,.10) 72%,transparent 100%); transform:skewX(-18deg); animation:laser-barrido 3.1s cubic-bezier(.5,0,.5,1) infinite; } .btn--laser:hover{ animation:none; transform:translateY(-1px); } .btn--laser:hover::after{ animation-duration:1.1s; } @keyframes laser-barrido{ 0% { left:-50%; } 55% { left:118%; } 100% { left:118%; } } @keyframes latido-ember{ 0%,100%{ box-shadow:0 6px 22px rgba(200,65,13,.34); } 50% { box-shadow:0 6px 30px rgba(200,65,13,.62); } } /* Quien pida menos movimiento, no ve ni barrido ni latido */ @media (prefers-reduced-motion:reduce){ .btn--laser,.btn--laser::after{ animation:none; } .btn--laser::after{ display:none; } } @media (max-width:640px){ .btn--grande{ font-size:.94rem; padding:17px 32px; } } /* --- 8. PLACAS DE IMAGEN (full-bleed y recortes editoriales) -------------- */ figure{ margin:0; } .plate{ position:relative; overflow:hidden; background:var(--paper-cold); } .plate img,.plate svg{ width:100%; height:100%; object-fit:cover; display:block; } .plate--bleed{ width:100vw; margin-left:calc(50% - 50vw); } .plate--tall{ aspect-ratio:3/4; } .plate--wide{ aspect-ratio:16/9; } .plate--pano{ aspect-ratio:21/9; } .plate--square{ aspect-ratio:1/1; } /* Duotono editorial: unifica fotografías de orígenes distintos */ .plate--duo img{ filter:grayscale(1) contrast(1.06); mix-blend-mode:luminosity; } .plate--duo{ background:linear-gradient(150deg,var(--navy) 0%,#3E4A57 60%,#8A6A55 100%); } /* --- 9. ÍNDICE DE CURSOS ------------------------------------------------- */ .index-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); } .index-list li{ margin:0; border-bottom:1px solid var(--rule); } .index-item{ display:grid; grid-template-columns:minmax(0,3.2fr) minmax(0,5fr) minmax(0,1.4fr); gap:var(--col-gap); align-items:baseline; padding-block:clamp(20px,2.4vw,30px); text-decoration:none; } @media (max-width:760px){ .index-item{ grid-template-columns:1fr; gap:6px; } } .index-item__no{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--ember); letter-spacing:.02em; } .index-item__title{ font-family:var(--font-display); font-size:clamp(1.25rem,2.2vw,1.85rem); font-weight:600; line-height:1.15; } .index-item__desc{ font-size:var(--t-small); color:var(--ink-soft); margin:.45em 0 0; max-width:52ch; } .index-item__meta{ font-size:var(--t-caption); letter-spacing:.16em; text-transform:uppercase; color:var(--steel); text-align:right; white-space:nowrap; } @media (max-width:760px){ .index-item__meta{ text-align:left; } } /* --- 10. FICHAS / TARJETAS ----------------------------------------------- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:var(--col-gap); } .card{ border-top:2px solid var(--ink); padding-top:var(--space-s); } .card__no{ font-family:var(--font-display); font-size:.95rem; color:var(--ember); letter-spacing:.16em; margin-bottom:var(--space-s); display:block; } .card p{ font-size:var(--t-small); color:var(--ink-soft); margin-bottom:0; } .section--dark .card{ border-top-color:rgba(255,255,255,.32); } .section--dark .card p{ color:#B9C4CF; } /* --- 11. CALENDARIO ------------------------------------------------------ */ .calendar-frame{ border:1px solid var(--rule); background:#fff; padding:clamp(8px,1.2vw,16px); } .calendar-frame iframe{ width:100%; height:640px; border:0; display:block; } @media (max-width:760px){ .calendar-frame iframe{ height:520px; } } .schedule{ column-count:2; column-gap:var(--col-gap); } @media (max-width:820px){ .schedule{ column-count:1; } } .schedule h3{ font-family:var(--font-text); font-size:var(--t-caption); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin:0 0 var(--space-s); break-after:avoid; } .schedule h3:not(:first-child){ margin-top:var(--space-m); } .schedule dl{ margin:0; } .schedule dt{ font-weight:700; font-size:var(--t-caption); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-top:.9em; } .schedule dd{ margin:.15em 0 0; font-size:var(--t-small); color:var(--ink-soft); padding-bottom:.6em; border-bottom:1px solid var(--rule-soft); break-inside:avoid; } /* --- 12. FORMULARIO ------------------------------------------------------ */ .form{ display:grid; gap:var(--space-m); } .field{ display:grid; gap:8px; } .field label{ font-size:var(--t-caption); font-weight:640; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); } .field .req{ color:var(--ember); } .field input,.field textarea,.field select{ font-family:var(--font-text); font-size:1rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--rule); padding:12px 2px; border-radius:0; transition:border-color .18s ease; width:100%; } .field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-bottom-color:var(--ember); border-bottom-width:2px; padding-bottom:11px; } .field textarea{ min-height:132px; resize:vertical; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-m); } @media (max-width:620px){ .field-row{ grid-template-columns:1fr; } } .consent{ display:flex; gap:12px; align-items:flex-start; font-size:var(--t-small); color:var(--ink-soft); } .consent input{ width:18px; height:18px; margin-top:4px; flex:0 0 auto; accent-color:var(--ember); } .legal-note{ font-size:var(--t-caption); line-height:1.65; color:var(--steel); border-left:2px solid var(--rule); padding-left:var(--space-s); } .legal-note strong{ color:var(--ink-soft); } /* --- 13. FAQ / GEO ------------------------------------------------------- */ .faq{ border-top:2px solid var(--ink); } .faq__item{ border-bottom:1px solid var(--rule); padding-block:clamp(24px,3vw,38px); } .faq__q{ font-family:var(--font-display); font-size:clamp(1.2rem,2.1vw,1.7rem); font-weight:600; line-height:1.2; margin-bottom:var(--space-s); } .faq__a{ max-width:var(--measure); color:var(--ink-soft); margin-bottom:0; } /* --- 14. CONTACTO / DATOS ------------------------------------------------ */ .datalist{ list-style:none; margin:0; padding:0; } .datalist li{ display:grid; grid-template-columns:minmax(96px,140px) 1fr; gap:var(--space-s); padding-block:14px; border-bottom:1px solid var(--rule); margin:0; } @media (max-width:560px){ .datalist li{ grid-template-columns:1fr; gap:2px; } } .datalist dt,.datalist .k{ font-size:var(--t-caption); letter-spacing:.16em; text-transform:uppercase; color:var(--steel); font-weight:600; } .datalist .v{ font-size:var(--t-small); } .datalist a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ember); } .datalist a:hover{ color:var(--ember); } .map-frame{ border:1px solid var(--rule); background:#fff; padding:8px; } .map-frame iframe{ width:100%; height:460px; border:0; display:block; } /* --- 15. SELLOS EMAGISTER ------------------------------------------------ */ .badges{ display:flex; flex-wrap:wrap; gap:var(--space-m); align-items:center; } .badges a{ display:block; text-decoration:none; } .badges img{ display:block; max-height:163px; width:auto; } /* --- 16. TEXTO LEGAL ----------------------------------------------------- */ .legal-body{ max-width:78ch; } .legal-body h2{ font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.85rem); font-weight:600; line-height:1.2; margin:var(--space-l) 0 var(--space-s); } .legal-body h3{ font-family:var(--font-text); font-size:1.02rem; font-weight:660; letter-spacing:-.005em; margin:var(--space-m) 0 var(--space-xs); } .legal-body p,.legal-body li{ font-size:var(--t-small); color:var(--ink-soft); } .legal-body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--ember); text-underline-offset:3px; } /* --- 17. PIE ------------------------------------------------------------- */ .footer{ background:var(--ink); color:#B7BFC7; padding-block:var(--space-l) var(--space-m); } .footer a{ color:var(--paper); text-decoration:none; } .footer a:hover{ color:#FFB38A; } .footer .h3{ color:var(--paper); } .footer__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--col-gap); max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); } .footer__brand{ grid-column:1 / span 4; } .footer__col{ grid-column:span 3; } @media (max-width:900px){ .footer__brand{ grid-column:1 / -1; } .footer__col{ grid-column:span 6; } } @media (max-width:560px){ .footer__col{ grid-column:1 / -1; } } .footer__eyebrow{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#77818B; font-weight:600; margin:0 0 var(--space-s); } .footer ul{ list-style:none; margin:0; padding:0; font-size:var(--t-small); } .footer li{ margin-bottom:.5em; } .footer__base{ max-width:var(--page-max); margin:var(--space-l) auto 0; padding:var(--space-m) var(--gutter) 0; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:var(--space-s) var(--space-m); justify-content:space-between; font-size:var(--t-caption); color:#77818B; letter-spacing:.04em; } /* --- 18. ACCESIBILIDAD --------------------------------------------------- */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ember); color:#fff; padding:12px 20px; font-weight:600; } .skip-link:focus{ left:0; } :focus-visible{ outline:2px solid var(--ember); outline-offset:3px; } .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* --- 19. IMPRESIÓN ------------------------------------------------------- */ @media print{ .masthead,.callbar,.footer,.calendar-frame,.map-frame,.btn-row{ display:none!important; } body{ background:#fff; color:#000; font-size:11pt; } .cover{ background:#fff; color:#000; } .cover__art,.cover__scrim{ display:none; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; } } /* ========================================================================== 20. MÓVIL — el canal principal de entrada ========================================================================== */ /* --- 20.1 Menú desplegable móvil (sin JavaScript) ------------------------ */ .mnav{ display:none; position:relative; } .mnav > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 14px; border:1px solid var(--ink); border-radius:2px; font-size:.78rem; font-weight:640; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:transparent; -webkit-tap-highlight-color:transparent; } .mnav > summary::-webkit-details-marker{ display:none; } .mnav__bars{ width:17px; height:11px; display:block; position:relative; flex:0 0 auto; border-top:2px solid currentColor; border-bottom:2px solid currentColor; } .mnav__bars::after{ content:""; position:absolute; left:0; top:4px; width:100%; border-top:2px solid currentColor; } .mnav[open] > summary{ background:var(--ink); color:var(--paper); } .mnav[open] .mnav__bars{ border-color:var(--paper); } .mnav__list{ position:absolute; right:0; top:calc(100% + 10px); z-index:80; margin:0; padding:6px 0; list-style:none; min-width:min(78vw, 300px); background:var(--paper); border:1px solid var(--rule); box-shadow:0 18px 44px rgba(14,17,20,.18); border-radius:3px; } .mnav__list li{ margin:0; } .mnav__list a{ display:block; padding:14px 20px; min-height:44px; text-decoration:none; color:var(--ink); font-size:.98rem; font-weight:520; border-bottom:1px solid var(--rule-soft); } .mnav__list li:last-child a{ border-bottom:0; } .mnav__list a:active{ background:var(--paper-warm); } /* --- 20.2 Barra fija inferior de acción (solo móvil) --------------------- */ .mobilebar{ display:none; } .mobilebar__a{ flex:1 1 0; min-height:56px; display:flex; align-items:center; justify-content:center; gap:.45em; text-decoration:none; text-align:center; font-size:.86rem; font-weight:660; letter-spacing:.06em; text-transform:uppercase; background:var(--ink); color:var(--paper); -webkit-tap-highlight-color:transparent; } .mobilebar__a--call{ background:var(--ember); color:#fff; } .mobilebar__a:active{ filter:brightness(1.18); } /* --- 20.3 Ajustes hasta 900 px ------------------------------------------ */ @media (max-width:900px){ .mnav{ display:block; } .mobilebar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; border-top:1px solid rgba(255,255,255,.16); padding-bottom:env(safe-area-inset-bottom); } /* Hueco para que la barra fija no tape el final de la pagina */ body{ padding-bottom:56px; } /* Barra superior de telefonos: dejar solo lo tocable */ .callbar__inner{ justify-content:center; gap:18px; padding-block:11px; } .callbar__label{ display:none; } .callbar a[href^="mailto:"]{ display:none; } .callbar a{ min-height:26px; display:inline-flex; align-items:center; font-size:.9rem; } .masthead__inner{ padding-block:11px; } .logo__name{ font-size:1.24rem; } /* Ritmo vertical mas compacto */ :root{ --space-section: clamp(56px, 9vw, 88px); --col-gap: 22px; } .cover__inner{ padding-block:clamp(44px,9vw,72px) clamp(40px,7vw,64px); } .cover__standfirst{ max-width:none; } .cover__meta{ gap:20px 30px; } .cover__meta div{ min-width:calc(50% - 15px); } /* Botones a ancho completo y bien tocables */ .btn{ min-height:52px; padding:15px 26px; } .btn-row{ gap:12px; } .btn-row .btn{ flex:1 1 240px; justify-content:center; } .index-item__meta{ color:var(--ember); } .plate--pano{ aspect-ratio:16/10; } .calendar-frame iframe{ height:520px; } } /* --- 20.4 Ajustes hasta 620 px (móviles) -------------------------------- */ @media (max-width:620px){ :root{ --t-body:1.0625rem; } body{ line-height:1.72; } .cover-title{ line-height:.96; letter-spacing:-.018em; } .cover__kicker{ gap:.55em; font-size:.66rem; letter-spacing:.18em; } .cover__meta dd{ font-size:1.3rem; } .dropcap::first-letter{ font-size:3.4em; padding-right:.1em; } .pullquote{ font-size:clamp(1.5rem,7vw,2rem); } .pullquote::before{ margin-left:0; } .index-item{ padding-block:22px; } .index-item__no{ font-size:.82rem; letter-spacing:.1em; } .index-item__title{ font-size:1.32rem; } .index-item__desc{ font-size:.94rem; } /* Formulario: campos altos y comodos para el pulgar */ .field input,.field textarea,.field select{ font-size:16px; padding:14px 2px; } .field textarea{ min-height:120px; } .consent input{ width:24px; height:24px; } .form{ gap:26px; } .datalist li{ grid-template-columns:1fr; gap:3px; padding-block:13px; } .badges{ gap:20px; justify-content:flex-start; } .badges img{ max-height:133px; } .calendar-frame{ padding:0; border:0; } .calendar-frame iframe{ height:460px; } .map-frame{ padding:0; } .map-frame iframe{ height:340px; } .footer__grid{ gap:30px; } .footer__base{ flex-direction:column; gap:8px; } /* Evitar que URLs y correos largos rompan la maqueta */ .datalist a,.legal-body a,.footer a{ overflow-wrap:anywhere; } } /* --- 20.5 Móviles estrechos (<=380 px) ---------------------------------- */ @media (max-width:380px){ :root{ --gutter:18px; } .callbar__inner{ gap:12px; } .callbar a{ font-size:.85rem; } .mobilebar__a{ font-size:.78rem; letter-spacing:.04em; } .cover__meta div{ min-width:100%; } } /* --- 20.6 Barra fija: nunca en impresión -------------------------------- */ @media print{ .mobilebar,.mnav{ display:none !important; } } /* --- 21. LEMA DE PORTADA (rótulo histórico conservado) ------------------- */ .cover__lema{ font-family:var(--font-text); font-size:clamp(.95rem, 1.35vw, 1.18rem); font-weight:520; letter-spacing:.02em; color:#E8D2C2; margin:0 0 clamp(12px,1.4vw,20px); padding-bottom:clamp(12px,1.4vw,18px); border-bottom:1px solid rgba(255,255,255,.20); max-width:24ch; } @media (max-width:620px){ .cover__lema{ font-size:1rem; max-width:none; } } /* ========================================================================== 22. CURSOS POR SEMANAS (bloque estático generado por herramientas/cursos.py) Los nombres de clase los fija el generador: no renombrar. ========================================================================== */ .cursos-nota{ font-size:var(--t-small); color:var(--ink-soft); max-width:var(--measure); margin:0 0 var(--space-l); } .cursos-semanas .semana{ margin-bottom:var(--space-l); break-inside:avoid; } .semana-titulo{ font-family:var(--font-text); font-size:var(--t-caption); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin:0 0 var(--space-s); padding-bottom:10px; border-bottom:2px solid var(--ink); } .cursos-semanas .dia{ display:grid; grid-template-columns:minmax(0,2.6fr) minmax(0,7fr); gap:var(--col-gap); align-items:start; padding-block:clamp(16px,1.8vw,22px); border-bottom:1px solid var(--rule); } .dia-titulo{ margin:0; font-family:var(--font-display); font-size:1.12rem; font-weight:600; line-height:1.25; display:flex; flex-direction:column; gap:2px; } .dia-nombre{ color:var(--ink); } .dia-titulo time{ font-family:var(--font-text); font-size:var(--t-caption); font-weight:600; letter-spacing:.1em; color:var(--steel); } .dia-cursos{ list-style:none; margin:0; padding:0; } .dia-cursos li{ margin:0 0 .5em; font-size:var(--t-small); line-height:1.55; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em; } .dia-cursos li:last-child{ margin-bottom:0; } .curso-hora{ font-family:var(--font-text); font-size:var(--t-caption); font-weight:700; letter-spacing:.04em; color:var(--ink); background:var(--paper); border:1px solid var(--rule); padding:2px 8px; border-radius:2px; white-space:nowrap; } .curso-nombre{ color:var(--ink); font-weight:520; } .curso-periodo{ color:var(--steel); font-size:var(--t-caption); } .curso-grupos{ font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); border:1px solid var(--ember); padding:1px 7px; border-radius:999px; white-space:nowrap; } .cursos-semanas .dia.online .dia-nombre{ color:var(--ember); } .cursos-semanas .dia.online .curso-hora{ display:none; } @media (max-width:760px){ .cursos-semanas .dia{ grid-template-columns:1fr; gap:10px; padding-block:18px; } .dia-titulo{ flex-direction:row; align-items:baseline; gap:.6em; } .dia-cursos li{ gap:.4em; } } /* --- 23. CITA NORMATIVA LITERAL ----------------------------------------- */ .cita-norma{ margin:var(--space-m) 0; padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px); background:var(--paper); border-left:3px solid var(--ember); } .cita-norma p{ font-size:var(--t-small); line-height:1.7; color:var(--ink-soft); margin-bottom:.9em; } .cita-norma p:last-child{ margin-bottom:0; } .section--warm .cita-norma{ background:#FBF9F6; } /* --- 24. BARRA MÓVIL: los dos teléfonos siempre ------------------------- */ .mobilebar__a--call2{ background:var(--ink); color:var(--paper); } .mobilebar__a--call2:active{ filter:brightness(1.35); } @media (max-width:380px){ .mobilebar__a{ font-size:.8rem; letter-spacing:.02em; gap:.3em; } } /* ========================================================================== 25. FORMULARIO: nuestros datos separados de los del alumno, y avisos ========================================================================== */ .bloque-datos, .bloque-form{ border:1px solid rgba(255,255,255,.20); border-radius:3px; padding:clamp(22px,2.6vw,34px); height:100%; } .bloque-form{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.30); } .bloque-datos__titulo{ font-size:var(--t-caption); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin:0 0 var(--space-m); padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.20); } .bloque-form__ayuda{ font-size:var(--t-small); line-height:1.6; color:#C3CCD6; margin-bottom:var(--space-l); } .bloque-form__ayuda strong{ color:var(--paper); } .datalist--dark li{ border-bottom-color:rgba(255,255,255,.16); } .datalist--dark .k{ color:#7E93AB; } .datalist--dark .v, .datalist--dark .v a{ color:#D6DEE6; } .datalist--dark .v a{ border-bottom-color:var(--ember); } .datalist--dark .v a:hover{ color:#FFB38A; } /* Campos sobre fondo oscuro */ .section--dark .field label{ color:#9BB0C6; } .section--dark .field input, .section--dark .field textarea, .section--dark .field select{ color:var(--paper); border-bottom-color:rgba(255,255,255,.32); } .section--dark .field input::placeholder, .section--dark .field textarea::placeholder{ color:#6E7F91; } .section--dark .field select option{ color:#0E1114; } .section--dark .consent{ color:#C3CCD6; } .section--dark .consent a{ color:var(--paper); } .opc{ font-weight:400; letter-spacing:.06em; text-transform:none; color:var(--steel); } .obligatorios{ font-size:var(--t-caption); color:var(--steel); margin:0; } /* Aviso de lo que falta */ .form-error{ border:1px solid var(--ember); border-left-width:4px; background:rgba(200,65,13,.10); padding:clamp(16px,2vw,22px); border-radius:2px; } .form-error__titulo{ font-weight:700; font-size:1rem; color:var(--ember); margin:0 0 .6em; letter-spacing:.01em; } .section--dark .form-error__titulo{ color:#FF9A63; } .form-error ul{ margin:0; padding-left:1.15em; } .form-error li{ font-size:var(--t-small); line-height:1.55; margin-bottom:.35em; } .section--dark .form-error li{ color:#E4D2C8; } .section--dark .form-error strong{ color:#fff; } .field--error input, .field--error textarea, .field--error select{ border-bottom-color:var(--ember) !important; border-bottom-width:2px; } .field--error label{ color:var(--ember) !important; } .consent.field--error span{ color:var(--ember); } @media (max-width:900px){ .bloque-datos{ margin-bottom:var(--space-m); } .bloque-datos,.bloque-form{ padding:clamp(18px,4vw,26px); } } /* --- 17. BANNER DE COOKIES ----------------------------------------------- */ .ck-banner{ position:fixed; left:0; right:0; bottom:0; z-index:9998; background:var(--paper); color:var(--ink); border-top:3px solid var(--ember); box-shadow:0 -6px 34px rgba(14,17,20,.22); padding:20px clamp(16px,4vw,40px); display:none; } .ck-banner.visible{ display:block; animation:ck-aparecer .3s ease both; } /* En estrecho manda el reparto en dos (texto que se desplaza + botones fijos) */ @media (max-width:900px), (max-height:560px){ .ck-banner.visible{ display:flex; } } /* Solo se desvanece, sin desplazarlo. Antes entraba con translateY(100%) -> 0. Si esa animacion no llega a correr (pestana en segundo plano, movil ahorrando bateria, equipo lento), el cuadro se quedaba congelado en el primer fotograma: bajado justo su propia altura, con los botones fuera de la pantalla. Pareciera que el aviso de cookies no tuviera botones. Con opacidad, si la animacion no corre el cuadro simplemente aparece, ya en su sitio. */ @keyframes ck-aparecer{ from{ opacity:0; } to{ opacity:1; } } .ck-banner__inner{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between; } .ck-banner__texto{ flex:1 1 420px; } .ck-banner__texto p{ margin:0; font-size:.87rem; line-height:1.55; color:var(--ink-soft); } .ck-titulo{ font-family:var(--font-text); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.74rem !important; color:var(--ink) !important; margin-bottom:6px !important; } .ck-banner__texto a{ color:var(--ember); text-underline-offset:3px; } .ck-banner__acciones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } /* Rechazar y Aceptar, exactamente igual de visibles: lo exige la AEPD */ .ck-btn{ font-family:var(--font-text); font-size:.79rem; font-weight:640; letter-spacing:.07em; text-transform:uppercase; padding:13px 26px; border:1px solid var(--ink); border-radius:2px; background:var(--ink); color:var(--paper); cursor:pointer; transition:background .18s ease,color .18s ease; } .ck-btn:hover,.ck-btn:focus-visible{ background:var(--ember); border-color:var(--ember); color:#fff; } .ck-btn--fuerte{ background:var(--ember); border-color:var(--ember); color:#fff; } .ck-btn--fuerte:hover{ background:var(--ember-deep); border-color:var(--ember-deep); } .ck-enlace{ background:none; border:0; cursor:pointer; color:var(--ink-soft); font-family:var(--font-text); font-size:.79rem; text-decoration:underline; text-underline-offset:3px; padding:13px 6px; } .ck-enlace:hover{ color:var(--ember); } /* Segunda capa */ .ck-overlay{ position:fixed; inset:0; z-index:9999; display:none; background:rgba(14,17,20,.6); padding:20px; align-items:center; justify-content:center; } .ck-overlay.visible{ display:flex; } .ck-panel{ background:var(--paper); width:min(620px,100%); max-height:88vh; overflow:auto; border-radius:3px; box-shadow:0 24px 70px rgba(14,17,20,.4); } .ck-panel__cab{ padding:26px 28px 18px; border-bottom:1px solid var(--paper-cold); } .ck-panel__cab h2{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin:0 0 6px; } .ck-panel__cab p{ margin:0; font-size:.85rem; color:var(--ink-soft); } .ck-panel__cuerpo{ padding:6px 28px; } .ck-grupo{ display:flex; gap:20px; align-items:flex-start; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--paper-cold); } .ck-grupo h3{ font-family:var(--font-text); font-size:.95rem; font-weight:660; margin:0 0 4px; } .ck-grupo p{ margin:0; font-size:.82rem; color:var(--ink-soft); line-height:1.5; } .ck-panel__pie{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; padding:20px 28px 26px; } /* Interruptor */ .ck-interruptor{ position:relative; flex:0 0 auto; width:48px; height:27px; cursor:pointer; } .ck-interruptor input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; } .ck-interruptor span{ position:absolute; inset:0; background:var(--steel); border-radius:27px; transition:background .2s ease; } .ck-interruptor span::before{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; background:#fff; border-radius:50%; transition:transform .2s ease; } .ck-interruptor input:checked + span{ background:var(--ember); } .ck-interruptor input:checked + span::before{ transform:translateX(21px); } .ck-interruptor input:disabled + span{ opacity:.5; cursor:not-allowed; } .ck-interruptor input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; } /* El boton flotante «Cookies» se quito a peticion de Pedro. Para poder cambiar de opinion queda el enlace «Cookies» del pie. */ /* Pantallas estrechas o bajas: los BOTONES SIEMPRE A LA VISTA. Antes el cuadro entero se desplazaba, y con el texto largo los botones quedaban fuera de la pantalla: parecia que no hubiera botones. Ahora el cuadro se reparte en dos, y lo unico que se desplaza es el texto. */ @media (max-width:900px), (max-height:560px){ .ck-banner{ padding:16px; max-height:82vh; overflow:hidden; } /* sin display: lo pone .visible */ .ck-banner__inner{ display:flex; flex-direction:column; gap:14px; max-height:100%; width:100%; min-height:0; } .ck-banner__texto{ flex:1 1 auto; min-height:0; overflow-y:auto; /* solo se desplaza el texto */ -webkit-overflow-scrolling:touch; } .ck-banner__acciones{ flex:0 0 auto; /* los botones no se encogen */ width:100%; gap:8px; padding-top:12px; border-top:1px solid var(--paper-cold); } .ck-banner__acciones .ck-btn{ flex:1 1 0; padding:14px 8px; min-height:46px; } .ck-enlace{ flex:1 1 100%; text-align:center; padding:10px 6px; } } @media (max-width:640px){ .ck-banner__texto p{ font-size:.82rem; line-height:1.5; } .ck-panel{ max-height:84vh; } .ck-panel__pie .ck-btn{ flex:1 1 100%; } } @media (prefers-reduced-motion:reduce){ .ck-banner.visible{ animation:none; opacity:1; } } /* --- 18. DURACIONES DE LA PORTADA ---------------------------------------- */ .duraciones{ margin-top:clamp(20px,2.4vw,30px); } .duraciones__titulo{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 10px; } .duraciones__lista{ list-style:none; margin:0; padding:0; display:grid; gap:7px; } .duraciones__lista li{ display:flex; align-items:baseline; gap:12px; font-size:.87rem; line-height:1.45; color:rgba(255,255,255,.86); } .duraciones__h{ flex:0 0 46px; font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--paper); font-variant-numeric:tabular-nums; } .duraciones__q{ flex:1 1 auto; } .duraciones__lista li.es-top .duraciones__h{ color:#F3A183; } .duraciones__sello{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; margin-left:10px; padding:3px 9px; border-radius:999px; white-space:nowrap; background:var(--ember); color:#fff; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .duraciones__sello svg{ flex:0 0 auto; } @media (max-width:640px){ .duraciones__lista li{ font-size:.83rem; flex-wrap:wrap; } .duraciones__h{ flex:0 0 42px; } .duraciones__sello{ margin-left:0; margin-top:4px; } } /* --- 19. ESPECIALIDADES DEL METAL ---------------------------------------- */ .cards--especialidades{ list-style:none; margin:0; padding:0; } .cards--especialidades{ display:grid; gap:var(--col-gap); grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:900px){ .cards--especialidades{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .cards--especialidades{ grid-template-columns:1fr; } } /* Blog */ .articulo{max-width:var(--measure)}.articulo h2{margin:2.2rem 0 .8rem;font-family:var(--font-display);font-size:1.7rem;line-height:1.15}.articulo h3{margin:1.8rem 0 .6rem;font-size:1.15rem}.articulo p{margin:0 0 1.1rem}.articulo ul,.articulo ol{margin:0 0 1.1rem;padding-left:1.4rem}.articulo li{margin-bottom:.4rem}.articulo blockquote{margin:1.4rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--ember);background:var(--paper-warm)}.articulo blockquote p{margin:0;font-size:.95rem}.entrada-meta{font-size:.9rem;color:var(--ink-soft);margin-top:1rem}.entrada-cat{font-weight:600;color:var(--ember);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}.entrada-blog h3{margin:.4rem 0 .5rem;font-family:var(--font-display);font-size:1.35rem;line-height:1.2}.entrada-blog h3 a{color:inherit;text-decoration:none}.entrada-blog h3 a:hover{color:var(--ember)}.entrada-blog .mas{font-weight:600;color:var(--ember);text-decoration:none}.entrada-blog .mas:hover{text-decoration:underline}