:root { --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-2xs: 0.875rem; --t-ms: 1rem; --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.5rem; --t-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); --t-3xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); --t-ficha: clamp(2rem, 1.45rem + 1.6vw, 2.75rem); --t-hero: clamp(2.25rem, 1.35rem + 3.3vw, 4rem); --filete-titulo-ancho: 48px; --filete-titulo-alto: 3px; --interlineado: 1.55; --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem; --e-9: 6rem; --ancho: 76rem; --gutter: 16px; --barra-movil: 72px; --filete-ancho: 1px; --filete-fuerte: 1px solid var(--tinta); --foco: 2px solid var(--tinta); --icono-s: 20px; --icono-m: 24px; --icono-l: 30px; --icono-trazo: 1.5; --curva-salida: cubic-bezier(0.23, 1, 0.32, 1); --curva-suave: ease; --dur-resalte: 160ms; --dur-subrayado: 220ms; --dur-entrada: 480ms; --desplaz-entrada: 12px; --escalon: 45ms; }
@media (min-width: 768px) {
:root { --gutter: 32px; }
}
@media (min-width: 1280px) {
:root { --gutter: 48px; }
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-4); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente-texto); font-size: var(--t-m); line-height: var(--interlineado); overflow-x: hidden; }
::selection { background: var(--tinta); color: var(--fondo); }
img,
svg { display: block; max-width: 100%; }
img { height: auto; }
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure { margin: 0; }
ul,
ol { padding: 0; list-style: none; }
h1,
h2,
h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: var(--t-l); }
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--acento-tinta); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--foco); outline-offset: 2px; }
strong { font-weight: 600; }
button,
input { font: inherit; }
code { font-family: var(--fuente-mono); font-size: 0.92em; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--gutter); top: -4rem; z-index: 50; padding: var(--e-2) var(--e-4); background: var(--tinta); color: var(--fondo); }
.saltar:focus { top: var(--e-2); }
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.rotulo { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--tinta-2); }
.entrada { font-size: var(--t-l); line-height: 1.45; max-width: 40rem; }
.norma { font-family: var(--fuente-mono); font-size: 0.92em; letter-spacing: 0.01em; white-space: nowrap; }
.icono,
.flecha,
.ruta__icono,
.razon__icono,
.antes__icono,
.paso__icono { fill: none; stroke: currentColor; stroke-width: var(--icono-trazo); stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.icono { width: var(--icono-s); height: var(--icono-s); }
.icono--boton { width: var(--icono-s); height: var(--icono-s); margin-right: var(--e-2); }
.flecha { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; stroke: var(--acento-tinta); stroke-width: 2; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--e-3) var(--e-5); border: 1px solid transparent; border-radius: 0; font-family: var(--fuente-texto); font-size: var(--t-m); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--dur-resalte) var(--curva-suave), border-color var(--dur-resalte) var(--curva-suave); }
.boton:hover { text-decoration: none; }
.boton--naranja { background: var(--acento); color: var(--tinta); border-color: var(--acento-tinta); }
.boton--naranja:hover { background: var(--acento-hover); color: var(--tinta); }
.bloque-petroleo .boton--naranja,
.contacto .boton--naranja { border-color: var(--acento); }
.boton--claro { background: var(--fondo); color: var(--tinta); border-color: var(--fondo); }
.boton--claro:hover { background: var(--blanco); color: var(--tinta); }
.boton--contorno { background: var(--fondo); color: var(--tinta); border-color: var(--tinta); }
.boton--contorno:hover { background: var(--fondo-2); color: var(--tinta); }
.ver { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; color: var(--tinta); font-weight: 600; text-decoration: none; }
.nav__lista a,
.ver,
.tarjeta-curso__titulo a,
.pie__enlaces a,
.fila-estudio__verbo,
.tabla .ver > .ver__texto { background-image: linear-gradient(var(--acento-tinta), var(--acento-tinta)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size var(--dur-subrayado) var(--curva-salida); }
.ver { background-position: 0 calc(100% - 8px); }
@media (hover: hover) and (pointer: fine) {
.nav__lista a:hover,
.ver:hover,
.tarjeta-curso:hover .tarjeta-curso__titulo a,
.pie__enlaces a:hover,
.fila-estudio:hover .fila-estudio__verbo { background-size: 100% 2px; }
}
.nav__lista a:focus-visible,
.ver:focus-visible,
.pie__enlaces a:focus-visible { background-size: 100% 2px; }
.nav__lista a[aria-current="page"] { background-size: 100% 2px; }
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--filete); }
.cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-5); row-gap: var(--e-1); padding-block: var(--e-3); }
.marca { display: block; flex: none; text-decoration: none; }
.nav { flex: 1 1 auto; }
.nav__lista { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-5); row-gap: var(--e-1); }
.nav__lista li { display: flex; align-items: center; }
.nav__lista a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s); font-weight: 500; text-decoration: none; background-position: 0 calc(100% - 8px); }
.cabecera__cta { display: none; }
@media (max-width: 767px) {
.nav { flex-basis: 100%; }
.nav__lista { column-gap: var(--e-3); }
.nav__lista a { font-size: var(--t-xs); min-height: 40px; }
}
@media (min-width: 768px) {
.cabecera__cta { display: inline-flex; min-height: 44px; padding-block: var(--e-2); }
.nav { display: flex; justify-content: flex-end; }
}
.migas { border-bottom: 1px solid var(--filete); }
.migas__lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding-block: var(--e-1); font-size: var(--t-xs); }
.migas__lista li + li::before { content: "/"; margin-right: var(--e-2); color: var(--tinta-2); }
.migas__lista a { display: inline-flex; align-items: center; min-height: 32px; }
.seccion { padding-block: var(--e-7); }
.seccion--filete { border-top: 1px solid var(--filete); }
.banda-hueso,
.banda-gris { background: var(--fondo-2); }
.seccion__cabeza { margin-bottom: var(--e-5); }
.seccion__cabeza--fila { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-5); }
.seccion__cabeza h2,
.titulo-seccion { font-size: var(--t-2xl); letter-spacing: -0.015em; }
.lista-bloque .seccion__cabeza h2 { font-size: var(--t-xl); }
.seccion__pie { margin-top: var(--e-4); display: flex; justify-content: flex-start; }
@media (min-width: 1024px) {
.seccion { padding-block: var(--e-8); }
}
.seccion--breve { padding-top: var(--e-7); padding-bottom: var(--e-7); }
.seccion--breve .seccion__cabeza h2 { font-size: var(--t-xl); font-weight: 400; }
@media (min-width: 900px) {
.seccion--breve .seccion__cuerpo { display: grid; grid-template-columns: 4fr 8fr; gap: var(--e-6); align-items: start; }
}
.rutas { margin-top: var(--e-6); border-top: var(--filete-fuerte); }
.ruta { border-bottom: 1px solid var(--filete); }
.ruta__enlace { display: grid; grid-template-columns: var(--icono-l) minmax(0, 1fr) auto; column-gap: var(--e-4); row-gap: 2px; align-items: center; padding: var(--e-4) var(--e-3); margin-inline: calc(-1 * var(--e-3)); color: var(--tinta); text-decoration: none; }
.ruta__icono { grid-row: 1 / span 2; width: var(--icono-l); height: var(--icono-l); stroke: var(--acento-tinta); }
.ruta__titulo { font-size: var(--t-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ruta__texto { grid-column: 2; font-size: var(--t-s); color: var(--tinta-2); }
.ruta__accion { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); font-weight: 600; }
.ruta__accion .flecha { width: var(--icono-m); height: var(--icono-m); }
.ruta__enlace:focus-visible { outline-offset: -2px; }
@media (max-width: 599px) {
.ruta__enlace { column-gap: var(--e-3); }
.ruta__titulo { font-size: var(--t-l); }
.ruta__accion { font-size: 0; gap: 0; }
}
.ruta__enlace,
.fila-estudio,
.tarjeta { transition: background-color var(--dur-resalte) var(--curva-suave); }
.ruta__enlace .flecha,
.fila-estudio .flecha,
.tarjeta > .flecha { transition: transform var(--dur-resalte) var(--curva-salida); }
@media (hover: hover) and (pointer: fine) {
.ruta__enlace:hover,
.fila-estudio:hover,
.tarjeta:hover { background-color: var(--fondo-2); }
.ruta__enlace:hover .flecha,
.fila-estudio:hover .flecha,
.tarjeta:hover > .flecha { transform: translateX(4px); }
}
.filas-estudios { border-top: var(--filete-fuerte); }
.fila-estudio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); row-gap: var(--e-1); padding: var(--e-4) var(--e-3); margin-inline: calc(-1 * var(--e-3)); border-bottom: 1px solid var(--filete); }
.fila-estudio__nombre { grid-column: 1; font-size: var(--t-l); }
.fila-estudio__nombre a { position: relative; z-index: 1; }
.fila-estudio__norma { grid-column: 1; font-family: var(--fuente-mono); font-size: var(--t-s); color: var(--tinta-2); }
.fila-estudio__norma .norma { font-size: 1em; }
.fila-estudio__texto { grid-column: 1; font-size: var(--t-s); color: var(--tinta-2); }
.fila-estudio__accion { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--e-2); min-width: 44px; min-height: 44px; font-size: var(--t-s); font-weight: 600; text-decoration: none; }
.fila-estudio__accion::after { content: ""; position: absolute; inset: 0; }
.fila-estudio__accion:focus-visible { outline: none; }
.fila-estudio:focus-within { outline: var(--foco); outline-offset: -2px; }
.fila-estudio__accion .flecha { width: 22px; height: 22px; }
@media (max-width: 767px) {
.fila-estudio__verbo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) {
.fila-estudio { grid-template-columns: 26% 21% minmax(0, 1fr) 9rem; align-items: baseline; }
.fila-estudio__nombre,
.fila-estudio__norma,
.fila-estudio__texto { grid-column: auto; }
.fila-estudio__nombre { font-size: var(--t-m); }
.fila-estudio__accion { grid-column: auto; grid-row: auto; align-self: center; }
}
.tarjetas-curso { display: grid; gap: var(--e-6) var(--e-5); }
.tarjeta-curso { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-3); align-content: start; }
.tarjeta-curso__foto { grid-column: 1 / -1; }
.tarjeta-curso__titulo { grid-column: 1; padding-top: var(--e-3); font-size: var(--t-l); }
.tarjeta-curso__titulo a { text-decoration: none; background-position: 0 100%; }
.tarjeta-curso__titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta-curso__titulo a:focus-visible { outline: none; }
.tarjeta-curso:focus-within { outline: var(--foco); outline-offset: 4px; }
.tarjeta-curso .para-quien { grid-column: 1; padding-top: var(--e-1); }
.tarjeta-curso > .flecha { grid-column: 2; grid-row: 2; align-self: end; width: var(--icono-m); height: var(--icono-m); }
.para-quien { font-size: var(--t-s); color: var(--tinta-2); }
@media (min-width: 600px) and (max-width: 1023px) {
.tarjetas-curso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.tarjetas-curso { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.foto { display: grid; gap: 0; }
.foto__marco { position: relative; overflow: hidden; background: var(--fondo-2); }
.foto__marco > img { width: 100%; height: 100%; object-fit: cover; }
.foto__marco--4x3 { aspect-ratio: 4 / 3; }
.foto__marco--3x2 { aspect-ratio: 3 / 2; }
.foto__marco--4x5 { aspect-ratio: 4 / 5; }
.foto figcaption { padding-top: var(--e-1); }
.bloque-petroleo { background: var(--oscuro); color: var(--sobre-oscuro); }
.bloque-petroleo h2,
.bloque-petroleo h3 { color: var(--sobre-oscuro); }
.bloque-petroleo :focus-visible { outline-color: var(--sobre-oscuro); }
.razones { display: grid; border-top: 1px solid var(--filete-oscuro); }
.razon { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--e-4); row-gap: var(--e-1); padding: var(--e-5) 0; align-content: start; }
.razon + .razon { border-top: 1px solid var(--filete-oscuro); }
.razon__icono { grid-row: 1 / span 3; width: 32px; height: 32px; stroke: var(--acento); }
.razon h3,
.razon p { grid-column: 2; }
.razon p { color: var(--sobre-oscuro-2); font-size: var(--t-s); }
@media (min-width: 900px) {
.razones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.razon { padding: var(--e-5); }
.razon:first-child { padding-left: 0; }
.razon + .razon { border-top: 0; border-left: 1px solid var(--filete-oscuro); }
}
.pasos { display: grid; border-top: var(--filete-fuerte); }
.paso { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--e-3); row-gap: var(--e-1); padding: var(--e-4) 0; border-bottom: 1px solid var(--filete); align-content: start; align-items: start; }
.paso__num { grid-row: 1 / span 2; font-family: var(--fuente-mono); font-size: var(--t-m); font-weight: 500; color: var(--acento-tinta); }
.paso__icono { display: none; }
.paso h3 { font-size: var(--t-m); }
.paso p { grid-column: 2; font-size: var(--t-s); color: var(--tinta-2); }
@media (min-width: 900px) {
.pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.paso { grid-template-columns: minmax(0, 1fr); padding: var(--e-4) var(--e-5) var(--e-5) 0; border-bottom: 0; }
.paso__num { grid-row: auto; margin-bottom: var(--e-3); }
.paso p { grid-column: 1; }
}
.banda-antes { background: var(--fondo-2); padding-block: var(--e-6); }
.banda-antes__fila { display: grid; gap: var(--e-5); }
.banda-antes__cabeza h2 { font-size: var(--t-xl); }
.antes { display: grid; gap: var(--e-4); }
.antes__col { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--e-3); row-gap: 2px; align-content: start; }
.antes__icono { grid-row: 1 / span 2; width: 26px; height: 26px; stroke: var(--acento-tinta); }
.antes__col h3 { font-size: var(--t-m); }
.antes__col p { grid-column: 2; font-size: var(--t-s); color: var(--tinta-2); }
.antes__col:not(:has(svg)) { grid-template-columns: minmax(0, 1fr); }
.antes__col:not(:has(svg)) p { grid-column: 1; }
@media (min-width: 600px) {
.antes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.banda-antes__fila { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
.antes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); }
}
.seccion .antes { border-top: var(--filete-fuerte); padding-top: var(--e-4); }
.contacto { background: var(--oscuro); color: var(--sobre-oscuro); padding-block: var(--e-7); }
.contacto .reticula { display: grid; gap: var(--e-6); }
.contacto :focus-visible { outline-color: var(--sobre-oscuro); }
.contacto a { color: var(--sobre-oscuro); }
.contacto__titulo { font-size: var(--t-2xl); color: var(--sobre-oscuro); }
.contacto__cobertura { margin-top: var(--e-2); font-size: var(--t-l); color: var(--sobre-oscuro-2); }
.contacto__lista { display: grid; gap: var(--e-4); margin-block: var(--e-5); }
.contacto__lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--e-3); align-items: start; }
.contacto__lista .icono { width: 22px; height: 22px; margin-top: 2px; stroke: var(--acento); }
.contacto__lista p { color: var(--sobre-oscuro); }
.contacto__dato { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--sobre-oscuro-2) !important; }
.correo { overflow-wrap: normal; word-break: normal; }
.correo__parte { display: inline-block; }
.contacto__lista a { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--t-l); font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 600px) {
.contacto__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); }
}
@media (min-width: 600px) {
.contacto__lista li:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.contacto { padding-block: var(--e-8); }
.contacto .reticula { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--e-7); }
}
.formulario { display: grid; gap: var(--e-4); align-self: start; align-content: start; padding: var(--e-5); background: var(--oscuro-2); border: 1px solid var(--filete-oscuro); }
.formulario { scroll-margin-top: var(--e-4); }
.campo { display: grid; gap: var(--e-1); }
.campo label { font-size: var(--t-s); font-weight: 500; color: var(--sobre-oscuro); }
.campo input { width: 100%; min-height: 48px; padding: var(--e-2) var(--e-3); background: var(--fondo); color: var(--tinta); border: 1px solid var(--fondo); border-radius: 0; }
.campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.formulario__nota { padding: var(--e-3) var(--e-4); background: var(--fondo); font-size: var(--t-s); color: var(--tinta-2); }
.formulario__nota a,
.contacto .formulario__nota a { color: var(--tinta); }
.contacto .formulario .formulario__nota :focus-visible { outline-color: var(--tinta); }
.formulario__requisito { font-size: var(--t-s); color: var(--sobre-oscuro-2); }
.formulario .boton { width: 100%; }
.formulario > noscript { display: block; grid-column: 1 / -1; }
html:not(.js) .formulario .boton[disabled] { background: var(--fondo-2); color: var(--tinta); border-color: var(--filete); cursor: not-allowed; }
@media (min-width: 768px) {
.formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formulario__nota,
.formulario__requisito,
.formulario .boton { grid-column: 1 / -1; }
}
.contacto .boton--claro,
.contacto .boton--claro:hover { color: var(--tinta); }
.contacto .boton--naranja { color: var(--tinta); }
.pie { background: var(--oscuro-2); color: var(--sobre-oscuro); padding-top: var(--e-7); }
.pie a { color: var(--sobre-oscuro); }
.pie :focus-visible { outline-color: var(--sobre-oscuro); }
.pie__fila { display: grid; gap: var(--e-5); padding-bottom: var(--e-6); }
.pie__marca { justify-self: start; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-s); text-decoration: none; background-image: linear-gradient(var(--acento), var(--acento)); background-position: 0 calc(100% - 8px); }
.pie__contacto a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font-size: var(--t-s); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pie__contacto { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.pie__contacto a[data-evento="click_tel"],
.pie__contacto a[data-evento="click_whatsapp"] { white-space: nowrap; }
.pie__contacto .icono { stroke: var(--acento); }
.pie__redes { display: flex; gap: var(--e-2); }
.pie__redes a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--filete-oscuro); transition: border-color var(--dur-resalte) var(--curva-suave); }
.pie__redes a:hover { border-color: var(--acento); }
.pie__notas { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--filete-oscuro); }
.pie__leyenda { font-size: var(--t-s); color: var(--sobre-oscuro-2); }
.pie__legal { border-top: 1px solid var(--filete-oscuro); }
.pie__nota { padding-block: var(--e-3); font-family: var(--fuente-mono); font-size: var(--t-xs); color: var(--sobre-oscuro-2); }
@media (min-width: 1024px) {
.pie__fila { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--e-6); }
.pie__notas { grid-column: 1 / -1; }
}
.barra-movil { display: none; }
@media (max-width: 767px) {
body { padding-bottom: var(--barra-movil); }
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); height: var(--barra-movil); padding: var(--e-2) var(--gutter); background: var(--fondo); border-top: var(--filete-fuerte); }
.barra-movil .boton { min-height: 52px; padding-inline: var(--e-3); }
html { scroll-padding-bottom: calc(var(--barra-movil) + 16px); }
}
.reticula { display: grid; gap: var(--e-5); }
.portada--ficha,
.cabeza-pagina { background: var(--fondo); color: var(--tinta); border-bottom: 1px solid var(--filete); }
.portada--ficha .reticula { align-items: center; }
.portada--ficha h1,
.cabeza-pagina h1 { font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.portada--ficha .entrada,
.cabeza-pagina .entrada { margin-top: var(--e-3); color: var(--tinta-2); }
.portada--ficha .boton { margin-top: var(--e-5); }
.ficha__norma { margin-bottom: var(--e-3); font-family: var(--fuente-mono); color: var(--acento-tinta); }
.cabeza-pagina__texto { padding-block: var(--e-6); }
.cabeza-pagina .rotulo { display: block; margin-top: var(--e-3); }
.portada--ficha .foto__marco--3x2 { aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
.portada--ficha .reticula { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--e-8); }
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla thead th { padding: var(--e-2) var(--e-3) var(--e-2) 0; border-bottom: var(--filete-fuerte); font-family: var(--fuente-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.02em; text-align: left; color: var(--tinta-2); }
.tabla tbody th,
.tabla tbody td { padding: var(--e-4) var(--e-3) var(--e-4) 0; border-bottom: 1px solid var(--filete); text-align: left; vertical-align: baseline; font-size: var(--t-s); }
.tabla tbody th { font-size: var(--t-m); font-weight: 600; }
.tabla__categoria { font-family: var(--fuente-mono); font-size: var(--t-xs) !important; color: var(--tinta-2); }
.tabla__accion { text-align: right !important; padding-right: var(--e-3) !important; white-space: nowrap; }
.tabla__accion .ver { min-height: 44px; }
.tabla__enlace { display: inline-flex; align-items: center; min-height: 24px; }
.tabla tbody tr:target { background: var(--fondo-2); }
@media (max-width: 1023px) {
.tabla,
.tabla thead,
.tabla tbody,
.tabla tr,
.tabla th,
.tabla td { display: block; }
.tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabla tbody tr { padding: var(--e-4) 0; border-bottom: 1px solid var(--filete); }
.tabla tbody tr:first-child { border-top: var(--filete-fuerte); }
.tabla tbody th,
.tabla tbody td { padding: 0; border: 0; }
.tabla tbody td { margin-top: var(--e-1); }
.tabla__accion { text-align: left !important; white-space: normal; padding-right: 0 !important; }
.tabla tbody td[data-columna]::before { content: attr(data-columna); display: block; font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--tinta-2); }
.tabla tbody td[data-columna="Norma"]::before { content: none; }
}
.ficha-rapida { border-bottom: 1px solid var(--filete); }
.ficha { display: grid; }
.ficha__dato { padding: var(--e-4) 0; border-bottom: 1px solid var(--filete); }
.ficha__dato:last-child { border-bottom: 0; }
.ficha__dato dt { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--tinta-2); }
.ficha__dato dd { margin-top: var(--e-1); font-weight: 500; }
@media (min-width: 768px) {
.ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha__dato { padding: var(--e-5) var(--e-4); border-bottom: 0; border-left: 1px solid var(--filete); }
.ficha__dato:first-child { padding-left: 0; border-left: 0; }
}
.dos-listas { display: grid; gap: var(--e-6); }
@media (min-width: 900px) {
.dos-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); }
}
.lista-bloque .seccion__cabeza { margin-bottom: var(--e-4); }
.puntos { display: grid; border-top: var(--filete-fuerte); }
.puntos li { position: relative; padding: var(--e-3) 0 var(--e-3) var(--e-5); border-bottom: 1px solid var(--filete); }
.puntos li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 10px; height: 2px; background: var(--acento-tinta); }
.tarjetas { display: grid; border-top: var(--filete-fuerte); }
.tarjeta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); row-gap: var(--e-1); padding: var(--e-4) var(--e-3); margin-inline: calc(-1 * var(--e-3)); border-bottom: 1px solid var(--filete); text-decoration: none; }
.tarjeta h3 { grid-column: 1; font-size: var(--t-l); }
.tarjeta__norma { grid-column: 1; font-family: var(--fuente-mono); font-size: var(--t-s); color: var(--tinta-2); }
.tarjeta__texto { grid-column: 1; font-size: var(--t-s); color: var(--tinta-2); }
.tarjeta > .flecha { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: var(--icono-m); height: var(--icono-m); }
.tarjeta:focus-visible { outline-offset: -2px; }
@media (min-width: 768px) {
.tarjeta { grid-template-columns: 26% 21% minmax(0, 1fr) auto; align-items: baseline; }
.tarjeta h3,
.tarjeta__norma,
.tarjeta__texto { grid-column: auto; }
.tarjeta h3 { font-size: var(--t-m); }
.tarjeta > .flecha { grid-column: auto; grid-row: auto; }
}
.cursos { display: grid; gap: var(--e-7) var(--e-5); }
.curso { display: grid; grid-template-rows: auto 1fr; align-content: start; }
.curso:target { outline: var(--foco); outline-offset: 6px; }
.curso .foto__marco--4x5 { aspect-ratio: 4 / 3; }
.curso__cuerpo { display: flex; flex-direction: column; gap: var(--e-2); padding-top: var(--e-3); }
.curso--texto .curso__cuerpo { padding-top: var(--e-4); border-top: var(--filete-fuerte); }
.curso__categoria { order: -1; }
.curso h3 { font-size: var(--t-l); }
.curso .tarjeta__norma { font-family: var(--fuente-mono); font-size: var(--t-s); color: var(--tinta-2); }
.curso .tarjeta__texto { font-size: var(--t-s); color: var(--tinta-2); }
.curso__datos { display: grid; gap: var(--e-1); margin-top: var(--e-1); padding-top: var(--e-2); border-top: 1px solid var(--filete); font-size: var(--t-s); }
.curso__datos div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--e-2); }
.curso__datos dt { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--tinta-2); padding-top: 2px; }
.curso__accion { margin-top: auto; align-self: flex-start; }
.curso--texto { grid-template-rows: auto; }
@media (min-width: 600px) {
.cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.cursos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.cursos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.js-anima [data-anima] { opacity: 0; transform: translateY(var(--desplaz-entrada)); transition: opacity var(--dur-entrada) var(--curva-salida), transform var(--dur-entrada) var(--curva-salida); transition-delay: calc(var(--orden, 0) * var(--escalon)); }
.js-anima [data-anima].es-visible { opacity: 1; transform: none; }
.js-anima [data-anima].sin-transicion { transition: none; }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.js-anima [data-anima] { opacity: 1; transform: none; }
}
@media print {
.js-anima [data-anima] { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
.rutas { margin-top: var(--e-5); }
.ruta__enlace { padding-block: var(--e-3); }
.ruta__icono { width: var(--icono-m); height: var(--icono-m); }
.ruta__enlace { grid-template-columns: var(--icono-m) minmax(0, 1fr) auto; }
.ruta__texto { font-size: var(--t-2xs); line-height: 1.4; }
}
.foto figcaption .rotulo { font-family: var(--fuente-texto); font-size: var(--t-xs); letter-spacing: 0; }
.fila-estudio__nombre a { text-decoration: none; }
@media (min-width: 1024px) {
.banda-antes .antes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-7); }
}
@media (max-width: 1023px) {
.tabla tbody td[data-columna="Qué se revisa"]::before { content: none; }
.tabla tbody td.tabla__categoria::before { display: inline; margin-right: var(--e-2); }
}
@media (max-width: 599px) {
.tarjetas-curso { gap: 0; border-top: var(--filete-fuerte); }
.tarjeta-curso { grid-template-columns: 7.5rem minmax(0, 1fr) auto; column-gap: var(--e-3); padding-block: var(--e-3); border-bottom: 1px solid var(--filete); }
.tarjeta-curso__foto { grid-column: 1; grid-row: 1 / span 2; }
.tarjeta-curso__titulo { grid-column: 2; padding-top: 0; font-size: var(--t-m); }
.tarjeta-curso .para-quien { grid-column: 2; }
.tarjeta-curso > .flecha { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 599px) {
.pie__enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.curso .foto__marco--4x5 { aspect-ratio: 16 / 9; }
.cursos { gap: var(--e-6); }
}
@media (min-width: 600px) {
.tarjeta-curso > .flecha { grid-row: 2; align-self: start; margin-top: calc(var(--e-3) + 2px); }
}
@media (max-width: 599px) {
.tarjeta-curso { grid-template-rows: auto 1fr; }
.tarjeta-curso .para-quien { align-self: start; }
}
.tarjeta-curso__titulo a { display: inline-block; min-height: 24px; }
.menu-boton { display: none; }
@media (max-width: 1023px) {
.nav { flex-basis: 100%; order: 3; }
.js .menu-boton { display: inline-flex; align-items: center; gap: var(--e-2); order: 2; min-height: 44px; padding: 0 var(--e-3); background: transparent; color: var(--tinta); border: 1px solid var(--tinta); border-radius: 0; font-size: var(--t-s); font-weight: 600; cursor: pointer; }
.js .nav { display: none; }
.js .nav.abierto { display: block; margin-top: var(--e-2); }
.js .nav.abierto .nav__lista { flex-direction: column; flex-wrap: nowrap; align-items: stretch; row-gap: 0; border-top: var(--filete-fuerte); }
.js .nav.abierto .nav__lista li { border-bottom: 1px solid var(--filete); }
.js .nav.abierto .nav__lista a { width: 100%; min-height: 48px; font-size: var(--t-m); }
}
@media (max-width: 767px) {
.js .menu-boton { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.cabecera__cta { order: 1; margin-left: auto; }
}
.nav__lista a.es-seccion { font-weight: 600; }
.cabeza__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
.portada--ficha .cabeza__acciones .boton { margin-top: 0; }
.portada--sin-foto .portada__texto { max-width: 52rem; }
.gracias__titulo { margin-top: var(--e-6); font-size: var(--t-xl); }
.portada--ficha .parrafo { margin-top: var(--e-3); color: var(--tinta-2); }
@media (min-width: 768px) {
.ficha { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
}
.franja-foto { padding-top: var(--e-6); }
.foto__marco--franja { aspect-ratio: 16 / 5; }
@media (max-width: 599px) {
.foto__marco--franja { aspect-ratio: 16 / 7; }
}
.seccion__cuerpo > * + * { margin-top: var(--e-4); }
.parrafo { max-width: 46rem; }
.lista__titulo { font-size: var(--t-m); }
.puntos { max-width: 52rem; }
.enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.ver--chico { min-height: 44px; font-size: var(--t-s); }
.tarjeta__servicios { display: block; margin-top: var(--e-1); font-size: var(--t-xs); line-height: 1.5; }
.servicios { display: grid; border-top: var(--filete-fuerte); }
.servicio { display: grid; gap: var(--e-1); padding: var(--e-4) 0; border-bottom: 1px solid var(--filete); }
.servicio:target { background: var(--fondo-2); outline: var(--foco); outline-offset: 2px; }
.servicio__nombre { font-size: var(--t-l); max-width: 46rem; }
.servicio__texto,
.servicio__dato { font-size: var(--t-s); color: var(--tinta-2); max-width: 46rem; }
.servicio__acciones { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
@media (min-width: 900px) {
.servicio > * { grid-column: 2; }
.servicio > .servicio__clase { grid-column: 1; grid-row: 1 / span 4; padding-top: 4px; }
}
.curso__acciones { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); margin-top: auto; }
@media (min-width: 1024px) {
.tabla--indice th:first-child { width: 34%; }
.tabla--indice td:nth-child(2) { width: 22%; }
.tabla--indice td:nth-child(3) { width: 24%; }
}
.faq { max-width: 52rem; border-top: var(--filete-fuerte); }
.faq__item { border-bottom: 1px solid var(--filete); }
.faq__pregunta { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 48px; padding: var(--e-3) 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: "+"; flex: none; font-family: var(--fuente-mono); font-size: var(--t-l); font-weight: 500; color: var(--acento-tinta); }
.faq__item[open] > .faq__pregunta::after { content: "\2212"; }
.faq__pregunta:focus-visible { outline-offset: -2px; }
.faq__respuesta { padding-bottom: var(--e-4); font-size: var(--t-s); color: var(--tinta-2); max-width: 46rem; }
.direcciones { display: grid; gap: var(--e-5); border-top: var(--filete-fuerte); padding-top: var(--e-4); }
.direccion { display: grid; gap: var(--e-1); align-content: start; }
.direccion h3 { font-size: var(--t-m); }
.direccion p { font-size: var(--t-s); color: var(--tinta-2); }
@media (min-width: 768px) {
.direcciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contacto .flecha,
.pie .flecha { stroke: var(--acento); }
.contacto .ver,
.pie .ver { color: var(--sobre-oscuro); background-image: linear-gradient(var(--acento), var(--acento)); }
.contacto__lista .ver--chico { min-height: 40px; font-size: var(--t-s); font-weight: 600; }
.campo textarea { width: 100%; min-height: 7rem; padding: var(--e-2) var(--e-3); background: var(--fondo); color: var(--tinta); border: 1px solid var(--fondo); border-radius: 0; font: inherit; resize: vertical; }
.campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.formulario__privacidad { font-size: var(--t-s); color: var(--sobre-oscuro-2); }
.formulario__privacidad a { color: var(--sobre-oscuro); }
.formulario__estado { padding: var(--e-3) var(--e-4); background: var(--fondo); color: var(--tinta); font-size: var(--t-s); }
.formulario__estado:empty { display: none; }
@media (min-width: 768px) {
.formulario .campo--ancho,
.formulario__privacidad,
.formulario__estado { grid-column: 1 / -1; }
}
.contacto__formulario { display: grid; align-self: start; }
.pie__direcciones { display: grid; gap: var(--e-4); font-size: var(--t-s); color: var(--sobre-oscuro-2); }
.pie__direcciones p { color: var(--sobre-oscuro-2); }
.pie__dir-etiqueta { font-family: var(--fuente-mono); font-size: var(--t-xs); letter-spacing: 0.02em; }
@media (min-width: 600px) {
.pie__direcciones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
}
@media (min-width: 1024px) {
.pie__direcciones { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
.rutas { margin-top: var(--e-4); }
}