/* benjaminalcala.com Paleta de marca del brief: azul turquí #0B2545, profundo #061726, blanco hueso #F7F5F2, dorado #9A7B2E, gris azulado #B8C4D0. Sin librerías. Todo pesa lo que se ve. */ :root{ --azul:#0B2545; --azul-hondo:#061726; --hueso:#F7F5F2; --dorado:#9A7B2E; --gris:#5A6B7D; --gris-claro:#B8C4D0; --borde:#E2E0DC; --blanco:#fff; --ancho:1080px; --radio:4px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{margin:0;background:var(--blanco);color:#1C2733; font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; font-size:1.05rem;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--azul);text-decoration-thickness:1px;text-underline-offset:3px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible{outline:3px solid var(--dorado);outline-offset:2px} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem} /* Encabezado, fijo arriba en todas las paginas. */ .cabecera{background:var(--azul-hondo);color:var(--blanco);position:sticky;top:0;z-index:50; transition:box-shadow .15s ease} /* Sombra muy discreta que aparece apenas se empieza a hacer scroll, para separar la barra del contenido que pasa debajo. La clase la pone medicion.js. */ .cabecera--elevada{box-shadow:0 2px 10px rgba(6,23,38,.28)} .cabecera .contenedor{display:flex;align-items:center;justify-content:space-between; gap:1rem;min-height:66px;flex-wrap:wrap} /* Para que un enlace de ancla (#contacto, #sagrilaft, etc.) no deje el titulo tapado bajo la barra fija. :target cubre cualquier ancla actual o futura sin tener que enumerar cada id a mano. */ :target{scroll-margin-top:96px} @media (max-width:560px){ /* En movil la cabecera pasa a dos filas (marca arriba, menu abajo) y ocupa mas alto. */ :target{scroll-margin-top:140px} } .marca{color:var(--blanco);text-decoration:none;font-weight:700;letter-spacing:.2px;font-size:1.02rem} .marca span{color:var(--gris-claro);font-weight:400} .nav{display:flex;gap:1.35rem;flex-wrap:wrap} .nav a{color:var(--gris-claro);text-decoration:none;font-size:.94rem} .nav a:hover,.nav a[aria-current="page"]{color:var(--blanco);text-decoration:underline} /* Bloques */ .heroe{background:var(--azul);color:var(--blanco);padding:4.5rem 0 4rem} /* OJO CON ESTE color. La regla general h1,h2,h3 mas abajo los pinta en azul turqui, que es exactamente el fondo del heroe. Sin esta linea el titular de la portada queda azul sobre azul, o sea invisible, y la portada se ve como una caja vacia. Asi estuvo hasta el 21-08-2026, cuando Benjamin probo el sitio en local y noto que "al inicio le falta gancho". El gancho estaba, no se veia. */ .heroe h1{color:var(--blanco);font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.15; margin:0 0 1.1rem;max-width:19ch} .heroe--retrato .contenedor{display:grid;gap:2.4rem;align-items:center; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)} /* Es un recorte con fondo transparente, no una foto rectangular. Por eso NO lleva sombra de caja: dibujaria un rectangulo alrededor de una silueta. La sombra va con drop-shadow, que sigue el contorno de la persona. */ .retrato{width:100%;max-width:330px;justify-self:end;display:block; filter:drop-shadow(0 16px 28px rgba(0,0,0,.35))} .heroe--retrato picture{justify-self:end} @media (max-width:760px){ .heroe--retrato .contenedor{grid-template-columns:1fr} .retrato{max-width:200px;justify-self:start} .heroe--retrato picture{justify-self:start} } .heroe p{font-size:1.16rem;max-width:62ch;color:#DCE5EE;margin:0 0 1.9rem} .seccion{padding:3.6rem 0} .seccion--hueso{background:var(--hueso)} .seccion--oscuro{background:var(--azul-hondo);color:var(--blanco)} .seccion--oscuro h1,.seccion--oscuro h2,.seccion--oscuro h3{color:var(--blanco)} .seccion--oscuro p{color:#DCE5EE} h1,h2,h3{color:var(--azul);line-height:1.25} h2{font-size:clamp(1.45rem,2.8vw,2rem);margin:0 0 1.1rem} h3{font-size:1.15rem;margin:0 0 .5rem} .entradilla{font-size:1.12rem;color:var(--gris);max-width:65ch} /* Botones */ .boton{display:inline-block;background:var(--dorado);color:#141414;font-weight:700; padding:.85rem 1.6rem;border-radius:var(--radio);text-decoration:none;border:0; cursor:pointer;font-size:1rem} .boton:hover{background:#B08F36} .boton--linea{background:transparent;color:var(--blanco);border:1.5px solid var(--gris-claro)} .boton--linea:hover{background:rgba(255,255,255,.1)} .acciones{display:flex;gap:.85rem;flex-wrap:wrap} /* Rejillas y tarjetas */ .rejilla{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio); padding:1.6rem} .seccion--oscuro .tarjeta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)} .tarjeta h3{margin-top:0} .etiqueta{display:inline-block;background:var(--dorado);color:#141414;font-size:.74rem; font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:.25rem .6rem; border-radius:2px;margin-bottom:.7rem} /* Clasificacion de acceso de cada herramienta: gratis sin registro, gratis con aviso opcional, o recurso que se entrega por correo. Mismo lenguaje visual que .etiqueta (pastilla pequena), pero en contorno para no competir con la etiqueta de frente que ya encabeza cada bloque. */ .nivel-acceso{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.4px; text-transform:uppercase;padding:.28rem .65rem;border-radius:2px;margin:.2rem 0 .8rem; border:1px solid currentColor} .nivel-acceso--libre{color:var(--azul);border-color:var(--dorado)} .nivel-acceso--aviso{color:var(--azul)} .nivel-acceso--recurso{background:var(--azul-hondo);color:var(--hueso);border-color:var(--azul-hondo)} .seccion--oscuro .nivel-acceso--libre{color:var(--hueso)} /* .ayuda es gris (var(--gris), pensado para fondos claros). La regla .seccion--oscuro p ya corrige los

, pero .ayuda tambien se usa en (el "(opcional)" junto al campo de nombre del boletin, entre otros), que esa regla no alcanza por ser de otra etiqueta. Contraste medido: 3.31:1 sin esto, por debajo del minimo AA de 4.5:1. */ .seccion--oscuro .ayuda{color:var(--gris-claro)} .seccion--oscuro .nivel-acceso--aviso{color:var(--hueso)} .seccion--oscuro .nivel-acceso--recurso{background:var(--hueso);color:var(--azul-hondo);border-color:var(--hueso)} /* Formularios */ .campo{margin-bottom:1.05rem} label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.95rem} input,select,textarea{width:100%;padding:.7rem .8rem;border:1px solid #B9C2CC; border-radius:var(--radio);font-size:1rem;font-family:inherit;background:var(--blanco);color:#1C2733} .ayuda{font-size:.87rem;color:var(--gris);margin:.3rem 0 0} .casilla{display:flex;gap:.6rem;align-items:flex-start} .casilla input{width:auto;margin-top:.35rem;flex-shrink:0} .casilla label{font-weight:400;font-size:.92rem} /* Segmentacion del boletin (contratacion estatal / laboral / ambos). Mismo patron visual que .casilla, en grupo de radios en vez de una sola casilla. */ .campo--interes{border:0;padding:0;margin:0 0 1.05rem} .campo--interes legend{font-weight:600;margin-bottom:.5rem;font-size:.95rem;padding:0} .opcion-interes{display:flex;gap:.5rem;align-items:center;margin-bottom:.4rem} .opcion-interes input{width:auto;flex-shrink:0} .opcion-interes label{font-weight:400;margin:0;font-size:.92rem} /* Resultado de la calculadora */ .resultado{margin-top:1.6rem;padding:1.5rem;border-radius:var(--radio); border-left:5px solid var(--gris-claro);background:var(--hueso)} .resultado[data-estado="completo"]{border-left-color:#A33B3B;background:#FBF2F2} .resultado[data-estado="minimas"]{border-left-color:var(--dorado);background:#FBF7EC} .resultado[data-estado="no"]{border-left-color:#3B7A57;background:#F1F8F3} .resultado[data-estado="verificar"],.resultado[data-estado="indeterminado"]{ border-left-color:var(--azul);background:#EEF2F7} .resultado h3{margin-top:0} .resultado dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1rem 0 0;font-size:.95rem} .resultado dt{font-weight:600;color:var(--gris)} .resultado dd{margin:0} /* Avisos */ .aviso{border:1px solid var(--borde);border-left:4px solid var(--dorado); background:var(--hueso);padding:1.1rem 1.3rem;border-radius:var(--radio);font-size:.94rem} .aviso strong{color:var(--azul)} /* Listas */ .lista-limpia{list-style:none;padding:0;margin:0} .lista-limpia li{padding-left:1.6rem;position:relative;margin-bottom:.7rem} .lista-limpia li::before{content:"";position:absolute;left:0;top:.62em; width:8px;height:8px;background:var(--dorado);border-radius:50%} /* Tablas */ table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem} th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--borde);vertical-align:top} th{background:var(--hueso);color:var(--azul)} .tabla-scroll{overflow-x:auto} /* Pie */ .pie{background:var(--azul-hondo);color:var(--gris-claro);padding:2.8rem 0 2rem;font-size:.92rem} .pie a{color:var(--gris-claro)} .pie a:hover{color:var(--blanco)} .pie-rejilla{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .pie h3{color:var(--blanco);font-size:.95rem;margin-bottom:.7rem} .pie ul{list-style:none;padding:0;margin:0} .pie li{margin-bottom:.45rem} .pie-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.3rem; font-size:.85rem;color:#8FA0B2} .saltar{position:absolute;left:-9999px;background:var(--dorado);color:#141414; padding:.7rem 1.1rem;z-index:100} .saltar:focus{left:1rem;top:.5rem;position:fixed} /* Banner de cookies. Solo aparece si ANALITICA["modo"] es "clarity", porque el mapa de calor si pone cookies. En el modo por defecto no existe y no se pinta. */ .banner-cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60; max-width:640px;margin:0 auto;background:var(--azul-hondo);color:var(--hueso); border:1px solid rgba(184,196,208,.35);border-radius:var(--radio); padding:1.1rem 1.25rem;box-shadow:0 12px 34px rgba(6,23,38,.42)} .banner-cookies p{margin:0 0 .9rem;font-size:.94rem;line-height:1.55} .banner-cookies a{color:var(--gris-claro)} .banner-cookies__botones{display:flex;gap:.6rem;flex-wrap:wrap} .banner-cookies .boton{padding:.5rem 1.1rem;font-size:.9rem} .boton--fantasma{background:transparent;color:var(--hueso); border:1.5px solid var(--gris-claro)} .boton--fantasma:hover{background:rgba(255,255,255,.1)} @media (max-width:520px){.banner-cookies__botones .boton{flex:1 1 auto;text-align:center}} /* Bloque destacado, para lo que no puede pasar desapercibido */ .destacado{background:var(--hueso);border-left:4px solid var(--dorado); padding:1.3rem 1.5rem;border-radius:0 var(--radio) var(--radio) 0;margin:2rem 0} .destacado p{margin:0} .destacado--aviso{background:#FDF7E7;border-left-color:#B08F36} /* Franja de respaldo institucional, sin logos */ .respaldo{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1.8rem} .respaldo h3{margin:0 0 .4rem;font-size:1rem;color:var(--azul); text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--dorado); padding-bottom:.25rem;display:inline-block} .respaldo p{margin:0;color:var(--gris)} /* Umbrales. No se esconden, pero van plegados y debajo del resultado, para que la herramienta se use antes de leer la tabla. Esconderlos del todo seria un patron oscuro, y en el sitio de un abogado la transparencia es el producto. */ .detalle-umbrales{border-top:1px solid var(--borde);padding-top:1rem} .detalle-umbrales summary{cursor:pointer;font-weight:600;color:var(--azul); padding:.4rem 0;list-style:revert} .detalle-umbrales summary:hover{text-decoration:underline;text-decoration-color:var(--dorado)} .detalle-umbrales[open] summary{margin-bottom:1rem} /* Tarjetas de servicio. La pagina anterior era una lista de vinetas y se leia como un documento de Word. Cada frente ahora es un bloque con cabeza propia y una rejilla de dolores resueltos, cada uno con subtitulo y explicacion. */ .servicio{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio); padding:2.2rem 2rem;box-shadow:0 2px 10px rgba(11,37,69,.04)} .seccion--hueso .servicio{background:var(--blanco)} .seccion:not(.seccion--hueso) .servicio{background:var(--hueso);border-color:#DCD8D2} .servicio__cabeza{border-bottom:2px solid var(--dorado);padding-bottom:1.2rem;margin-bottom:1.6rem} .servicio__cabeza h2{margin:.5rem 0 .6rem} .servicio__cabeza p{margin:0;color:var(--gris);max-width:62ch} .servicio__lista{display:grid;gap:1.5rem 2.2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .servicio__lista h3{margin:0 0 .35rem;font-size:1.03rem;color:var(--azul)} .servicio__lista p{margin:0;color:var(--gris);font-size:.98rem;line-height:1.6} /* La promesa de franqueza. Antes era un recuadro beige suelto. */ .promesa{background:var(--azul);color:var(--hueso);border-radius:var(--radio); padding:2.2rem 2.2rem;border-left:6px solid var(--dorado)} .promesa h2{color:var(--blanco);margin:0 0 .8rem} .promesa p{margin:0;color:#DCE5EE;font-size:1.06rem;line-height:1.7} .promesa strong{color:var(--blanco)} .boton--grande{font-size:1.08rem;padding:1rem 2.2rem} /* Camino del libro (Entender -> Prepararse -> ... -> Escalar). Es informativo, no decorativo, por eso sin animacion: son pasos que se leen, no una secuencia que se mira pasar. */ .camino{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 0;margin-top:1.4rem} .camino span:not(.camino__flecha){background:var(--hueso);border:1px solid var(--borde); color:var(--azul);font-weight:600;font-size:.92rem;padding:.55rem 1.1rem; border-radius:999px} .camino__flecha{color:var(--azul);font-weight:700;padding:0 .5rem;font-size:1.1rem} @media (max-width:560px){ .camino{flex-direction:column;align-items:flex-start;gap:.4rem} .camino__flecha{transform:rotate(90deg);padding:.05rem 0 .05rem 1.4rem} } /* Aire dentro de las tarjetas de la portada, que estaban pegadas al borde */ .tarjeta{padding:1.7rem 1.6rem} @media (max-width:640px){ .servicio{padding:1.5rem 1.2rem} .promesa{padding:1.6rem 1.3rem} /* La rejilla de servicios usaba minmax(280px,1fr): en telefonos angostos (320px de ancho) el interior de la tarjeta queda en unos 244px, menos que el minimo de la columna, y desborda horizontalmente. Una sola columna a lo ancho disponible no tiene ese piso y nunca desborda. */ .servicio__lista{gap:1.3rem;grid-template-columns:1fr} } /* ========================================================================== CELULAR. Tres cosas que rompen una web en telefono y no se ven en el computador, corregidas el 23-08-2026. ========================================================================== */ /* 1. EL ZOOM DE IPHONE. Safari en iOS hace zoom automatico al tocar un campo cuya letra mida menos de 16px, y la pagina queda descuadrada y el usuario tiene que pellizcar para volver. Es la causa numero uno de abandono de formularios en iPhone, y no se nota probando en el computador. */ input,select,textarea{font-size:16px} /* 2. BOTONES QUE SE PUEDEN TOCAR CON EL DEDO. Apple y Google piden 44 y 48 pixeles de alto minimo. Un enlace de 30px se falla al tocarlo. */ .boton,button,input[type=submit]{min-height:48px;display:inline-flex; align-items:center;justify-content:center} .nav a{padding:.6rem .55rem;display:inline-block} .pie a,.lista-limpia a{padding:.15rem 0;display:inline-block} /* 3. QUE NADA SE SALGA DE LA PANTALLA. Una tabla ancha o una palabra larga generan barra horizontal, y ahi el sitio se siente roto. CORREGIDO EL 02-09-2026, SEGUNDA RONDA. Esto decia overflow-x:hidden, y esa propiedad tiene un efecto secundario que no es obvio leyendo el CSS: cuando a html o a body se les fija overflow-x sin fijar tambien overflow-y, la especificacion obliga al navegador a resolver el overflow-y implicito como "auto". Eso convierte a html/body en un NUEVO contenedor de scroll propio, y position:sticky calcula "pegado" contra ESE contenedor, no contra la ventana real. Resultado: la barra de arriba, que es sticky, se iba con el scroll en vez de quedarse fija, y no se notaba mirando el CSS porque la regla en si parece inofensiva. Se confirmo con una prueba real en Chromium: con "hidden" la cabecera se desplazaba exactamente lo mismo que el scroll (test: header.top === -scrollY en cada punto). "clip" corta el desborde horizontal igual que "hidden", pero no crea ese contenedor de scroll nuevo, asi que sticky vuelve a calcularse contra la ventana real. Confirmado con la misma prueba: con "clip" la cabecera se quedo en top:0px del viewport en todo el recorrido, en escritorio y en movil. */ html,body{overflow-x:clip;max-width:100%} table{width:100%} .tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} h1,h2,h3,p,li{overflow-wrap:break-word} /* Muesca de los iPhone recientes, para que el contenido no quede debajo */ .cabecera,.pie{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} @media (max-width:760px){ body{font-size:1rem} .heroe{padding:2.6rem 0 2.4rem} .heroe h1{font-size:clamp(1.6rem,7vw,2.1rem);max-width:none} .heroe p{font-size:1.04rem} .seccion{padding:2.4rem 0} .contenedor{padding:0 1.1rem} .acciones{display:flex;flex-direction:column;gap:.7rem;align-items:stretch} .acciones .boton{width:100%} .nav{display:flex;flex-wrap:wrap;gap:.1rem .5rem;font-size:.94rem} } /* El menu en pantallas muy angostas no se apila con la marca */ @media (max-width:560px){ .cabecera .contenedor{flex-direction:column;align-items:flex-start;gap:.5rem} .nav{margin-left:-.55rem} } /* Aviso de lo proximo que vence. Es lo primero que se ve y es lo que convierte una tabla en una herramienta: no dice que existen fechas, dice cuantos dias le quedan a usted. */ .proximo{background:rgba(154,123,46,.16);border:1px solid var(--dorado); border-radius:var(--radio);padding:1.1rem 1.3rem;margin-top:1.8rem;max-width:640px} .proximo strong{color:var(--dorado);font-size:1.14rem} .proximo p{margin:.35rem 0 0;color:#DCE5EE;font-size:.98rem} .proximo--urgente{background:rgba(178,58,44,.2);border-color:#E08A7E} .proximo--urgente strong{color:#FFB4A6} .tabla-calendario td{vertical-align:top;padding:.9rem .8rem} .tabla-calendario td:first-child{white-space:nowrap;color:var(--azul);font-size:.98rem} .celda-norma{color:var(--gris);font-size:.9rem;white-space:normal} @media (max-width:640px){.tabla-calendario{min-width:520px}} /* La foto se veia cortada por abajo porque el heroe centraba verticalmente y el retrato es mas alto que el texto. Se alinea al fondo, que es donde termina la figura, y se limita la altura para que nunca desborde la seccion. */ .heroe--retrato .contenedor{align-items:end} .retrato{max-height:420px;width:auto;object-fit:contain;object-position:bottom} @media (max-width:760px){.retrato{max-height:260px}} /* Los dos recuadros del final de Contacto tenian tamaños de letra distintos, uno heredaba de .destacado y el otro de .aviso. Se igualan. */ .aviso,.destacado{font-size:1rem;line-height:1.65} .aviso p,.destacado p{font-size:inherit;line-height:inherit;margin:0} .aviso strong,.destacado strong{color:var(--azul)} /* Trampa para robots. Un humano no la ve; un robot que llena todo cae aqui y Netlify descarta el envio. Se oculta con position, no con display:none, porque algunos robots detectan display:none. */ .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Boton "algo no funciona". Discreto, fijo abajo a la derecha, y por debajo del banner de cookies para que no se estorben. Es un