/* ===================================================================== ADESO — hoja de estilos del sitio público Las variables de color las inyecta PHP en el a partir de la configuración del panel, así se puede cambiar la identidad sin tocar CSS. ===================================================================== */ /* --------------------------------------------------------------------- 1. Base --------------------------------------------------------------------- */ :root{ --ink: #0B1F1C; --ink-2: #334743; --mute: #61736F; --line: #E4EAE8; --line-2: #EEF3F1; --bg: #FFFFFF; --bg-suave: #F5F8F7; --bg-hondo: #061E1A; --radio-xs: 8px; --radio-s: 11px; --radio-m: 16px; --radio-l: 24px; --radio-xl: 32px; --sombra-1: 0 1px 2px rgba(11,31,28,.05), 0 1px 3px rgba(11,31,28,.04); --sombra-2: 0 4px 12px rgba(11,31,28,.06), 0 2px 4px rgba(11,31,28,.04); --sombra-3: 0 18px 40px -18px rgba(11,31,28,.28), 0 4px 12px rgba(11,31,28,.05); --sombra-4: 0 32px 64px -28px rgba(6,30,26,.45); --ancho: 1180px; --gutter: clamp(1.1rem, 4vw, 2rem); --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --transicion: 200ms cubic-bezier(.4,0,.2,1); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--fuente); font-size:1rem; line-height:1.65; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,h5{ margin:0; color:var(--ink); font-weight:800; line-height:1.18; letter-spacing:-.022em; } p{ margin:0; } img,svg{ max-width:100%; } img{ height:auto; display:block; } a{ color:var(--brand-700); text-decoration:none; } a:hover{ color:var(--brand-800); } button{ font:inherit; } :focus-visible{ outline:3px solid var(--brand-300); outline-offset:2px; border-radius:4px; } /* Salto al contenido, para quien navega con teclado */ .saltar{ position:absolute; left:1rem; top:-4rem; z-index:200; background:var(--brand-700); color:#fff; padding:.7rem 1.2rem; border-radius:var(--radio-s); font-weight:650; transition:top var(--transicion); } .saltar:focus{ top:1rem; color:#fff; } .contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); } .ico{ width:1.25em; height:1.25em; flex:none; } .solo-lectores{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* --------------------------------------------------------------------- 2. Botones --------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.78rem 1.4rem; border:1px solid transparent; border-radius:var(--radio-s); font-size:.94rem; font-weight:650; letter-spacing:-.005em; cursor:pointer; text-align:center; transition:background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion); } .btn:active{ transform:translateY(1px); } .btn .ico{ width:1.05em; height:1.05em; } .btn--primario{ background:var(--brand-700); color:#fff; box-shadow:0 6px 18px -8px rgba(var(--brand-rgb),.75); } .btn--primario:hover{ background:var(--brand-800); color:#fff; box-shadow:0 10px 24px -10px rgba(var(--brand-rgb),.85); } .btn--acento{ background:var(--acento); color:#25190A; } .btn--acento:hover{ background:var(--acento-600); color:#25190A; } .btn--linea{ background:transparent; color:var(--ink); border-color:var(--line); } .btn--linea:hover{ border-color:var(--brand-400); color:var(--brand-800); background:var(--brand-050); } .btn--claro{ background:#fff; color:var(--ink); } .btn--claro:hover{ background:#fff; color:var(--brand-800); } .btn--fantasma{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); } .btn--fantasma:hover{ background:rgba(255,255,255,.2); color:#fff; } .btn--pequeno{ padding:.5rem .9rem; font-size:.85rem; border-radius:var(--radio-xs); } .btn--bloque{ width:100%; } /* Enlace con flecha que se desplaza al pasar el mouse */ .enlace-flecha{ display:inline-flex; align-items:center; gap:.4rem; font-weight:650; font-size:.93rem; color:var(--brand-700); } .enlace-flecha .ico{ width:1.05em; height:1.05em; transition:transform var(--transicion); } .enlace-flecha:hover .ico{ transform:translateX(3px); } /* --------------------------------------------------------------------- 3. Barra superior + cabecera --------------------------------------------------------------------- */ .barra-superior{ background:var(--bg-hondo); color:rgba(255,255,255,.72); font-size:.82rem; } .barra-superior__fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:2.6rem; flex-wrap:wrap; } .barra-superior__datos{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } .barra-superior a{ color:rgba(255,255,255,.78); display:inline-flex; align-items:center; gap:.4rem; } .barra-superior a:hover{ color:#fff; } .barra-superior .ico{ width:1rem; height:1rem; opacity:.75; } .barra-superior__redes{ display:flex; gap:.35rem; } .barra-superior__redes a{ width:1.85rem; height:1.85rem; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); } .barra-superior__redes a:hover{ background:rgba(255,255,255,.18); } @media (max-width:860px){ .barra-superior{ display:none; } } .cabecera{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color var(--transicion), box-shadow var(--transicion); } .cabecera.esta-fija{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(11,31,28,.4); } .cabecera__fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.5rem; } .marca{ display:flex; align-items:center; gap:.7rem; color:var(--ink); } .marca:hover{ color:var(--ink); } .marca__logo{ width:2.9rem; height:2.9rem; flex:none; border-radius:13px; background:linear-gradient(145deg, var(--brand-600), var(--brand-400)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.15rem; letter-spacing:.01em; box-shadow:0 6px 16px -8px rgba(var(--brand-rgb),.9); object-fit:contain; } img.marca__logo{ background:none; box-shadow:none; border-radius:10px; } .marca__texto{ display:flex; flex-direction:column; line-height:1.15; } .marca__nombre{ font-weight:800; font-size:1.12rem; letter-spacing:-.02em; color:var(--ink); } .marca__lema{ font-size:.72rem; color:var(--mute); font-weight:500; letter-spacing:.01em; } @media (max-width:400px){ .marca__lema{ display:none; } } /* --- navegación de escritorio --- */ .nav{ display:flex; align-items:center; gap:.15rem; } .nav__item{ position:relative; } .nav__enlace{ display:inline-flex; align-items:center; gap:.3rem; padding:.55rem .8rem; border-radius:var(--radio-xs); font-size:.93rem; font-weight:600; color:var(--ink-2); transition:background var(--transicion), color var(--transicion); white-space:nowrap; } .nav__enlace:hover{ background:var(--brand-050); color:var(--brand-800); } .nav__enlace[aria-current="page"], .nav__item.esta-activo > .nav__enlace{ color:var(--brand-800); background:var(--brand-050); } .nav__enlace .ico{ width:.95em; height:.95em; opacity:.6; transition:transform var(--transicion); } .nav__item:hover .nav__enlace .ico{ transform:rotate(180deg); } .nav__sub{ position:absolute; top:calc(100% + .4rem); left:0; z-index:60; min-width:17rem; padding:.45rem; background:#fff; border:1px solid var(--line); border-radius:var(--radio-m); box-shadow:var(--sombra-3); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--transicion), transform var(--transicion), visibility var(--transicion); list-style:none; margin:0; } .nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub{ opacity:1; visibility:visible; transform:translateY(0); } .nav__sub a{ display:block; padding:.55rem .7rem; border-radius:var(--radio-xs); font-size:.9rem; font-weight:550; color:var(--ink-2); line-height:1.4; } .nav__sub a:hover{ background:var(--brand-050); color:var(--brand-800); } .cabecera__acciones{ display:flex; align-items:center; gap:.6rem; } .hamburguesa{ display:none; width:2.7rem; height:2.7rem; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:var(--radio-xs); color:var(--ink); cursor:pointer; } .hamburguesa:hover{ background:var(--bg-suave); } .hamburguesa .ico{ width:1.35rem; height:1.35rem; } @media (max-width:1024px){ .nav, .cabecera__acciones .btn{ display:none; } .hamburguesa{ display:inline-flex; } } /* --- menú móvil --- */ .menu-movil{ position:fixed; inset:0; z-index:150; background:#fff; display:flex; flex-direction:column; transform:translateX(100%); transition:transform 260ms cubic-bezier(.4,0,.2,1); overflow-y:auto; } .menu-movil.abierto{ transform:translateX(0); } .menu-movil__cabecera{ display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gutter); border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; } .menu-movil__cerrar{ width:2.7rem; height:2.7rem; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:var(--radio-xs); color:var(--ink); cursor:pointer; } .menu-movil__lista{ list-style:none; margin:0; padding:1rem var(--gutter) 2rem; } .menu-movil__lista > li{ border-bottom:1px solid var(--line-2); } .menu-movil__lista a{ display:block; padding:.95rem 0; font-size:1.05rem; font-weight:650; color:var(--ink); } .menu-movil__lista .sub{ list-style:none; margin:0 0 .8rem; padding:0 0 0 .9rem; border-left:2px solid var(--brand-100); } .menu-movil__lista .sub a{ font-size:.94rem; font-weight:550; color:var(--ink-2); padding:.5rem 0; } .menu-movil__pie{ padding:1.2rem var(--gutter) 2.5rem; display:grid; gap:.6rem; } /* --------------------------------------------------------------------- 4. Hero --------------------------------------------------------------------- */ .hero{ position:relative; padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem); background: radial-gradient(70rem 34rem at 88% -10%, rgba(var(--brand-rgb),.14), transparent 62%), radial-gradient(46rem 30rem at 2% 8%, rgba(var(--acento-rgb),.13), transparent 58%), linear-gradient(180deg, #FBFDFC 0%, #F3F8F6 100%); overflow:hidden; } /* Trama de puntos muy tenue, hecha con CSS puro (sin imágenes que cargar) */ .hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(11,31,28,.055) 1px, transparent 1px); background-size:22px 22px; mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%); pointer-events:none; } .hero__grid{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem, 5vw, 4rem); align-items:center; } @media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } } .pastilla{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem .4rem .5rem; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:.79rem; font-weight:650; color:var(--ink-2); box-shadow:var(--sombra-1); } .pastilla__punto{ width:.5rem; height:.5rem; border-radius:50%; background:var(--brand-600); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18); } .hero h1{ margin:1.15rem 0 0; font-size:clamp(2.1rem, 5.2vw, 3.45rem); letter-spacing:-.035em; } .hero h1 em{ font-style:normal; color:var(--brand-700); background:linear-gradient(180deg, transparent 62%, rgba(var(--acento-rgb),.32) 62%); } .hero__bajada{ margin-top:1.15rem; font-size:clamp(1.02rem, 1.6vw, 1.15rem); color:var(--mute); max-width:34rem; } .hero__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; } .hero__sello{ display:flex; align-items:center; gap:.9rem; margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--mute); max-width:32rem; } .hero__sello .ico{ width:1.5rem; height:1.5rem; color:var(--brand-600); } /* Panel de la derecha: ficha institucional */ .ficha{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radio-xl); padding:1.9rem; box-shadow:var(--sombra-3); } .ficha__tapa{ height:8.5rem; margin:-1.9rem -1.9rem 1.5rem; border-radius:var(--radio-xl) var(--radio-xl) 0 0; background: radial-gradient(24rem 12rem at 20% 120%, rgba(255,255,255,.28), transparent 60%), linear-gradient(135deg, var(--brand-800), var(--brand-500) 65%, var(--acento) 190%); display:flex; align-items:flex-end; padding:1.3rem 1.9rem; color:#fff; overflow:hidden; } .ficha__tapa--imagen{ background-size:cover; background-position:center; } .ficha__tapa h2{ color:#fff; font-size:1.15rem; letter-spacing:-.02em; text-shadow:0 1px 12px rgba(0,0,0,.25); } .ficha__lista{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; } .ficha__lista li{ display:flex; gap:.85rem; align-items:flex-start; } .ficha__ico{ width:2.3rem; height:2.3rem; flex:none; border-radius:10px; background:var(--brand-050); color:var(--brand-700); display:grid; place-items:center; } .ficha__ico .ico{ width:1.15rem; height:1.15rem; } .ficha__rot{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--mute); font-weight:700; } .ficha__val{ font-size:.95rem; color:var(--ink); font-weight:600; line-height:1.45; } /* --------------------------------------------------------------------- 5. Cifras --------------------------------------------------------------------- */ .cifras{ background:#fff; border-bottom:1px solid var(--line); } .cifras__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-inline:1px solid var(--line); } @media (max-width:760px){ .cifras__grid{ grid-template-columns:repeat(2,1fr); } } .cifra{ background:#fff; padding:1.9rem 1.4rem; text-align:center; } .cifra__valor{ font-size:clamp(1.8rem, 3.4vw, 2.5rem); font-weight:800; color:var(--brand-700); letter-spacing:-.035em; line-height:1; } .cifra__texto{ margin-top:.5rem; font-size:.85rem; color:var(--mute); font-weight:550; } /* --------------------------------------------------------------------- 6. Secciones genéricas --------------------------------------------------------------------- */ .seccion{ padding:clamp(3.5rem, 7vw, 5.5rem) 0; } .seccion--suave{ background:var(--bg-suave); } .seccion--honda{ background:var(--bg-hondo); color:rgba(255,255,255,.75); } .seccion--honda h2, .seccion--honda h3{ color:#fff; } .seccion__encabezado{ max-width:42rem; margin-bottom:2.6rem; } .seccion__encabezado--centro{ margin-inline:auto; text-align:center; } .badge-seccion{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-700); } .badge-seccion::before{ content:""; width:1.5rem; height:2px; border-radius:2px; background:var(--acento); } .seccion--honda .badge-seccion{ color:var(--brand-300); } .seccion__titulo{ margin-top:.85rem; font-size:clamp(1.65rem, 3.4vw, 2.35rem); letter-spacing:-.03em; } .seccion__bajada{ margin-top:.9rem; color:var(--mute); font-size:1.02rem; } .seccion--honda .seccion__bajada{ color:rgba(255,255,255,.66); } .rejilla{ display:grid; gap:1.15rem; } .rejilla--auto{ grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)); } .rejilla--3{ grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); } .rejilla--2{ grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr)); } /* --------------------------------------------------------------------- 7. Áreas de trabajo --------------------------------------------------------------------- */ .area{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radio-m); padding:1.55rem; overflow:hidden; transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } .area::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg, var(--brand-500), var(--acento)); transform:scaleX(0); transform-origin:left; transition:transform 320ms cubic-bezier(.4,0,.2,1); } .area:hover{ transform:translateY(-4px); box-shadow:var(--sombra-3); border-color:transparent; } .area:hover::after{ transform:scaleX(1); } .area__ico{ width:3rem; height:3rem; border-radius:14px; background:var(--brand-050); color:var(--brand-700); display:grid; place-items:center; margin-bottom:1.1rem; transition:background var(--transicion), color var(--transicion); } .area__ico .ico{ width:1.5rem; height:1.5rem; } .area:hover .area__ico{ background:var(--brand-700); color:#fff; } .area h3{ font-size:1.03rem; letter-spacing:-.018em; } .area p{ margin-top:.55rem; font-size:.9rem; color:var(--mute); line-height:1.6; } /* --------------------------------------------------------------------- 8. Bloque institucional (visión / misión / objetivo) --------------------------------------------------------------------- */ .institucional{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; } @media (max-width:900px){ .institucional{ grid-template-columns:1fr; } } .institucional__texto{ position:sticky; top:6.5rem; } @media (max-width:900px){ .institucional__texto{ position:static; } } .pilar{ display:flex; gap:1.1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radio-m); padding:1.5rem; transition:box-shadow var(--transicion), transform var(--transicion); } .pilar + .pilar{ margin-top:.9rem; } .pilar:hover{ box-shadow:var(--sombra-2); transform:translateX(3px); } .pilar__ico{ width:2.7rem; height:2.7rem; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--acento-050); color:var(--acento-700); } .pilar__ico .ico{ width:1.35rem; height:1.35rem; } .pilar h3{ font-size:1rem; } .pilar p{ margin-top:.4rem; font-size:.93rem; color:var(--mute); } /* --------------------------------------------------------------------- 9. Documentos / transparencia --------------------------------------------------------------------- */ .tabs{ display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:1.6rem; scrollbar-width:thin; } .tabs::-webkit-scrollbar{ height:5px; } .tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; } .tab{ display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.05rem; white-space:nowrap; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:.88rem; font-weight:650; color:var(--ink-2); cursor:pointer; transition:all var(--transicion); } .tab:hover{ border-color:var(--brand-400); color:var(--brand-800); } .tab[aria-selected="true"]{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; box-shadow:0 6px 18px -10px rgba(var(--brand-rgb),.9); } .tab .ico{ width:1.05rem; height:1.05rem; } .tab__n{ min-width:1.4rem; padding:0 .35rem; border-radius:999px; background:var(--brand-050); color:var(--brand-800); font-size:.72rem; font-weight:750; line-height:1.4rem; text-align:center; } .tab[aria-selected="true"] .tab__n{ background:rgba(255,255,255,.22); color:#fff; } .panel[hidden]{ display:none; } .panel__intro{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; } .panel__intro h3{ font-size:1.2rem; } .panel__intro p{ margin-top:.35rem; font-size:.92rem; color:var(--mute); max-width:46rem; } .docs{ display:grid; gap:.65rem; } .doc{ display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radio-m); padding:1rem 1.15rem; transition:border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); } .doc:hover{ border-color:var(--brand-300); box-shadow:var(--sombra-2); transform:translateY(-1px); } .doc__tipo{ width:2.9rem; height:3.3rem; flex:none; border-radius:9px; display:grid; place-items:center; font-size:.62rem; font-weight:800; letter-spacing:.03em; position:relative; color:#fff; } .doc__tipo::after{ content:""; position:absolute; top:0; right:0; border-width:0 .6rem .6rem 0; border-style:solid; border-color:transparent rgba(255,255,255,.45) transparent transparent; border-radius:0 9px 0 0; } .tipo-rojo{ background:#C8422F; } .tipo-azul{ background:#2C5AA0; } .tipo-verde{ background:#1E7A4C; } .tipo-naranja{ background:#C2691C; } .tipo-violeta{ background:#6B4FA0; } .tipo-gris{ background:#5A6B68; } .doc__cuerpo{ min-width:0; flex:1; } .doc__titulo{ font-size:.98rem; font-weight:700; color:var(--ink); letter-spacing:-.012em; display:block; line-height:1.4; } .doc__desc{ margin-top:.2rem; font-size:.86rem; color:var(--mute); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .doc__meta{ margin-top:.45rem; display:flex; flex-wrap:wrap; gap:.35rem .9rem; font-size:.76rem; color:var(--mute); } .doc__meta span{ display:inline-flex; align-items:center; gap:.3rem; } .doc__meta .ico{ width:.9rem; height:.9rem; opacity:.7; } .doc__acciones{ display:flex; gap:.4rem; flex:none; } @media (max-width:620px){ .doc{ flex-wrap:wrap; } .doc__acciones{ width:100%; } .doc__acciones .btn{ flex:1; } } /* Tarjeta de categoría (índice de documentos) */ .catcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radio-l); padding:1.7rem; transition:transform var(--transicion), box-shadow var(--transicion); } .catcard:hover{ transform:translateY(-4px); box-shadow:var(--sombra-3); } .catcard__ico{ width:3.2rem; height:3.2rem; border-radius:15px; background:linear-gradient(145deg, var(--brand-600), var(--brand-400)); color:#fff; display:grid; place-items:center; margin-bottom:1.2rem; box-shadow:0 8px 20px -10px rgba(var(--brand-rgb),.85); } .catcard__ico .ico{ width:1.55rem; height:1.55rem; } .catcard h3{ font-size:1.08rem; line-height:1.35; } .catcard p{ margin-top:.6rem; font-size:.9rem; color:var(--mute); flex:1; } .catcard__pie{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .catcard__n{ font-size:.82rem; color:var(--mute); font-weight:600; } /* Estado vacío */ .vacio{ text-align:center; padding:3rem 1.5rem; background:#fff; border:1px dashed var(--line); border-radius:var(--radio-m); color:var(--mute); } .vacio .ico{ width:2.4rem; height:2.4rem; color:var(--brand-300); margin-bottom:.8rem; } .vacio strong{ display:block; color:var(--ink); font-size:1rem; margin-bottom:.3rem; } .vacio p{ font-size:.9rem; max-width:28rem; margin-inline:auto; } /* Buscador de documentos */ .buscador{ position:relative; max-width:26rem; } .buscador .ico{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:1.1rem; height:1.1rem; color:var(--mute); pointer-events:none; } .buscador input{ width:100%; padding:.75rem 1rem .75rem 2.6rem; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:.92rem; background:#fff; color:var(--ink); } .buscador input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); } /* --------------------------------------------------------------------- 10. Proyectos --------------------------------------------------------------------- */ .proyecto{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radio-l); overflow:hidden; transition:transform var(--transicion), box-shadow var(--transicion); } .proyecto:hover{ transform:translateY(-4px); box-shadow:var(--sombra-3); } .proyecto__imagen{ height:9.5rem; background-size:cover; background-position:center; background-color:var(--brand-050); background-image:linear-gradient(135deg, var(--brand-700), var(--brand-400)); position:relative; } .proyecto__cuerpo{ padding:1.5rem; display:flex; flex-direction:column; flex:1; } .proyecto h3{ font-size:1.08rem; line-height:1.35; margin-top:.85rem; } .proyecto__resumen{ margin-top:.6rem; font-size:.9rem; color:var(--mute); flex:1; } .proyecto__datos{ margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--line-2); display:grid; gap:.5rem; font-size:.82rem; color:var(--mute); } .proyecto__datos div{ display:flex; gap:.5rem; align-items:flex-start; } .proyecto__datos .ico{ width:1rem; height:1rem; flex:none; margin-top:.15rem; color:var(--brand-600); } .estado{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem; border-radius:999px; font-size:.73rem; font-weight:750; letter-spacing:.02em; } .estado::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; background:currentColor; } .estado--ejecucion{ background:#E7F6EF; color:#0B6B44; } .estado--concluido{ background:#EEF2F1; color:#4A5C58; } .estado--planificado{ background:#FDF4E3; color:#8A5A08; } /* Línea de tiempo de experiencias */ .linea{ position:relative; padding-left:2.2rem; } .linea::before{ content:""; position:absolute; left:.55rem; top:.4rem; bottom:.4rem; width:2px; background:linear-gradient(180deg, var(--brand-400), var(--line)); } .linea__item{ position:relative; padding-bottom:2rem; } .linea__item:last-child{ padding-bottom:0; } .linea__item::before{ content:""; position:absolute; left:-2.2rem; top:.35rem; width:1.15rem; height:1.15rem; border-radius:50%; background:#fff; border:3px solid var(--brand-500); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.1); } .linea__fecha{ font-size:.78rem; font-weight:750; color:var(--brand-700); letter-spacing:.04em; text-transform:uppercase; } .linea__item h3{ font-size:1.05rem; margin-top:.3rem; } .linea__item p{ margin-top:.4rem; font-size:.92rem; color:var(--mute); } /* --------------------------------------------------------------------- 11. Llamado a la acción --------------------------------------------------------------------- */ .cta{ position:relative; overflow:hidden; border-radius:var(--radio-xl); background: radial-gradient(38rem 20rem at 88% 8%, rgba(var(--acento-rgb),.34), transparent 60%), linear-gradient(135deg, var(--brand-800), var(--brand-600)); color:#fff; padding:clamp(2.4rem, 5vw, 3.6rem); display:grid; grid-template-columns:1.4fr auto; gap:2rem; align-items:center; box-shadow:var(--sombra-4); } @media (max-width:820px){ .cta{ grid-template-columns:1fr; } } .cta::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size:20px 20px; pointer-events:none; } .cta > *{ position:relative; } .cta h2{ color:#fff; font-size:clamp(1.55rem, 3.2vw, 2.1rem); letter-spacing:-.03em; } .cta p{ margin-top:.8rem; color:rgba(255,255,255,.82); max-width:38rem; } /* --------------------------------------------------------------------- 12. Encabezado interior de página --------------------------------------------------------------------- */ .encabezado-int{ position:relative; padding:clamp(2.6rem, 5vw, 4rem) 0 clamp(2.2rem, 4vw, 3rem); background: radial-gradient(52rem 26rem at 82% -30%, rgba(var(--brand-rgb),.13), transparent 60%), linear-gradient(180deg, #FBFDFC, #F4F8F7); border-bottom:1px solid var(--line); } .migas{ display:flex; flex-wrap:wrap; gap:.45rem; font-size:.82rem; color:var(--mute); margin-bottom:1rem; } .migas a{ color:var(--mute); } .migas a:hover{ color:var(--brand-700); } .migas span[aria-current]{ color:var(--ink); font-weight:600; } .encabezado-int h1{ font-size:clamp(1.85rem, 4vw, 2.7rem); letter-spacing:-.035em; max-width:44rem; } .encabezado-int__bajada{ margin-top:.9rem; color:var(--mute); font-size:1.03rem; max-width:44rem; } /* --------------------------------------------------------------------- 13. Prosa (contenido creado desde el panel) --------------------------------------------------------------------- */ .prosa{ font-size:1.02rem; line-height:1.78; color:var(--ink-2); max-width:46rem; } .prosa > * + *{ margin-top:1.1rem; } .prosa h2{ font-size:1.45rem; margin-top:2.6rem; letter-spacing:-.025em; } .prosa h3{ font-size:1.15rem; margin-top:2rem; } .prosa h2:first-child, .prosa h3:first-child{ margin-top:0; } .prosa ul, .prosa ol{ padding-left:1.3rem; } .prosa li + li{ margin-top:.45rem; } .prosa ul{ list-style:none; padding-left:0; } .prosa ul li{ position:relative; padding-left:1.6rem; } .prosa ul li::before{ content:""; position:absolute; left:.25rem; top:.7em; width:.42rem; height:.42rem; border-radius:50%; background:var(--acento); } .prosa ol li::marker{ color:var(--brand-700); font-weight:700; } .prosa blockquote{ margin:1.6rem 0; padding:1.1rem 1.4rem; border-left:3px solid var(--brand-500); background:var(--brand-050); border-radius:0 var(--radio-s) var(--radio-s) 0; font-size:1.02rem; color:var(--ink); } .prosa img{ border-radius:var(--radio-m); box-shadow:var(--sombra-2); } .prosa a{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .prosa table{ width:100%; border-collapse:collapse; font-size:.94rem; } .prosa th, .prosa td{ padding:.65rem .8rem; border:1px solid var(--line); text-align:left; } .prosa th{ background:var(--bg-suave); font-weight:700; color:var(--ink); } .prosa hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; } /* --------------------------------------------------------------------- 14. Formularios públicos --------------------------------------------------------------------- */ .form-campo{ margin-bottom:1.05rem; } .form-campo label{ display:block; font-size:.85rem; font-weight:650; color:var(--ink); margin-bottom:.35rem; } .form-campo .req{ color:#B4232B; } .form-campo input, .form-campo textarea, .form-campo select{ width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--radio-s); font:inherit; font-size:.95rem; background:#fff; color:var(--ink); transition:border-color var(--transicion), box-shadow var(--transicion); } .form-campo textarea{ min-height:9rem; resize:vertical; } .form-campo input:focus, .form-campo textarea:focus, .form-campo select:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12); } .form-campo .pista{ margin-top:.3rem; font-size:.79rem; color:var(--mute); } .form-fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:620px){ .form-fila{ grid-template-columns:1fr; } } .trampa{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; } .alerta{ display:flex; gap:.75rem; align-items:flex-start; padding:.9rem 1.1rem; border-radius:var(--radio-s); font-size:.92rem; border:1px solid; margin-bottom:1.2rem; } .alerta .ico{ width:1.2rem; height:1.2rem; flex:none; margin-top:.12rem; } .alerta--ok{ background:#EEF8F3; border-color:#BFE4D2; color:#0C6440; } .alerta--error{ background:#FDF2F2; border-color:#F3C9C9; color:#8E1A21; } .alerta--aviso{ background:#FDF8EC; border-color:#F0DFB8; color:#7A4E05; } .alerta--info{ background:#EFF5FB; border-color:#CBDEF0; color:#1B4C77; } .contacto-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3rem); align-items:start; } @media (max-width:900px){ .contacto-grid{ grid-template-columns:1fr; } } .contacto-datos{ background:#fff; border:1px solid var(--line); border-radius:var(--radio-l); padding:1.7rem; } .contacto-datos ul{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; } .contacto-datos li{ display:flex; gap:.9rem; align-items:flex-start; } .contacto-datos .ico-caja{ width:2.4rem; height:2.4rem; flex:none; border-radius:11px; background:var(--brand-050); color:var(--brand-700); display:grid; place-items:center; } .contacto-datos .rot{ font-size:.73rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute); font-weight:700; } .contacto-datos .val{ font-size:.95rem; color:var(--ink); font-weight:600; } .mapa{ margin-top:1.3rem; border-radius:var(--radio-m); overflow:hidden; border:1px solid var(--line); } .mapa iframe{ display:block; width:100%; height:15rem; border:0; } /* --------------------------------------------------------------------- 15. Pie --------------------------------------------------------------------- */ .pie{ background:var(--bg-hondo); color:rgba(255,255,255,.62); padding-top:clamp(3rem,6vw,4.5rem); } .pie__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; } @media (max-width:900px){ .pie__grid{ grid-template-columns:1fr 1fr; gap:2rem; } } @media (max-width:560px){ .pie__grid{ grid-template-columns:1fr; } } .pie h4{ color:#fff; font-size:.79rem; text-transform:uppercase; letter-spacing:.13em; font-weight:750; margin-bottom:1.05rem; } .pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; } .pie a{ color:rgba(255,255,255,.62); font-size:.9rem; } .pie a:hover{ color:#fff; } .pie__marca{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; } .pie__marca .marca__logo{ box-shadow:none; } .pie__marca .marca__nombre{ color:#fff; } .pie__marca .marca__lema{ color:rgba(255,255,255,.5); } .pie__texto{ font-size:.89rem; line-height:1.7; max-width:26rem; } .pie__contacto li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.89rem; } .pie__contacto .ico{ width:1rem; height:1rem; margin-top:.28rem; color:var(--brand-300); flex:none; } .pie__redes{ display:flex; gap:.5rem; margin-top:1.3rem; } .pie__redes a{ width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:rgba(255,255,255,.72); } .pie__redes a:hover{ background:var(--brand-600); color:#fff; } .pie__legal{ border-top:1px solid rgba(255,255,255,.1); padding:1.4rem 0 2rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.45); } .pie__legal p{ max-width:52rem; line-height:1.6; } /* --------------------------------------------------------------------- 16. Página 404 --------------------------------------------------------------------- */ .error-404{ text-align:center; padding:clamp(4rem,10vw,7rem) 0; } .error-404__codigo{ font-size:clamp(4.5rem,14vw,8rem); font-weight:800; line-height:1; letter-spacing:-.05em; background:linear-gradient(135deg, var(--brand-700), var(--acento)); -webkit-background-clip:text; background-clip:text; color:transparent; } .error-404 h1{ margin-top:1rem; font-size:clamp(1.5rem,3.5vw,2.1rem); } .error-404 p{ margin:1rem auto 2rem; color:var(--mute); max-width:32rem; } /* --------------------------------------------------------------------- 17. Aparición al hacer scroll --------------------------------------------------------------------- */ /* Se ocultan SÓLO si hay JavaScript para volver a mostrarlas: sin JS (o si el script falla) el contenido se ve igual, que es lo que importa. */ .js .aparece{ opacity:0; transform:translateY(18px); } .js .aparece.visible{ opacity:1; transform:none; transition:opacity 620ms cubic-bezier(.4,0,.2,1), transform 620ms cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce){ .js .aparece{ opacity:1; transform:none; } *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* --------------------------------------------------------------------- 18. Utilidades La CSP del sitio no permite atributos style="" (así un XSS no puede inyectar estilos), por eso los ajustes puntuales viven acá. --------------------------------------------------------------------- */ .mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.1rem; } .mt-3{ margin-top:1.6rem; } .mt-4{ margin-top:1.9rem; } .mb-2{ margin-bottom:1.1rem; } .pt-2{ padding-top:1.5rem; } .sin-tope{ padding-top:0; } .txt-chico{ font-weight:500; font-size:.87rem; } .txt-centro{ text-align:center; } .flex-fin{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } .flex-centro{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center; } .max-lectura{ max-width:46rem; } /* --------------------------------------------------------------------- 19. Impresión --------------------------------------------------------------------- */ @media print{ .barra-superior,.cabecera,.pie,.cta,.hamburguesa,.menu-movil,.btn{ display:none !important; } body{ color:#000; background:#fff; } .contenedor{ max-width:none; padding:0; } }