/* ========================================================================== Tema Aradas — hoja principal (móvil primero, sin frameworks) Presupuesto: < 100 KB CSS+JS. Fuentes autoalojadas (WOFF2, latín, swap). ========================================================================== */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Paleta editorial */ --bg: #faf9f7; /* blanco roto */ --bg-2: #f1f0ec; /* gris muy claro */ --ink: #1c1c1b; /* antracita */ --ink-2: #4a4a47; /* texto secundario */ --ink-3: #7a7974; /* meta, numeración */ --line: #d9d7d1; /* filetes 1px */ --footer: #1c1c1b; /* Acento (se cambia con data-acento en ). Todos > 4.5:1 sobre --bg */ --acento: #1f5f6b; /* petróleo por defecto */ --acento-ink: #ffffff; --acento-tint: #e6eef0; /* Tipografía */ --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --fs-body: 1.0625rem; /* 17px */ --lh-body: 1.65; --medida: 70ch; --w: 1120px; /* retícula algo más estrecha: descansa la vista en portátiles */ --gutter: clamp(1.5rem, 4.5vw, 4.5rem); /* márgenes laterales que crecen con la pantalla */ --gap: 1.5rem; --header-h: 72px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; } /* Tipografía */ h1, h2, h3, h4, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.15; margin: 0; } h1 { font-size: clamp(2.25rem, 6vw, 4.25rem); } /* 36 → 68px */ h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.2; } h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.3; } h4 { font-size: 1.125rem; font-family: var(--sans); font-weight: 600; } p { margin: 0 0 1.25em; } .lead { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); max-width: 36em; } .small, small { font-size: 0.9rem; } .meta { font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.02em; } .eyebrow { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin: 0 0 1rem; } .num { font-family: var(--serif); font-variant-numeric: tabular-nums; color: var(--ink-3); } /* Layout */ .wrap { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; } .wrap--narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; } .section { padding-block: clamp(3rem, 8vw, 6rem); } .section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .section--bg { background: var(--bg-2); } .section-head { display: grid; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head .num { font-size: 0.95rem; } .section-head p { color: var(--ink-2); max-width: 44em; margin: 0; } @media (min-width: 800px) { .section-head { grid-template-columns: 8ch 1fr; align-items: baseline; } .section-head p { grid-column: 2; } } .grid { display: grid; gap: var(--gap); } @media (min-width: 800px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* Botones */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border: 1px solid var(--acento); font-family: var(--sans); font-size: 0.95rem; font-weight: 500; text-decoration: none; line-height: 1.2; transition: background 0.15s, color 0.15s; } .btn--primary { background: var(--acento); color: var(--acento-ink); } .btn--primary:hover { background: var(--ink); border-color: var(--ink); } .btn--secondary { background: transparent; color: var(--acento); } .btn--secondary:hover { background: var(--acento-tint); } .btn--ink { border-color: var(--ink); color: var(--ink); background: transparent; } .btn--ink:hover { background: var(--ink); color: #fff; } .tel { font-family: var(--sans); font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; } .tel:hover { color: var(--acento); } .cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; } /* Header */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); transition: height 0.2s; } .header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-h); transition: height 0.2s; } .header.is-compact { --header-h: 56px; } .brand { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; line-height: 1.1; } .brand small { display: block; font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 0.2rem; } .header.is-compact .brand small { display: none; } .nav { display: none; } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; align-items: center; } .nav a, .nav button { font: inherit; font-size: 0.95rem; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0.4rem 0; cursor: pointer; } .nav a:hover, .nav button:hover, .nav a[aria-current] { color: var(--acento); } .nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--acento); } .nav .has-sub { position: relative; } .nav .has-sub > button::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.2em) rotate(45deg); margin-left: 0.5em; } .nav .sub { display: none; position: absolute; top: 100%; left: -1rem; min-width: 18rem; background: var(--bg); border: 1px solid var(--line); padding: 0.5rem 0; margin-top: 0.4rem; } .nav .has-sub[aria-expanded="true"] .sub, .nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: block; } .nav .sub ul { flex-direction: column; gap: 0; align-items: stretch; } .nav .sub a { display: block; padding: 0.55rem 1rem; } .nav .sub a:hover { background: var(--bg-2); } .header-right { display: flex; align-items: center; gap: 1.5rem; } .header .tel { display: none; } .menu-toggle { background: none; border: 1px solid var(--line); padding: 0.5rem 0.75rem; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--ink); } @media (min-width: 1000px) { .nav { display: block; } .header .tel { display: inline; } .menu-toggle { display: none; } } /* Menú móvil: panel debajo del header */ .mobile-nav { display: none; border-bottom: 1px solid var(--line); background: var(--bg); } .mobile-nav.is-open { display: block; } .mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0; } .mobile-nav li { border-top: 1px solid var(--line); } .mobile-nav li:first-child { border-top: 0; } .mobile-nav a, .mobile-nav summary { display: block; padding: 0.9rem 0; color: var(--ink); text-decoration: none; font-size: 1.05rem; cursor: pointer; } .mobile-nav details ul { padding: 0 0 0.5rem 1rem; } .mobile-nav details li { border: 0; } .mobile-nav details a { font-size: 0.95rem; padding: 0.5rem 0; color: var(--ink-2); } .mobile-nav .mobile-cta { display: flex; gap: 1rem; padding: 1rem 0 1.25rem; align-items: center; } /* Barra de teléfono fija en móvil (un toque siempre) */ /* Migas */ .breadcrumbs { font-size: 0.85rem; color: var(--ink-3); padding: 1rem 0 0; } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line); } .breadcrumbs a { color: var(--ink-3); } .breadcrumbs a:hover { color: var(--acento); } /* Hero */ .hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 8vw, 6rem); border-bottom: 1px solid var(--line); } .hero h1 { max-width: 12em; } .hero .lead { margin-top: 1.5rem; } .hero .urgencia { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-2); max-width: 46em; } .hero-aside { border-left: 1px solid var(--line); padding-left: 1.5rem; font-size: 0.95rem; color: var(--ink-2); } .hero-aside dl { margin: 0; display: grid; gap: 0.6rem; } .hero-aside dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); } .hero-aside dd { margin: 0; } /* Lista editorial (áreas, grados...) */ .list-ed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .list-ed li { display: grid; grid-template-columns: 4ch 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); align-items: baseline; } .list-ed .num { font-size: 0.9rem; } .list-ed h3 { font-size: 1.35rem; margin-bottom: 0.35rem; } .list-ed h3 a { color: var(--ink); text-decoration: none; } .list-ed h3 a:hover { color: var(--acento); } .list-ed p { margin: 0; color: var(--ink-2); font-size: 0.98rem; } @media (min-width: 800px) { .list-ed--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; border-top: 0; } .list-ed--2 li { border-top: 1px solid var(--line); border-bottom: 0; } } /* Columnas de principios */ .cols { display: grid; gap: 2rem; } .cols > div { border-top: 1px solid var(--line); padding-top: 1.25rem; } .cols h3 { margin-bottom: 0.6rem; } .cols p { color: var(--ink-2); font-size: 0.98rem; margin: 0; } @media (min-width: 800px) { .cols { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } /* Presentación */ .presentacion { display: grid; gap: 2rem; align-items: start; } .presentacion .foto { aspect-ratio: 4 / 5; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-size: 0.85rem; text-align: center; padding: 1rem; } @media (min-width: 800px) { .presentacion { grid-template-columns: 5fr 7fr; gap: 4rem; } .presentacion .foto { max-width: 420px; } } .presentacion p { max-width: 36em; } .colegiacion { font-size: 0.9rem; color: var(--ink-3); } /* CTA final */ .cta-final { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cta-final .inner { display: grid; gap: 2rem; } .cta-final h2 { max-width: 14em; } .cta-final dl { margin: 0; display: grid; gap: 1rem; font-size: 0.98rem; } .cta-final dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 0.15rem; } .cta-final dd { margin: 0; } @media (min-width: 900px) { .cta-final .inner { grid-template-columns: 7fr 5fr; align-items: start; } } .cta-inline { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); padding: 1.75rem 0; margin: 3rem 0; display: grid; gap: 1rem; } .cta-inline h3 { font-size: 1.4rem; } .cta-inline p { margin: 0; color: var(--ink-2); font-size: 0.98rem; } @media (min-width: 800px) { .cta-inline { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; } } /* Footer */ .footer { background: var(--footer); color: #cfcdc7; padding-block: 3.5rem 2rem; font-size: 0.92rem; } .footer a { color: #f4f3ef; text-decoration: none; } .footer a:hover { text-decoration: underline; } .footer .cols-f { display: grid; gap: 2rem; } @media (min-width: 800px) { .footer .cols-f { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } } .footer .f-title, .footer h4 { color: #fff; font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; font-weight: 500; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .footer .brand { color: #fff; font-size: 1.35rem; } .footer .brand small { color: #9b9993; } .footer address { font-style: normal; margin-top: 1rem; line-height: 1.6; } .footer .legal { border-top: 1px solid #3a3a38; margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.82rem; color: #9b9993; } /* Publicaciones */ .pubs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .pubs li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.35rem; } .pubs .meta { order: -1; } .pubs h3 a { color: var(--ink); text-decoration: none; } .pubs h3 a:hover { color: var(--acento); } .pubs p { margin: 0; color: var(--ink-2); font-size: 0.98rem; max-width: 50em; } @media (min-width: 800px) { .pubs li { grid-template-columns: 12rem 1fr; column-gap: 2rem; } .pubs .meta { order: 0; padding-top: 0.35rem; } .pubs p { grid-column: 2; } } /* Layout artículo: contenido + sidebar */ .article-layout { display: grid; gap: 3rem; padding-block: 2rem 4rem; } @media (min-width: 1000px) { .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; } .article-layout--wide { grid-template-columns: minmax(0, 1fr) 320px; } } .sidebar { display: none; } @media (min-width: 1000px) { .sidebar { display: block; } .sidebar-inner { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 2.5rem; } } .widget h4 { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin: 0 0 0.75rem; font-weight: 500; } .widget-cta { border: 1px solid var(--line); padding: 1.25rem; font-size: 0.95rem; } .widget-cta p { margin: 0 0 1rem; color: var(--ink-2); } .widget-cta .tel { display: block; font-size: 1.15rem; margin-bottom: 0.75rem; } /* TOC */ .aradas-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); } .aradas-toc li a { display: block; padding: 0.35rem 0 0.35rem 1rem; font-size: 0.9rem; color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; } .aradas-toc li li a { padding-left: 1.75rem; font-size: 0.85rem; color: var(--ink-3); } .aradas-toc li a:hover { color: var(--acento); } .aradas-toc li a.is-active { color: var(--acento); border-left-color: var(--acento); } .toc-mobile { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1.5rem 0 2rem; } .toc-mobile summary { padding: 0.9rem 0; cursor: pointer; font-weight: 500; font-size: 0.95rem; list-style: none; display: flex; justify-content: space-between; } .toc-mobile summary::-webkit-details-marker { display: none; } .toc-mobile summary::after { content: "+"; color: var(--ink-3); } .toc-mobile[open] summary::after { content: "–"; } .toc-mobile .aradas-toc { padding-bottom: 1rem; } @media (min-width: 1000px) { .toc-mobile { display: none; } } /* Contenido de artículo */ .entry-header { padding-top: 1rem; } .entry-header h1 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 20em; } .entry-header .meta { margin: 1rem 0 0; } .entry-header .lead { margin-top: 1.25rem; font-size: 1.15rem; } .featured { aspect-ratio: 16 / 9; background: var(--bg-2); border: 1px solid var(--line); margin: 2rem 0; display: grid; place-items: center; color: var(--ink-3); font-size: 0.85rem; text-align: center; padding: 1rem; } .prose { max-width: var(--medida); } .prose > * + * { margin-top: 1.25em; } .prose h2 { margin-top: 2.5em; margin-bottom: 0.6em; } .prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: 0.4em; } .prose blockquote { margin: 1.5em 0; padding: 0 0 0 1.25em; border-left: 2px solid var(--acento); color: var(--ink-2); font-style: italic; } .prose figure { margin: 2em 0; } .prose figcaption { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.5rem; } .archivo-nota { font-size: 0.9rem; background: var(--bg-2); padding: 0.9rem 1.1rem; border-left: 2px solid var(--ink-3); } /* Bloques post-artículo */ .tramite { border: 1px solid var(--line); padding: 1.5rem; margin: 2.5rem 0; } .tramite h3 { font-size: 1.25rem; margin-bottom: 0.75rem; } .tramite ol { margin: 0; padding-left: 1.3em; color: var(--ink-2); font-size: 0.98rem; } .tramite li + li { margin-top: 0.4em; } .autor { display: grid; grid-template-columns: 72px 1fr; gap: 1.25rem; align-items: center; border-top: 1px solid var(--ink); padding-top: 1.5rem; margin-top: 3rem; } .autor .foto { width: 72px; aspect-ratio: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 50%; } .autor p { margin: 0; font-size: 0.95rem; color: var(--ink-2); } .autor strong { color: var(--ink); font-weight: 600; } .related { margin-top: 3rem; } .related h2 { font-size: 1.5rem; margin-bottom: 1rem; } .related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .related li { border-bottom: 1px solid var(--line); padding: 0.9rem 0; } .related a { color: var(--ink); text-decoration: none; } .related a:hover { color: var(--acento); } /* Tablas */ .table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); background: linear-gradient(to right, var(--bg) 30%, rgba(250,249,247,0)) left, linear-gradient(to left, var(--bg) 30%, rgba(250,249,247,0)) right, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.14), rgba(0,0,0,0)) left, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.14), rgba(0,0,0,0)) right; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .table-wrap .scroll-hint { position: sticky; left: 0; font-size: 0.75rem; color: var(--ink-3); padding: 0.4rem 0; } @media (min-width: 800px) { .table-wrap .scroll-hint { display: none; } } table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-family: var(--sans); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); background: var(--bg); position: sticky; top: 0; } tbody tr:nth-child(even) { background: var(--bg-2); } td.n, th.n { text-align: right; white-space: nowrap; } .table-key { font-size: 0.98rem; } .table-key th { width: 40%; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink); background: transparent; position: static; } /* Ficha convenio */ .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; } .badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.3rem 0.6rem; border: 1px solid var(--line); color: var(--ink-2); } .badge--ok { border-color: var(--acento); color: var(--acento); } .badge--warn { border-color: #9a6a12; color: #9a6a12; } .descarga { border: 1px solid var(--ink); padding: 1.5rem; margin: 2rem 0; display: grid; gap: 1rem; } .descarga h2 { font-size: 1.35rem; } .descarga dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; } .descarga dt { color: var(--ink-3); } .descarga dd { margin: 0; } @media (min-width: 800px) { .descarga { grid-template-columns: 1fr auto; align-items: center; } .descarga dl { grid-column: 1; } .descarga .btn { grid-row: 1 / span 2; grid-column: 2; } } .filtros { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); margin-bottom: 2rem; } .filtros label { display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--ink-2); min-width: 0; } .filtros input, .filtros select { font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%; min-width: 0; box-sizing: border-box; } .filtros select { text-overflow: ellipsis; } @media (min-width: 800px) { .filtros { grid-template-columns: 2fr 1fr 1fr; align-items: end; } } /* Diagrama de proceso (SVG marcadores + HTML etiquetas) */ .proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; } .proceso li { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 0 0 1.75rem; } .proceso li::before { content: ""; position: absolute; left: calc(1.25rem - 0.5px); top: 1.4rem; bottom: -0.2rem; width: 1px; background: var(--line); } .proceso li:last-child::before { display: none; } .proceso .mark { width: 2.5rem; height: 2.5rem; } .proceso .mark circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1; } .proceso .mark text { font-family: var(--serif); font-size: 15px; fill: var(--ink); } .proceso li.judicial .mark circle { stroke: var(--acento); } .proceso li.judicial .mark text { fill: var(--acento); } .proceso h3 { font-size: 1.15rem; margin: 0.35rem 0 0.25rem; } .proceso h3 a { color: var(--ink); text-decoration: none; } .proceso h3 a:hover { color: var(--acento); } .proceso p { margin: 0; font-size: 0.92rem; color: var(--ink-2); max-width: 32em; } .proceso .plazo { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.3rem; letter-spacing: 0.02em; } .proceso-grupos { margin: 2rem 0; display: grid; gap: 1.5rem; } .proceso-grupo .fase { margin: 0 0 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; } .proceso-grupo.judicial .fase { color: var(--acento); border-color: var(--acento); } @media (min-width: 900px) { .proceso-grupos { gap: 2.5rem; } .proceso { grid-template-columns: repeat(var(--pasos, 4), 1fr); gap: 0 1rem; } .proceso li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; padding: 0; } .proceso li::before { left: 2.5rem; right: -1rem; top: 1.25rem; bottom: auto; height: 1px; width: auto; } .proceso h3 { font-size: 1.05rem; } .proceso p { font-size: 0.88rem; } } /* Grados (4 tarjetas sin tarjeta) */ .grados { display: grid; gap: 0; border-top: 1px solid var(--line); } .grados > a { display: block; padding: 1.5rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; } .grados > a:hover h3 { color: var(--acento); } .grados h3 { margin-bottom: 0.4rem; } .grados p { margin: 0; color: var(--ink-2); font-size: 0.95rem; } .grados .pct { font-family: var(--serif); font-size: 2rem; color: var(--ink-3); display: block; margin-bottom: 0.5rem; } @media (min-width: 800px) { .grados { grid-template-columns: repeat(4, 1fr); gap: 0 2rem; } .grados > a { border-top: 0; } } /* Índice de dolencias */ .dolencias h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .dolencias h2:first-child { margin-top: 0; } .dolencias ul { list-style: none; margin: 0; padding: 0; columns: 1; } .dolencias li { padding: 0.45rem 0; break-inside: avoid; font-size: 0.98rem; } .dolencias li a { color: var(--ink); text-decoration: none; } .dolencias li a:hover { color: var(--acento); text-decoration: underline; } .dolencias li span { display: block; font-size: 0.85rem; color: var(--ink-3); } .dolencias li .prox { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } @media (min-width: 800px) { .dolencias ul { columns: 2; column-gap: 3rem; } } /* Peritos */ .peritos { display: grid; gap: 2rem; } @media (min-width: 900px) { .peritos { grid-template-columns: 5fr 7fr; gap: 4rem; } } .peritos ul { margin: 1rem 0 0; padding-left: 1.2em; color: var(--ink-2); } /* Botón Contacto del header solo en desktop (en móvil está en la barra fija) */ .header .header-right .btn { display: none; } @media (min-width: 1000px) { .header .header-right .btn { display: inline-flex; padding: 0.6rem 1.1rem; } } /* Listas de enlaces en widgets */ .linklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .linklist li { border-bottom: 1px solid var(--line); padding: 0.55rem 0; font-size: 0.92rem; } .linklist a { color: var(--ink); text-decoration: none; } .linklist a:hover { color: var(--acento); } /* Prosa ancha (fichas de convenio): párrafos a 70ch, tablas a toda la columna */ .prose--wide { max-width: none; } .prose--wide > :not(.table-wrap) { max-width: var(--medida); } /* Foto de presentación en móvil: no ocupar toda la pantalla */ .presentacion .foto { max-width: 320px; } /* Cabecera de artículo con imagen destacada y título solapado */ .entry-hero { margin-top: 1rem; } .entry-hero .featured { margin: 0; aspect-ratio: 16 / 9; } .entry-hero .entry-header { position: relative; background: var(--bg); margin-top: -3rem; margin-right: 2rem; padding: 1.5rem 1.5rem 0 0; } .entry-hero .entry-header h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); } @media (min-width: 800px) { .entry-hero .entry-header { margin-top: -6rem; margin-right: 15%; padding: 2rem 2.5rem 0 0; } } @media (min-width: 1000px) { .entry-hero .featured { aspect-ratio: 2 / 1; } } /* Documentos oficiales del convenio (0..n botones) */ .descarga .docs { display: flex; flex-wrap: wrap; gap: 0.75rem; } .descarga .docs .btn { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .descarga .docs .btn small { font-weight: 400; font-size: 0.78rem; opacity: 0.85; } @media (min-width: 800px) { .descarga--docs { display: block; } .descarga--docs .docs { margin-top: 1rem; } } /* Grados de IP: listado editorial (sustituye a la tabla, ilegible en móvil) */ .grados-lista { list-style: none; margin: 1.5rem 0 2.5rem; padding: 0; border-top: 1px solid var(--line); } .grados-lista > li { padding: 1.35rem 0; border-bottom: 1px solid var(--line); } .grados-lista h3 { margin: 0 0 0.6rem; font-size: 1.25rem; } .grados-lista h3 a { color: var(--ink); text-decoration: none; } .grados-lista h3 a:hover { color: var(--acento); } .grados-lista dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; } .grados-lista dt { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.2em; } .grados-lista dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; } .grados-lista dd strong { color: var(--ink); } @media (min-width: 720px) { .grados-lista > li { display: grid; grid-template-columns: 11rem 1fr; gap: 0 2rem; } .grados-lista h3 { margin: 0; } } /* ========================================================================== Específico de WordPress ========================================================================== */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 100; clip: auto; clip-path: none; width: auto; height: auto; padding: 0.6rem 1rem; background: var(--ink); color: #fff; } .widget-title { font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin: 0 0 0.75rem; font-weight: 500; } .sidebar .widget + .widget { margin-top: 2.5rem; } .h3 { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 400; line-height: 1.3; } .toc-inline { display: none; } @media (min-width: 1000px) { .toc-inline { display: block; margin: 0 0 2.5rem; } .toc-inline .aradas-toc ol { columns: 2; column-gap: 2rem; border-left: 0; } .toc-inline .aradas-toc ol ol { columns: 1; } .toc-inline .aradas-toc li a { border-left: 0; padding-left: 0; } .toc-inline .aradas-toc li li a { padding-left: 1rem; } } .featured { position: relative; } .featured img { width: 100%; height: 100%; object-fit: cover; } .presentacion .foto img, .autor .foto img { width: 100%; height: 100%; object-fit: cover; } .autor .foto { overflow: hidden; } .tramite h2 { font-size: 1.25rem; margin: 0 0 0.75rem; } .tramite-links { margin: 1rem 0 0; font-size: 0.95rem; } .cta-final .cta-texto { color: var(--ink-2); max-width: 40em; margin: 0.75rem 0 0; } .tabla-salarial-imagen { margin: 1.5rem 0; } .tabla-salarial-imagen img { border: 1px solid var(--line); } .aviso-no-vigente { border-left: 2px solid #9a6a12; background: #fff8e8; padding: 0.9rem 1.1rem; margin: 1.5rem 0; font-size: 0.95rem; } .convenio-intro { margin: 1.5rem 0; } /* Contenido de bloques (Gutenberg) dentro de .prose */ .prose .wp-block-image, .prose figure.aligncenter, .prose figure.alignleft, .prose figure.alignright { margin: 2em 0; } .prose .wp-block-image img { height: auto; } .prose .alignwide { margin-left: 0; margin-right: 0; } .prose .wp-block-table table { margin: 0; } .prose .wp-block-quote { border-left: 2px solid var(--acento); padding-left: 1.25em; margin: 1.5em 0; font-style: italic; color: var(--ink-2); } .prose .wp-block-quote cite { font-style: normal; font-size: 0.9rem; color: var(--ink-3); } .prose .wp-block-buttons .wp-block-button__link { border-radius: 0; background: var(--acento); color: #fff; padding: 0.8rem 1.4rem; font-size: 0.95rem; } .prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; } .prose .wp-block-columns { gap: 2rem; } .prose .wp-block-group.has-background { padding: 1.5rem; } .prose .wp-block-embed iframe { max-width: 100%; } .prose details summary { cursor: pointer; font-weight: 500; } .prose h4 { margin-top: 1.5em; margin-bottom: 0.4em; } .prose > .table-wrap:first-child { margin-top: 0; } .prose ul.wp-block-list, .prose ol.wp-block-list { padding-left: 1.4em; } .prose img { max-width: 100%; height: auto; } .prose iframe { max-width: 100%; } .prose .wp-caption { max-width: 100%; } .prose .wp-caption-text, .prose figcaption { font-size: 0.85rem; color: var(--ink-3); margin-top: 0.5rem; } /* Restos de Elementor/legacy en contenido antiguo: neutralizar */ .prose [style*="text-align: justify"], .prose [style*="text-align:justify"] { text-align: left !important; } /* Blog: tarjetas 16:9 */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 2rem; } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card .featured { aspect-ratio: 16 / 9; margin: 0 0 1rem; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .card h2 { font-size: 1.3rem; line-height: 1.25; margin-bottom: 0.4rem; } .card h2 a { color: var(--ink); text-decoration: none; } .card h2 a:hover { color: var(--acento); } .card p { margin: 0; color: var(--ink-2); font-size: 0.95rem; } .card .meta { display: block; margin-bottom: 0.4rem; } .paginacion { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 3rem 0 0; } .paginacion .page-numbers { padding: 0.5rem 0.9rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 0.95rem; } .paginacion .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); } .paginacion a.page-numbers:hover { border-color: var(--acento); color: var(--acento); } .page-header { padding: 2rem 0 1rem; } .page-header h1 { font-size: clamp(2rem, 4.5vw, 3rem); } .page-header .lead { margin-top: 1rem; } .archive-list { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--ink); } .archive-list li { border-bottom: 1px solid var(--line); padding: 1.25rem 0; display: grid; gap: 0.3rem 2rem; } @media (min-width: 800px) { .archive-list li { grid-template-columns: 1fr 12rem 10rem; align-items: baseline; } } .archive-list h2 { font-size: 1.25rem; } .archive-list h2 a { color: var(--ink); text-decoration: none; } .archive-list h2 a:hover { color: var(--acento); } .archive-list .meta { font-size: 0.9rem; } .error-404 { padding: 4rem 0 6rem; } .search-form { display: flex; gap: 0.5rem; max-width: 30rem; } .search-form input[type="search"] { flex: 1; font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--line); background: #fff; color: var(--ink); } .search-form button { font: inherit; padding: 0.6rem 1rem; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; } /* Formulario de contacto (CF7) */ .wpcf7 form { display: grid; gap: 1rem; max-width: 40rem; } .wpcf7 label { display: grid; gap: 0.35rem; font-size: 0.95rem; } .wpcf7 input:not([type="submit"]):not([type="checkbox"]), .wpcf7 textarea, .wpcf7 select { font: inherit; width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--line); background: #fff; color: var(--ink); } .wpcf7 input[type="submit"] { font: inherit; font-weight: 500; padding: 0.8rem 1.4rem; background: var(--acento); color: #fff; border: 1px solid var(--acento); cursor: pointer; } .wpcf7 input[type="submit"]:hover { background: var(--ink); border-color: var(--ink); } .wpcf7 .wpcf7-not-valid-tip { color: #b32d2e; font-size: 0.85rem; } .wpcf7 .wpcf7-response-output { border: 1px solid var(--line); padding: 0.75rem 1rem; margin: 0; } /* Landing de campaña: sin navegación */ .es-landing .header .nav, .es-landing .header .menu-toggle, .es-landing .footer .cols-f > div:not(:first-child) { display: none; } .es-landing .footer .cols-f { grid-template-columns: 1fr; } .landing-hero { padding-block: clamp(3rem, 8vw, 6rem); } .landing-hero .grid { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .landing-hero .grid { grid-template-columns: 6fr 5fr; align-items: start; } } .landing-form { border: 1px solid var(--ink); padding: 1.5rem; background: #fff; } /* Ficha de convenio: prosa ancha */ .single-convenio .prose { max-width: none; } .single-convenio .prose > :not(.table-wrap) { max-width: var(--medida); } .single-convenio .prose .seccion-convenio > :not(.table-wrap) { max-width: var(--medida); } .single-convenio .prose .seccion-convenio { max-width: none; } /* Impresión */ @media print { .header, .footer, .sidebar, .cta-final, .toc-mobile { display: none !important; } body { padding: 0; } } .footer .f-title--sep { margin-top: 1.5rem; } .footer .colegiacion-f { margin-top: 1rem; } .footer .legal li { display: inline; } .brand-logo { max-height: 44px; width: auto; } .header.is-compact .brand-logo { max-height: 36px; } .badge--off { border-color: var(--ink-3); color: var(--ink-3); background: var(--bg-2); } .resumen { margin: 2rem 0; } .resumen .h3 { margin-bottom: 0.5rem; } /* Ajustes tras la primera revisión */ .nav a, .nav button, .brand, .brand small { white-space: nowrap; } .nav ul { gap: 1.4rem; } .presentacion h2 { margin-bottom: 1.5rem; } .presentacion-texto p { max-width: 36em; } @media (min-width: 800px) { .filtros { grid-template-columns: 2fr 1fr 1fr auto; } } .filtros .btn { justify-self: start; } /* ========================================================================== Revisión 2 (cliente): más color por apartados, header compacto ========================================================================== */ :root { --acento-dark: #163f47; /* petróleo profundo: CTA final, hover */ --acento-tint: #e6eef0; /* tinte claro del acento: hero, cuadros */ --acento-tint-2: #f0f5f6; /* tinte muy suave: bandas */ } /* Header compacto: menú en 2 líneas cuando la etiqueta es larga */ .header .wrap { height: var(--header-h); } .nav a, .nav button { font-size: 0.86rem; white-space: normal; max-width: 8em; line-height: 1.15; text-align: left; } .nav ul { gap: 1.25rem; align-items: center; } .nav .sub a { max-width: none; font-size: 0.9rem; } .nav .has-sub > button { max-width: none; } .header .tel { font-size: 0.95rem; } .header .header-right .btn { padding: 0.55rem 1rem; font-size: 0.9rem; } .brand { font-size: 1.2rem; } @media (min-width: 1000px) { .header-right { gap: 1.1rem; } } /* Hero: banda tintada */ .hero { background: var(--acento-tint-2); border-bottom: 1px solid color-mix(in srgb, var(--acento) 25%, transparent); } .hero .eyebrow { color: var(--acento); } .hero .urgencia { border-top-color: color-mix(in srgb, var(--acento) 30%, transparent); } .hero-aside { border-left-color: var(--acento); background: var(--acento-tint-2); padding: 1.25rem 1.5rem; } .hero-aside dt { color: var(--acento); } /* Secciones: numeración en acento (sin filete); bandas alternas */ .section-head .num, .list-ed .num, .cols .num { color: var(--acento); } .section--bg { background: var(--bg-2); } .section--tint { background: var(--acento-tint-2); } .list-ed li { border-bottom-color: color-mix(in srgb, var(--acento) 18%, var(--line)); } .eyebrow { color: var(--acento); } .meta { color: var(--ink-3); } /* CTA final: bloque de acento oscuro */ .cta-final { background: var(--acento-dark); color: #fff; border: 0; } .cta-final h2, .cta-final dd, .cta-final .cta-texto { color: #fff; } .cta-final dt { color: color-mix(in srgb, #fff 65%, transparent); } .cta-final .tel { color: #fff; } .cta-final .tel:hover { color: var(--acento-tint); } .cta-final .btn--primary { background: #fff; color: var(--acento-dark); border-color: #fff; } .cta-final .btn--primary:hover { background: var(--acento-tint); border-color: var(--acento-tint); color: var(--acento-dark); } .cta-final a { color: #fff; } /* Cuadros con tinte */ .descarga { background: var(--acento-tint-2); border-color: var(--acento); } .table-key th { background: var(--acento-tint-2); } .tramite { background: var(--acento-tint-2); border-color: color-mix(in srgb, var(--acento) 30%, transparent); } .widget-cta { background: var(--acento-tint-2); } .toc-mobile { background: var(--acento-tint-2); padding: 0 1rem; border-color: color-mix(in srgb, var(--acento) 25%, transparent); } .badge--ok { background: var(--acento); color: #fff; } .aradas-toc li a.is-active { color: var(--acento); border-left-color: var(--acento); font-weight: 500; } .proceso-grupo .fase { color: var(--acento); } .proceso li.judicial .mark circle { fill: var(--acento); } .proceso li.judicial .mark text { fill: #fff; } .grados-tabla thead th { background: var(--acento-tint-2); } .filtros { background: var(--acento-tint-2); border-color: color-mix(in srgb, var(--acento) 25%, transparent); } .card .featured { border-color: transparent; } .page-header { border-bottom: 1px solid var(--line); margin-bottom: 2rem; } .footer { background: var(--acento-dark); } .footer .legal { border-top-color: color-mix(in srgb, #fff 15%, transparent); } .hero { background: var(--acento-tint); } .section--tint { background: var(--acento-tint-2); border-top: 1px solid color-mix(in srgb, var(--acento) 15%, transparent); } /* Menú: etiquetas de dos palabras en dos líneas; tagline sin ciudad */ .nav > ul > li > a, .nav > ul > li > button { max-width: 6.5em; } .nav > ul > li > a { display: inline-block; } /* Header: menú pegado al logo (izquierda); teléfono en recuadro fino con icono */ .header .wrap { justify-content: flex-start; gap: 0; } .header .nav { margin-left: 2.5rem; } .header .header-right { margin-left: auto; } .tel--box { display: none; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--acento); color: var(--acento); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; } .tel--box .ico { flex: none; } .tel--box:hover { background: var(--acento); color: #fff; } @media (min-width: 1000px) { .header .tel--box { display: inline-flex; } } /* Header: menú a la derecha, junto al teléfono. En móvil el menú está oculto y es header-right quien se alinea a la derecha con su propio margin auto. */ .header .nav { margin-left: auto; margin-right: 1.75rem; } .header .header-right { margin-left: auto; } @media (min-width: 1000px) { .header .header-right { margin-left: 0; } } /* Desplegable sin hueco entre el botón y el panel (no se pierde el hover al bajar) */ .nav .has-sub { padding: 0.9rem 0; } .nav .sub { margin-top: 0; padding-top: 0.6rem; background: transparent; border: 0; left: -1rem; } .nav .sub ul { background: var(--bg); border: 1px solid var(--line); padding: 0.5rem 0; box-shadow: 0 6px 18px rgba(0,0,0,0.05); } .nav .has-sub.is-open .sub { display: block; } /* Header móvil: fila = solo el primer .wrap; el panel del menú es bloque normal */ .header > .wrap { display: flex; } .mobile-nav .wrap { display: block; height: auto; } .mobile-nav { border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,0.06); } .mobile-nav ul { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; } .mobile-nav > .wrap > ul > li { border-top: 1px solid var(--line); } .mobile-nav > .wrap > ul > li:first-child { border-top: 0; } .mobile-nav a, .mobile-nav summary { display: block; padding: 0.95rem 0; color: var(--ink); text-decoration: none; font-size: 1.05rem; } .mobile-nav summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .mobile-nav summary::-webkit-details-marker { display: none; } .mobile-nav summary::after { content: ""; width: 0.5em; height: 0.5em; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); transform: rotate(45deg); margin-right: 0.3em; transition: transform 0.15s; } .mobile-nav details[open] summary::after { transform: rotate(-135deg); } .mobile-nav details ul { padding: 0 0 0.75rem 1rem; } .mobile-nav details li { border: 0; } .mobile-nav details a { font-size: 0.98rem; padding: 0.55rem 0; color: var(--ink-2); } .mobile-nav .mobile-cta { display: flex; gap: 1rem; padding: 1rem 0 1.25rem; align-items: center; border-top: 1px solid var(--line); } /* Header móvil: logo + teléfono (recuadro) + Menú */ .header .tel--box { display: inline-flex; padding: 0.45rem 0.7rem; font-size: 0.9rem; } @media (max-width: 400px) { .header .tel--box span { display: none; } .header .tel--box { padding: 0.5rem 0.6rem; } } .header-right { gap: 0.6rem; } @media (min-width: 1000px) { .header-right { gap: 1.1rem; } } .menu-toggle { padding: 0.5rem 0.75rem; } .mobile-nav .mobile-cta .btn { color: #fff; padding: 0.75rem 1.3rem; font-size: 0.95rem; display: inline-flex; } @media (max-width: 999px) { .brand { font-size: 1.1rem; } .brand small { font-size: 0.62rem; } } @media (max-width: 400px) { .header .tel--box span { display: inline; } } @media (max-width: 360px) { .header .tel--box span { display: none; } } @media (max-width: 999px) { .header .tel--box { padding: 0.4rem 0.55rem; font-size: 0.85rem; gap: 0.35rem; } .header-right { gap: 0.5rem; margin-left: 0.5rem; } .brand { font-size: 1.05rem; } .menu-toggle { padding: 0.45rem 0.6rem; } } .brand { padding-right: 0.75rem; } /* ========================================================================== Header oscuro (petróleo profundo), a juego con CTA final y footer ========================================================================== */ .header { background: var(--acento-dark); border-bottom: 0; color: #fff; } .header .brand, .header .brand small { color: #fff; } .header .brand small { color: color-mix(in srgb, #fff 65%, transparent); } .nav a, .nav button { color: #fff; } .nav a:hover, .nav button:hover, .nav a[aria-current] { color: var(--acento-tint); } .nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--acento-tint); } .nav .sub ul { background: #fff; border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .nav .sub a { color: var(--ink); } .nav .sub a:hover { color: var(--acento); background: var(--acento-tint-2); } .header .tel--box { border-color: color-mix(in srgb, #fff 55%, transparent); color: #fff; } .header .tel--box:hover { background: #fff; color: var(--acento-dark); border-color: #fff; } .header .header-right .btn--primary { background: #fff; color: var(--acento-dark); border-color: #fff; } .header .header-right .btn--primary:hover { background: var(--acento-tint); border-color: var(--acento-tint); color: var(--acento-dark); } .menu-toggle { color: #fff; border-color: color-mix(in srgb, #fff 55%, transparent); } .mobile-nav { background: var(--acento-dark); border-top: 1px solid color-mix(in srgb, #fff 15%, transparent); box-shadow: none; } .mobile-nav a, .mobile-nav summary { color: #fff; } .mobile-nav details a { color: color-mix(in srgb, #fff 80%, transparent); } .mobile-nav > .wrap > ul > li, .mobile-nav .mobile-cta { border-top-color: color-mix(in srgb, #fff 15%, transparent); } .mobile-nav summary::after { border-color: color-mix(in srgb, #fff 60%, transparent); } .mobile-nav .mobile-cta .btn { background: #fff; color: var(--acento-dark); border-color: #fff; } .header.is-compact { box-shadow: 0 1px 0 rgba(0,0,0,0.15); } /* El hero ya no necesita el tinte fuerte pegado al header oscuro: tinte suave */ .hero { background: var(--acento-tint-2); } @media (min-width: 800px) { .section-head--plain { grid-template-columns: 1fr; } .section-head--plain p { grid-column: 1; } } /* Hero de la home con ilustración de línea a la derecha del H1 */ .hero--home { padding-block: clamp(2.5rem, 7vw, 5rem) 0; overflow: hidden; } .hero-grid { display: grid; gap: 1.5rem; } .hero-texto { padding-bottom: clamp(2.5rem, 7vw, 5rem); } .hero-ilustracion { display: none; } @media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; } .hero-ilustracion { display: block; align-self: end; justify-self: end; max-width: 460px; width: 100%; } .hero-ilustracion img { width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; display: block; } } @media (min-width: 1200px) { .hero-ilustracion { max-width: 520px; } .hero-ilustracion img { max-height: 620px; } } /* Ilustración del hero casi entera: se ajusta a la altura del texto, sin recorte */ @media (min-width: 900px) { .hero-grid { align-items: stretch; } .hero-ilustracion { align-self: stretch; display: flex; justify-content: flex-end; align-items: flex-end; max-width: none; } .hero-ilustracion img { height: 100%; width: auto; max-height: 720px; max-width: 100%; object-fit: contain; object-position: right bottom; } } /* Ilustración pegada al header, recortada donde termina el texto */ @media (min-width: 900px) { .hero--home { padding-block: 0; } .hero-texto { padding-block: clamp(2.5rem, 7vw, 5rem); } .hero-grid { align-items: stretch; } .hero-ilustracion { align-items: flex-start; } .hero-ilustracion img { height: 100%; width: auto; max-height: none; max-width: 100%; object-fit: cover; object-position: right top; } } /* Sin migas: el contenido arranca con aire bajo el header */ .article-layout { padding-top: 2.5rem; } .page-header { padding-top: 2.5rem; } .hero--landing { padding-top: clamp(2.5rem, 7vw, 5rem); } /* Artículo: imagen destacada más baja para que el H1 se lea al abrir */ .entry-hero .featured { aspect-ratio: 2 / 1; } .entry-hero .entry-header { margin-top: -2.5rem; } @media (min-width: 800px) { .entry-hero .entry-header { margin-top: -5rem; } } @media (min-width: 1000px) { .entry-hero .featured { aspect-ratio: 3 / 1; } } /* La destacada respeta el ratio del contenedor (recorte), sin marco */ .entry-hero .featured, .card .featured { display: block; padding: 0; border: 0; overflow: hidden; position: relative; } .entry-hero .featured img, .card .featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Sidebar del artículo: ficha del abogado fija arriba; solo el índice es sticky */ @media (min-width: 1000px) { .sidebar-inner { position: static; display: block; } .sidebar .widget + .widget { margin-top: 2rem; } .sidebar .widget_aradas_toc { position: sticky; top: calc(var(--header-h) + 1.5rem); } .article-layout > .sidebar { align-self: stretch; } } .ficha-autor { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; border: 1px solid var(--line); border-top: 2px solid var(--acento); padding: 1.1rem 1.1rem 1rem; background: #fff; } .ficha-autor-foto { width: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg-2); } .ficha-autor-foto img { width: 100%; height: 100%; object-fit: cover; } .ficha-autor p { margin: 0; } .ficha-autor-nombre { font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; } .ficha-autor-rol { font-size: 0.85rem; color: var(--acento); margin-top: 0.15rem !important; } .ficha-autor-col { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.4rem !important; line-height: 1.4; } .ficha-autor-links { font-size: 0.85rem; margin-top: 0.5rem !important; } /* Ficha del abogado: foto grande arriba, datos debajo, dirección */ .ficha-autor { display: block; padding: 0; } .ficha-autor-foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; } .ficha-autor-foto img { object-position: center 20%; } .ficha-autor-texto { padding: 1rem 1.1rem 1.1rem; } .ficha-autor-dir { font-size: 0.85rem; color: var(--ink-2); margin-top: 0.6rem !important; line-height: 1.45; } /* Índice sticky real: la columna lateral ocupa toda la altura del artículo */ @media (min-width: 1000px) { .article-layout > .sidebar { align-self: stretch; } .sidebar-inner { height: 100%; display: flex; flex-direction: column; } .sidebar .widget_aradas_toc { position: sticky; top: calc(var(--header-h) + 1.25rem); align-self: flex-start; width: 100%; } } /* Índice más destacado y sección activa sombreada */ .widget_aradas_toc .widget-title { font-family: var(--serif); font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: 2px solid var(--acento); padding-bottom: 0.5rem; margin-bottom: 0.75rem; font-weight: 400; } .aradas-toc ol { border-left: 1px solid var(--line); } .aradas-toc li a { display: block; padding: 0.4rem 0.75rem 0.4rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 0.9rem; text-decoration: none; transition: background 0.15s, color 0.15s; } .aradas-toc li li a { padding-left: 1.75rem; font-size: 0.85rem; color: var(--ink-3); } .aradas-toc li a:hover { color: var(--acento); } .aradas-toc li a.is-active { background: var(--acento-tint-2); color: var(--acento); border-left-color: var(--acento); font-weight: 500; } /* Imagen destacada con filete fino oscuro */ .entry-hero .featured, .card .featured { border: 1px solid var(--ink); } .entry-hero .featured img, .card .featured img { inset: 0; } /* Sin borde en la destacada del artículo (el solape lo cortaba); las tarjetas del blog sí lo conservan */ .entry-hero .featured { border: 0; } .wpcf7 form p { margin: 0; } .wpcf7 label br { display: none; } .wpcf7 .fila { display: grid; gap: 1rem; } @media (min-width: 40rem) { .wpcf7 .fila { grid-template-columns: 1fr 1fr; } } .wpcf7 .wpcf7-acceptance label { display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem; } .wpcf7 .wpcf7-acceptance input[type="checkbox"] { margin-top: 0.3rem; flex: none; } .wpcf7 .wpcf7-list-item { margin: 0; } .wpcf7 input[type="submit"] { justify-self: start; } .mapa iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; } .prose .wp-block-buttons { gap: 0.75rem; } .prose .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--acento); border: 1px solid var(--acento); } .prose .wp-block-button .wp-block-button__link:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .prose details { border: 1px solid var(--line); padding: 1rem 1.25rem; margin: 1.5rem 0; } .prose details[open] summary { margin-bottom: 1rem; } .prose details p { font-size: 0.95rem; } /* Hero de landing a todo el ancho (páginas de área) */ .hero-landing { display: grid; gap: 1.5rem; } .hero-landing .hero-lead { margin-top: 0; } @media (min-width: 900px) { .hero-landing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; column-gap: 3rem; row-gap: 1.5rem; } .hero-landing .hero-cabecera { grid-column: 1; grid-row: 1; } .hero-landing .hero-lead { grid-column: 1; grid-row: 2; align-self: start; } .hero-landing .hero-aside { grid-column: 2; grid-row: 2; align-self: start; } } .hero--landing .hero-aside { background: transparent; padding: 0 0 0 1.5rem; } .has-hero { padding-top: clamp(1rem, 3vw, 2rem); } /* Hero de área: título en una línea (ocupa las dos columnas), algo más contenido que el de la home */ .hero-landing .hero-cabecera h1 { max-width: none; font-size: clamp(2.1rem, 5vw, 3.6rem); text-wrap: balance; } @media (min-width: 900px) { .hero-landing .hero-cabecera { grid-column: 1 / -1; } } /* Páginas de área: mismo layout de dos columnas que las entradas (contenido + índice sticky) */ .article-layout--page .prose { max-width: var(--medida); } .article-layout--seccion { padding-block: 0; } @media (min-width: 1000px) { .article-layout--page > article > .toc-mobile { display: none; } } .article-layout--page .entry-content > :first-child { margin-top: 0; } /* Trazos abstractos de fondo en los heros (Sobre mí y páginas de área): detrás del texto, muy tenues */ .hero--landing { position: relative; overflow: hidden; } .hero--landing > .wrap { position: relative; } .hero-lineas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; color: var(--acento); pointer-events: none; } .hero-lineas path { stroke-width: 0.85; } @media (min-width: 800px) { .hero-lineas { display: block; } } .hero-abogado { position: relative; display: grid; gap: 2rem; align-items: center; } .hero-abogado-foto { aspect-ratio: 4 / 5; max-width: 320px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 0; } .hero-abogado-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-abogado-foto .meta { padding: 1rem; } .hero-abogado-texto h1 { margin-top: 0; } .hero-abogado-datos { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-3); letter-spacing: 0.02em; } .hero-abogado-datos + .hero-lead { margin-top: 1.25rem; } .hero-abogado-pasion { margin-top: 1.25rem; max-width: 36em; color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; } @media (min-width: 800px) { .hero-abogado { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } .hero-abogado-foto { max-width: 400px; } } /* Cifras grandes (divulgación) y columnas dentro del contenido editable */ .prose .cifras { display: grid; gap: 1.5rem; margin: 2rem 0; padding: 0; list-style: none; } .prose .cifras li { border-top: 1px solid var(--line); padding-top: 1rem; } .prose .cifras strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; color: var(--acento); } .prose .cifras span { display: block; font-size: 0.9rem; color: var(--ink-2); margin-top: 0.35rem; } @media (min-width: 640px) { .prose .cifras { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .prose .cols { margin: 1.5rem 0 2rem; } .prose .cols h3 { margin-top: 0; font-size: 1.15rem; } .prose .cols .num { display: block; margin-bottom: 0.5rem; } .prose .cols p { font-size: 0.95rem; } .prose .cols ul { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; color: var(--ink-2); } .prose .cols ul li { margin: 0.2rem 0; } .prose .cols--2 { grid-template-columns: 1fr; } @media (min-width: 800px) { .prose .cols--2 { grid-template-columns: repeat(2, 1fr); } } /* Contacto: tres vías (teléfono, WhatsApp, correo), despacho + mapa */ .contacto-vias { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; } .contacto-vias li { border-top: 1px solid var(--line); padding-top: 1.25rem; } .contacto-vias .eyebrow { margin-bottom: 0.5rem; } .contacto-vias .valor { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; margin: 0; overflow-wrap: anywhere; } .contacto-vias .valor a { color: var(--ink); text-decoration: none; } .contacto-vias .valor a:hover { color: var(--acento); } .contacto-vias .valor--email { font-size: clamp(1.15rem, 2vw, 1.4rem); } .contacto-vias .nota { color: var(--ink-2); font-size: 0.95rem; margin: 0.6rem 0 0; max-width: 30em; } .contacto-vias .btn { margin-top: 1rem; } @media (min-width: 800px) { .contacto-vias { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .contacto-lugar { display: grid; gap: 2rem; } .contacto-lugar h2 { margin-top: 0; } .contacto-lugar .direccion { font-size: 1.1rem; } .contacto-horario { margin: 1.5rem 0 0; display: grid; gap: 0.25rem 1.5rem; } .contacto-horario dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acento); margin-top: 0.75rem; } .contacto-horario dd { margin: 0; color: var(--ink-2); } .mapa { aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--line); } .mapa iframe { width: 100%; height: 100%; border: 0; display: block; } @media (min-width: 800px) { .contacto-lugar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } .mapa { aspect-ratio: 16 / 10; } } /* Contacto: dos vías; icono de WhatsApp junto al número */ @media (min-width: 800px) { .contacto-vias { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } } .contacto-vias .valor .wa { display: inline-flex; vertical-align: middle; margin-left: 0.6rem; color: var(--acento); } .contacto-vias .valor .wa:hover { color: var(--ink); } .contacto-vias .valor .wa svg { display: block; } /* Contacto: datos en el resumen lateral del hero; el mapa va justo debajo */ .hero-aside--contacto dl { gap: 1rem; } .hero-aside--contacto .valor { font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; } .hero-aside--contacto .valor a { color: var(--ink); text-decoration: none; } .hero-aside--contacto .valor a:hover { color: var(--acento); } .hero-aside--contacto .valor--email { font-size: clamp(1.05rem, 1.8vw, 1.25rem); } .hero-aside--contacto .wa { display: inline-flex; vertical-align: middle; margin-left: 0.5rem; color: var(--acento); } .hero-aside--contacto .wa:hover { color: var(--ink); } .hero-aside--contacto .wa svg { display: block; } /* Hero: nota adicional bajo la entradilla (p. ej. peritos colaboradores en IP) */ .hero-extra { color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; max-width: 36em; margin-top: -0.6rem; } .hero-landing .hero-lead:has(+ .hero-extra) { margin-bottom: 0; } .hero-extra p { margin: 0; } @media (min-width: 900px) { .hero-landing .hero-extra { grid-column: 1; grid-row: 3; align-self: start; } .hero-landing .hero-aside { grid-row: 2 / span 2; } } /* IP: dolencias dentro del cuerpo de artículo (categorías como H3) */ .prose .dolencias h3 { font-size: 1.25rem; margin: 2rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); } .prose .dolencias ul { list-style: none; margin: 0; padding: 0; } /* Ficha de convenio: cabecera a todo el ancho en banda de hero; el índice arranca con el contenido */ .hero-convenio { position: relative; } .hero-convenio .hero-cabecera h1 { max-width: none; font-size: clamp(2rem, 4.5vw, 3.2rem); text-wrap: balance; } .hero-convenio .badges { margin-top: 1rem; } .hero-convenio .lead { margin-top: 1.25rem; } .hero-convenio .meta { margin-top: 0.75rem; } .hero--convenio + .article-layout { padding-top: clamp(1.5rem, 3vw, 2.5rem); } .hero--convenio + .article-layout .descarga { margin-top: 0; } /* CTA final: petróleo medio (distinto del petróleo oscuro del footer); sin botones, datos de contacto a la derecha */ .cta-final { background: var(--acento); color: #fff; border: 0; } .cta-final h2, .cta-final dd, .cta-final .cta-texto { color: #fff; } .cta-final .cta-texto { color: color-mix(in srgb, #fff 85%, transparent); } .cta-final dt { color: color-mix(in srgb, #fff 65%, transparent); } .cta-final dd a { color: #fff; } .cta-final dd a:hover { color: var(--acento-tint); } .cta-final .cta-tel { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; } .cta-final .cta-tel a { text-decoration: none; } .cta-final .cta-tel .wa { display: inline-flex; vertical-align: middle; margin-left: 0.4rem; color: #fff; } .cta-final .cta-tel .wa:hover { color: var(--acento-tint); } .cta-final .cta-tel .wa svg { display: block; } @media (min-width: 900px) { .cta-final .inner { grid-template-columns: 6fr 5fr; column-gap: 4rem; } } /* Mapa dentro del contenido (p. ej. SMAC en /papeleta-smac/) */ .prose .mapa { margin: 1.5rem 0 2rem; aspect-ratio: 16 / 9; } /* Bloque «Relacionado» al final del contenido */ .prose .relacionado { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ink); } .prose .relacionado .eyebrow { margin-bottom: 0.5rem; } .prose .relacionado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; } .prose .relacionado li { border-bottom: 1px solid var(--line); } .prose .relacionado a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); text-decoration: none; } .prose .relacionado a:hover span:first-child { color: var(--acento); text-decoration: underline; text-underline-offset: 0.15em; } .prose .relacionado .flecha { color: var(--acento); font-family: var(--sans); font-size: 0.95rem; transition: transform 0.15s; } .prose .relacionado a:hover .flecha { transform: translateX(3px); } @media (min-width: 700px) { .prose .relacionado ul { grid-template-columns: 1fr 1fr; } } /* Home: credenciales bajo el H1 (mismo estilo que en Sobre mí) */ .hero-credenciales { margin-top: 0.75rem; } .hero-credenciales + .lead { margin-top: 1.25rem; } /* Credenciales: lista en línea con separadores alineados */ .credenciales { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 0.25rem; font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0; } .credenciales li { white-space: nowrap; } .credenciales li:not(:last-child)::after { content: "·"; margin: 0 0.6em; color: var(--acento); } ul.hero-credenciales { margin-top: 0.75rem; } ul.hero-abogado-datos { margin-top: 0.75rem; } /* Hero de la home: la altura la marca el texto; la ilustración se recorta (posición absoluta en su celda) */ @media (min-width: 900px) { .hero-ilustracion { position: relative; min-height: 0; } .hero-ilustracion picture, .hero-ilustracion img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-ilustracion img { object-fit: contain; object-position: right center; max-height: none; } } /* Home: foto de la presentación cuadrada, recortada a la cara */ .presentacion .foto { aspect-ratio: 1 / 1; overflow: hidden; } .presentacion .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; } /* Paginación editorial: filete superior, números en serif, aire antes de la CTA */ .paginacion { margin: 3.5rem 0 0; padding: 1.5rem 0 clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--ink); gap: 0.25rem; align-items: center; justify-content: center; } .paginacion .page-numbers { min-width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6rem; border: 0; border-bottom: 2px solid transparent; font-family: var(--serif); font-size: 1.05rem; color: var(--ink-2); transition: color 0.15s, border-color 0.15s; } .paginacion .page-numbers.current { background: transparent; color: var(--ink); border-bottom-color: var(--acento); font-weight: 500; } .paginacion a.page-numbers:hover { color: var(--acento); border-bottom-color: color-mix(in srgb, var(--acento) 40%, transparent); } .paginacion .page-numbers.dots { color: var(--ink-3); } .paginacion .prev, .paginacion .next { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.02em; padding: 0 0.9rem; } .paginacion .prev { margin-right: auto; } .paginacion .next { margin-left: auto; } /* Menú: el subrayado del elemento activo se ajusta al texto (etiquetas de dos líneas centradas) */ .nav > ul > li > a { width: -moz-fit-content; width: fit-content; text-align: center; text-wrap: balance; } .nav > ul > li > a[aria-current] { box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; } /* Footer compacto y ordenado: una sola fila de columnas; encabezados claros, enlaces más apagados */ .footer { padding-block: 2.5rem 1.25rem; font-size: 0.85rem; } .footer .cols-f { gap: 1.5rem; } @media (min-width: 720px) { .footer .cols-f { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } .footer .cols-f > div:first-child { grid-column: 1 / -1; } } @media (min-width: 1000px) { .footer .cols-f { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } .footer .cols-f > div:first-child { grid-column: auto; } } .footer .f-title { color: #fff; font-size: 0.7rem; letter-spacing: 0.14em; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent); } .footer ul { gap: 0.35rem; } .footer ul a { color: color-mix(in srgb, #fff 68%, var(--acento-dark)); font-size: 0.85rem; line-height: 1.4; } .footer ul a:hover { color: #fff; text-decoration: none; } .footer .f-otra { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed color-mix(in srgb, #fff 18%, transparent); } .footer .brand { font-size: 1.2rem; } .footer address { margin-top: 0.75rem; line-height: 1.55; font-size: 0.85rem; color: color-mix(in srgb, #fff 75%, var(--acento-dark)); } .footer address a { color: #fff; } .footer .legal { margin-top: 2rem; padding-top: 1rem; font-size: 0.78rem; } /* Ficha del abogado (sidebar): foto cuadrada sin recortar la cabeza; teléfono, WhatsApp y correo */ .ficha-autor-foto { aspect-ratio: 1 / 1; } .ficha-autor-foto img { object-position: center 22%; } .ficha-autor-contacto { margin-top: 0.6rem !important; font-size: 0.9rem; line-height: 1.6; } .ficha-autor-contacto a { color: var(--ink); text-decoration: none; font-weight: 500; } .ficha-autor-contacto a:hover { color: var(--acento); } .ficha-autor-contacto .wa { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; color: var(--acento); } .ficha-autor-contacto .wa svg { display: block; } /* Ficha del abogado: foto más pequeña, con margen y sin cortar la cabeza */ .ficha-autor-foto { width: 128px; margin: 1.1rem 1.1rem 0; aspect-ratio: 1 / 1; } .ficha-autor-foto img { object-position: center 10%; } .ficha-autor-texto { padding-top: 0.75rem; } .ficha-autor-foto { margin-left: auto; margin-right: auto; } .ficha-autor-texto { text-align: center; } /* Aviso de cookies (banner inferior sobrio) */ .cookies-banner { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--footer); color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.18); } .cookies-banner-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; } .cookies-banner p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); max-width: 68ch; } .cookies-banner a { color: #fff; } .cookies-banner-botones { display: flex; gap: 0.75rem; } .cookies-banner-botones button { font: inherit; font-size: 0.9rem; padding: 0.55rem 1.4rem; cursor: pointer; border: 1px solid #fff; background: #fff; color: var(--ink); } .cookies-banner-botones button[data-cookies="no"] { background: transparent; color: #fff; } .cookies-banner-botones button:hover { background: var(--acento); border-color: var(--acento); color: #fff; } /* Mapa bloqueado hasta el consentimiento (dentro de .mapa, que fija la proporción) */ .mapa-bloqueado { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; padding: 1.5rem; } .mapa-bloqueado p { margin: 0; font-size: 0.95rem; color: var(--ink-2); } .mapa-bloqueado .meta { font-size: 0.8rem; color: var(--ink-3); max-width: 44ch; } .mapa-bloqueado button { font: inherit; font-size: 0.9rem; padding: 0.55rem 1.4rem; cursor: pointer; border: 1px solid var(--acento); background: var(--acento); color: var(--acento-ink); } .mapa-bloqueado button:hover { background: var(--acento-dark); border-color: var(--acento-dark); } /* Enlace «Preferencias de cookies» en la línea legal del footer */ .footer .legal [data-cookies-abrir] { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 2px; } .footer .legal [data-cookies-abrir]:hover { color: #fff; }