@font-face {
font-family: "Jost";
src: url("/fuentes/jost-400.f94cffda16.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("/fuentes/jost-500.98dce4f076.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("/fuentes/jost-600.d0487d6845.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("/fuentes/jost-700.81da4d7112.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost respaldo";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
size-adjust: 96%;
ascent-override: 111.5%;
descent-override: 39.1%;
line-gap-override: 0%;
}
:root {
color-scheme: light;
--mesa: #e4e8ec;
--hoja: #ffffff;
--tinta: #36373b; 
--texto-2: #5d6670; 
--azul: #1f6699; 
--azul-hondo: #19557f; 
--azul-marca: #4ba5dc; 
--azul-claro: #e3f1fa;
--azul-borde: var(--azul-marca);
--rojo: #d9472e; 
--rojo-texto: #c2391f; 
--letra: "Jost", "Jost respaldo", system-ui, sans-serif;
--ancho: 77.5rem;
--margen: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
--entre-secciones: clamp(3.25rem, 2.5rem + 3vw, 4.75rem);
--t-h1: clamp(2.125rem, 1.52rem + 2.48vw, 3.75rem); 
--t-h2: clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem); 
--t-h3: clamp(1.1875rem, 1.165rem + 0.095vw, 1.25rem); 
--t-texto: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); 
--t-entradilla: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem); 
--t-nota: 0.9375rem;
--sombra-hoja: 0 1px 1px rgb(54 55 59 / 0.07), 0 3px 6px rgb(54 55 59 / 0.05), 0 22px 40px -20px rgb(54 55 59 / 0.4);
--sombra-nota: 0 1px 1px rgb(54 55 59 / 0.1), 0 16px 26px -14px rgb(54 55 59 / 0.45);
--sombra-tarjeta: 0 1px 2px rgb(54 55 59 / 0.05), 0 20px 40px -26px rgb(54 55 59 / 0.45);
--sombra-azul: 0 26px 50px -24px rgb(31 102 153 / 0.7);
--sombra-muestra: 0 10px 22px -16px rgb(54 55 59 / 0.4);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(0, 1fr); 
min-height: 100vh;
min-height: 100dvh;
background: var(--mesa);
color: var(--tinta);
font-family: var(--letra);
font-size: var(--t-texto);
line-height: 1.55;
overflow-wrap: break-word; 
overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
margin: 0;
}
ul, ol {
padding: 0;
list-style: none;
}
h1, h2, h3 {
text-wrap: balance;
}
h1 {
font-size: var(--t-h1);
font-weight: 700;
line-height: 1.03;
letter-spacing: -0.02em;
}
h2 {
font-size: var(--t-h2);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.015em;
}
h3 {
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.18;
}
p {
text-wrap: pretty;
}
strong, dt {
font-weight: 600;
}
a {
color: var(--azul);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
text-decoration-thickness: 2px;
}
:where(a):hover {
color: var(--azul-hondo);
}
:focus-visible {
outline: 3px solid var(--tinta);
outline-offset: 3px;
}
.entradilla {
font-size: var(--t-entradilla);
line-height: 1.45;
color: var(--texto-2);
max-width: 34em;
}
.nota {
font-size: var(--t-nota);
line-height: 1.45;
color: var(--texto-2);
}
.sin-corte {
white-space: nowrap;
}
.v-oculto {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pendiente {
color: var(--rojo-texto);
font-weight: 600;
}
mark.pendiente {
background: transparent;
border: 1.5px dashed var(--rojo);
padding: 0 0.3em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.saltar {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
padding: 0.6rem 1.1rem;
border-radius: 999px;
background: var(--hoja);
color: var(--tinta);
border: 2px solid var(--tinta);
font-weight: 600;
transform: translateY(-200%);
}
.saltar:focus {
transform: none;
}
.accion {
display: grid;
justify-items: start;
row-gap: 0.75rem;
}
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: 0.8rem 1.75rem;
border: 1px solid transparent;
border-radius: 999px;
background: var(--azul);
color: var(--hoja);
font: 600 1.125rem/1.2 var(--letra);
font-size: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); 
text-decoration: none;
box-shadow: 0 12px 26px -14px rgb(31 102 153 / 0.75);
transition: background-color 120ms;
}
.boton:hover {
background: var(--azul-hondo);
}
.boton:active {
translate: 0 1px;
}
@media (max-width: 39.99em) {
.accion {
justify-items: stretch;
}
.boton {
min-height: 3rem;
padding-block: 0.7rem;
}
.accion .boton,
.acciones .boton {
width: 100%;
}
}
.rejilla,
.cabecera__dentro,
.pie__dentro {
width: 100%;
max-width: calc(var(--ancho) + 2 * var(--margen));
margin-inline: auto;
padding-inline: var(--margen);
}
.banda {
padding-block: var(--entre-secciones);
scroll-margin-top: 0.5rem;
}
.banda--blanca {
background: var(--hoja);
}
.banda--mesa {
background: var(--mesa);
}
.banda--blanca + .banda--blanca,
.banda--mesa + .banda--mesa {
padding-top: 0;
}
.seccion__titulo + .entradilla {
margin-top: 0.75rem;
}
.seccion__titulo + * {
margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}
.seccion__titulo + .entradilla + * {
margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}
.cabecera__dentro {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 2.25rem;
padding-block: 1.1rem;
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
margin-right: auto;
color: var(--tinta);
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
}
.logo__icono {
flex: none;
height: 0.78em;
width: auto;
aspect-ratio: 524 / 359;
translate: 0 -0.06em; 
}
.menu ul {
display: flex;
flex-wrap: wrap;
column-gap: 2rem;
}
.menu a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--tinta);
font-size: 1.0625rem;
font-weight: 500;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
text-decoration-thickness: 1.5px;
}
.acceder {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.3rem 1.2rem;
border: 1.5px solid var(--tinta);
border-radius: 999px;
color: var(--tinta);
font-weight: 500;
font-size: 1.0625rem;
text-decoration: none;
transition: background-color 120ms;
}
.acceder:hover {
background: var(--hoja);
}
@media (max-width: 47.99em) {
.cabecera__dentro {
column-gap: 1rem;
padding-block: 0.6rem 0.1rem;
}
.logo {
min-height: 40px;
gap: 0.5rem;
font-size: 1.25rem;
}
.menu {
order: 3;
flex-basis: 100%;
}
.pagina-secundaria .menu:last-child {
flex-basis: auto;
}
.menu ul {
column-gap: 1.25rem;
}
.menu a {
min-height: 40px;
font-size: 0.9375rem;
}
.acceder {
min-height: 36px;
padding: 0.15rem 0.9rem;
border-width: 1.25px;
font-size: 0.9375rem;
}
}
.pie {
background: var(--hoja);
font-size: var(--t-nota);
line-height: 1.45;
}
.pie__dentro {
display: grid;
row-gap: 1.25rem;
padding-block: 2.75rem 3.25rem;
}
.pie__fila {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 2rem;
}
.pie__fila + .pie__fila {
padding-top: 1.25rem;
border-top: 1.5px solid var(--mesa);
}
.pie a {
display: inline-block;
padding-block: 0.3rem;
color: var(--tinta);
}
.pie .logo {
font-size: 1.25rem;
min-height: 0;
margin-right: 0;
}
.pie__legal {
display: flex;
flex-wrap: wrap;
gap: 0 1.5rem;
}
@media (max-width: 47.99em) {
.pie__fila {
flex-direction: column;
align-items: flex-start;
}
}
.portada {
padding-block: clamp(1.5rem, 0.75rem + 3vw, 3.75rem) clamp(2.75rem, 1.75rem + 3.5vw, 4.75rem);
}
.portada__rejilla {
display: grid;
gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
align-items: center;
}
@media (min-width: 64em) {
.portada__rejilla {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
column-gap: clamp(2.5rem, 5vw, 5rem);
}
}
.portada__texto {
container-type: inline-size;
}
.portada__antetitulo {
margin-bottom: 0.85rem;
color: var(--azul);
font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
font-weight: 600;
line-height: 1.35;
text-wrap: balance;
}
.portada__titulo {
max-width: 7.3em;
font-size: min(var(--t-h1), 13.8cqi);
text-wrap: wrap;
}
.portada__subtitulo {
margin-top: 1.25rem;
max-width: 30em;
color: var(--texto-2);
font-size: var(--t-entradilla);
line-height: 1.5;
}
.portada__revision {
margin-top: 1rem;
max-width: 34em;
padding-left: 0.85rem;
border-left: 3px solid var(--azul-borde);
color: var(--tinta);
font-size: var(--t-nota);
line-height: 1.45;
}
.portada__estado {
margin-top: 1rem;
max-width: 22em;
font-weight: 500;
}
.portada__accion {
margin-top: 1.5rem;
}
.mesa {
--letra-pila: 1;
width: 100%;
max-width: 34rem;
}
@media (min-width: 64em) {
.mesa {
justify-self: end;
--letra-pila: 1.08;
}
}
.mesa__pila {
container-type: inline-size;
position: relative;
display: flow-root;
}
.mesa__hoja {
position: relative;
background: var(--hoja);
box-shadow: var(--sombra-hoja);
outline: 1px solid transparent;
}
.mesa__hoja--presupuesto {
margin: 1cqi 0 0 auto;
width: 62%;
padding: 3.4cqi 3.6cqi 4.2cqi;
rotate: 2.2deg;
}
.presupuesto {
width: 100%;
border-collapse: collapse;
font-size: calc(2.25cqi * var(--letra-pila));
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.presupuesto caption {
padding-bottom: 1.6cqi;
text-align: left;
}
.presupuesto__titulo {
display: block;
font-size: calc(2.9cqi * var(--letra-pila));
font-weight: 700;
line-height: 1.2;
}
.presupuesto__capitulo {
display: block;
margin-top: 0.3cqi;
color: var(--texto-2);
font-weight: 500;
}
.presupuesto th,
.presupuesto td {
padding: 0.85cqi 0.8cqi;
border-bottom: 1px solid var(--mesa);
text-align: left;
vertical-align: baseline;
}
.presupuesto thead th {
padding-block: 0.8cqi;
border-bottom: 1.5px solid var(--tinta);
color: var(--texto-2);
font-size: calc(1.85cqi * var(--letra-pila));
font-weight: 500;
}
.presupuesto tbody th {
font-weight: 400;
}
.presupuesto th:first-child {
padding-left: 0;
}
.presupuesto .num {
padding-right: 0;
text-align: right;
white-space: nowrap;
}
.presupuesto tbody .num {
font-weight: 600;
}
.presupuesto__codigo {
color: var(--texto-2);
}
.mesa__hoja--plano {
margin: -2cqi 0 4cqi;
width: 77%;
padding: 2.4cqi 2.4cqi 2cqi;
rotate: -1.6deg;
}
.plano {
display: block;
width: 100%;
height: auto;
}
.plano__tabique {
fill: none;
stroke: var(--tinta);
stroke-width: 7;
}
.plano__fachada {
fill: none;
stroke: var(--tinta);
stroke-width: 15;
}
.plano__hueco {
fill: var(--hoja);
}
.plano__puerta {
fill: none;
stroke: var(--tinta);
stroke-width: 3;
}
.plano__simbolo {
fill: var(--hoja);
stroke: var(--tinta);
stroke-width: 3.5;
}
.plano__trazo {
fill: none;
stroke: var(--tinta);
stroke-width: 3.5;
}
.plano__pendiente {
fill: none;
stroke: var(--rojo);
stroke-width: 4.5;
stroke-dasharray: 9 7;
}
.plano__rotulo,
.plano__cota {
font-family: var(--letra);
text-anchor: middle;
}
.plano__rotulo {
fill: var(--tinta);
font-size: calc(40px * var(--letra-pila));
font-weight: 600;
}
.plano__cota {
fill: var(--tinta);
font-size: calc(35px * var(--letra-pila));
font-weight: 500;
font-variant-numeric: tabular-nums;
}
@media (forced-colors: active) {
.plano__tabique,
.plano__fachada,
.plano__puerta,
.plano__trazo,
.plano__simbolo {
stroke: CanvasText;
}
.plano__hueco,
.plano__simbolo {
fill: Canvas;
}
.plano__rotulo,
.plano__cota {
fill: CanvasText;
}
}
.marca--paredes-borde {
fill: var(--azul-claro);
stroke: var(--azul-marca);
stroke-width: 40;
}
.marca--paredes {
fill: var(--azul-claro);
stroke: var(--azul-claro);
stroke-width: 30;
}
@media (forced-colors: active) {
.marca--paredes-borde,
.marca--paredes {
fill: Canvas;
}
}
.marca--puerta,
.marca--toma {
fill: var(--azul-claro);
stroke: var(--azul-marca);
stroke-width: 5;
}
.mesa__cajetin {
display: flex;
justify-content: flex-end;
margin-top: 1.2cqi;
font-size: calc(1.55cqi * var(--letra-pila));
line-height: 1.2;
}
.mesa__cajetin span {
padding: 0.6cqi 1.2cqi;
border: 1px solid var(--tinta);
}
.mesa__cajetin span + span {
border-left: 0;
font-variant-numeric: tabular-nums;
}
.mesa__nota {
position: absolute;
right: 1cqi;
bottom: 12cqi; 
width: 31%;
padding: 2.8cqi 2.8cqi 3.4cqi;
border: 1.5px solid var(--azul-marca);
background: var(--azul-claro);
box-shadow: var(--sombra-nota);
font-size: calc(2.35cqi * var(--letra-pila));
line-height: 1.35;
rotate: 2.6deg;
}
.mesa__nota strong {
display: block;
text-wrap: balance;
margin-bottom: 1cqi;
font-size: calc(2.85cqi * var(--letra-pila));
font-weight: 700;
line-height: 1.2;
}
.banda--problema {
padding-block: 0 var(--entre-secciones);
background: var(--mesa);
}
.problema {
display: grid;
gap: 1.25rem 4rem;
}
.problema::before {
content: "";
grid-column: 1 / -1;
border-top: 3px solid var(--tinta);
margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.problema__titulo {
font-size: clamp(1.5rem, 1.36rem + 0.57vw, 1.875rem); 
line-height: 1.1;
letter-spacing: -0.01em;
}
.problema__texto {
color: var(--texto-2);
font-size: var(--t-entradilla);
line-height: 1.5;
}
@media (min-width: 56em) {
.problema {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.pasos {
display: grid;
gap: 1.25rem;
}
@media (min-width: 42em) {
.pasos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 72em) {
.pasos {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.paso {
display: grid;
grid-template-rows: auto auto auto 1fr;
align-content: start;
padding: 1.35rem 1.35rem 1.5rem;
border-radius: 18px;
background: var(--azul-claro);
}
@supports (grid-template-rows: subgrid) {
@media (min-width: 42em) {
.paso {
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 0;
}
}
}
.paso__numero {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--azul);
color: var(--hoja);
font-size: 1.25rem;
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.paso__titulo {
margin-top: 1.1rem;
}
.paso__texto {
margin-top: 0.6rem;
color: var(--texto-2);
}
.muestra {
margin-top: 1.25rem;
padding: 1rem;
border: 1px solid var(--azul-borde);
border-radius: 12px;
background: var(--hoja);
box-shadow: var(--sombra-muestra);
font-size: 0.9375rem;
line-height: 1.4;
}
.muestra__archivos {
display: grid;
gap: 0.5rem;
}
.archivo {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.7rem;
border-radius: 8px;
background: var(--azul-claro);
font-weight: 600;
}
.archivo__icono {
flex: none;
width: 1.05rem;
height: 1.3rem;
border-radius: 2px;
background: var(--tinta);
}
.archivo__icono--bc3 {
background: var(--azul);
}
.muestra__pie {
margin-top: 0.7rem;
color: var(--texto-2);
font-size: 0.875rem;
}
.muestra__pregunta {
display: flex;
align-items: flex-start;
gap: 0.65rem;
font-weight: 600;
}
.muestra__pregunta .icono {
flex: none;
width: 1.75rem;
height: 1.75rem;
margin-top: -0.1rem;
}
.opciones {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.8rem;
}
.opcion {
padding: 0.15rem 0.8rem;
border: 1.5px solid var(--tinta);
border-radius: 999px;
font-size: 0.875rem;
font-weight: 500;
}
.opcion--elegida {
border-color: var(--azul);
background: var(--azul);
color: var(--hoja);
}
.muestra__ruta {
color: var(--texto-2);
font-size: 0.875rem;
}
.muestra__ruta + .archivo {
margin-top: 0.6rem;
}
.muestra__resumen {
margin-top: 0.7rem;
color: var(--azul);
font-weight: 600;
}
.puntos {
display: grid;
column-gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 50em) {
.puntos {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.punto:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.punto:last-child:nth-child(odd) > div {
max-width: 36em;
}
}
.punto {
display: grid;
grid-template-columns: 3.75rem minmax(0, 1fr);
column-gap: 1.25rem;
align-items: start;
padding-block: 1.4rem 1.75rem;
border-top: 3px solid var(--tinta);
}
.punto__icono {
display: grid;
place-items: center;
width: 3.75rem;
height: 3.75rem;
border: 1.5px solid var(--azul-borde);
border-radius: 14px;
background: var(--hoja);
color: var(--azul);
}
.punto__icono .icono {
width: 2.2rem;
height: 2.2rem;
}
.icono__aspa {
stroke: var(--rojo);
}
.punto__titulo {
font-size: var(--t-h3);
}
.punto p {
margin-top: 0.35rem;
color: var(--texto-2);
}
@media (max-width: 29.99em) {
.punto {
grid-template-columns: 3.25rem minmax(0, 1fr);
column-gap: 1rem;
}
.punto__icono {
width: 3.25rem;
height: 3.25rem;
border-radius: 12px;
}
.punto__icono .icono {
width: 1.9rem;
height: 1.9rem;
}
}
.necesitas {
display: grid;
gap: 2.25rem clamp(2rem, 5vw, 5rem);
}
@media (min-width: 52em) {
.necesitas {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.necesitas__titulo {
padding-top: 1rem;
border-top: 3px solid var(--tinta);
font-size: var(--t-h3);
}
.requisito,
.arranque__paso {
padding-block: 0.95rem 1.05rem;
border-bottom: 1.5px solid var(--mesa);
}
.requisitos,
.arranque {
margin-top: 0.35rem;
}
.requisito dt,
.arranque__titulo {
font-size: var(--t-texto);
font-weight: 600;
line-height: 1.35;
}
.requisito dd,
.arranque__paso p {
margin-top: 0.2rem;
color: var(--texto-2);
}
.arranque__paso {
display: grid;
grid-template-columns: 1.6rem minmax(0, 1fr);
column-gap: 0.6rem;
}
.arranque__numero {
color: var(--azul);
font-size: var(--t-texto);
font-weight: 700;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.precios__aviso {
margin-bottom: 1.75rem;
}
.seccion__titulo + .entradilla + .precios__aviso {
margin-top: 1.25rem;
}
.planes {
display: grid;
gap: 1.5rem;
align-items: center;
}
@media (min-width: 60em) {
.planes {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
}
}
.plan {
padding: 1.6rem 1.6rem 1.75rem;
border-radius: 18px;
background: var(--hoja);
box-shadow: var(--sombra-tarjeta);
}
.plan--recomendado {
padding-block: 2.1rem 2.35rem;
background: var(--azul);
color: var(--hoja);
box-shadow: var(--sombra-azul);
}
.plan__cabecera {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.plan__nombre {
font-size: 1.375rem;
font-weight: 600;
}
.plan__marca {
padding: 0.15rem 0.8rem;
border: 1.5px solid var(--azul-marca);
border-radius: 999px;
background: var(--azul-claro);
color: var(--azul);
font-size: 0.875rem;
font-weight: 600;
}
.plan__precio {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 0.75rem;
margin-top: 0.9rem;
}
.plan__cifra {
font-size: clamp(2.75rem, 2.564rem + 0.762vw, 3.25rem); 
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.plan__precio span {
color: var(--texto-2);
font-size: 1rem;
font-weight: 500;
}
.plan__anual {
margin-top: 0.6rem;
color: var(--texto-2);
font-size: var(--t-nota);
line-height: 1.4;
}
.plan__datos {
margin-top: 1.5rem;
}
.plan__datos div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: 1rem;
padding-block: 0.7rem;
border-top: 1.5px solid var(--mesa);
}
.plan__datos div:last-child {
border-bottom: 1.5px solid var(--mesa);
}
.plan__datos dt {
font-weight: 400;
}
.plan__datos dd {
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.plan__datos .plan__por-obra {
grid-column: 1 / -1;
text-wrap: pretty;
margin-top: 0.2rem;
color: var(--texto-2);
font-size: var(--t-nota);
font-weight: 500;
white-space: normal;
}
.plan__iva {
font-size: 0.8125rem;
font-weight: 500;
}
.plan--recomendado .plan__precio span,
.plan--recomendado .plan__anual,
.plan--recomendado .plan__por-obra {
color: var(--azul-claro);
}
.plan--recomendado .plan__datos div {
border-color: rgb(227 241 250 / 0.3);
}
.precios__notas {
display: grid;
gap: 0.5rem;
max-width: 50em;
margin-top: 2.25rem;
color: var(--texto-2);
font-size: var(--t-nota);
line-height: 1.5;
}
.precios__notas strong {
color: var(--tinta);
}
.precios__notas + .accion {
margin-top: 2.25rem;
}
.preguntas-rejilla {
display: grid;
gap: 2rem clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 60em) {
.preguntas-rejilla {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
align-items: start;
}
.otra-pregunta {
position: sticky;
top: 1.5rem;
}
}
@media (max-width: 59.99em) {
.otra-pregunta {
display: none;
}
}
.otra-pregunta {
padding: 1.4rem 1.5rem 1.5rem;
border-radius: 18px;
background: var(--azul-claro);
}
.otra-pregunta__titulo {
font-size: var(--t-h3);
}
.otra-pregunta p {
margin-top: 0.5rem;
overflow-wrap: anywhere;
}
.preguntas details {
border-top: 1.5px solid var(--mesa);
}
.preguntas details:last-child {
border-bottom: 1.5px solid var(--mesa);
}
.preguntas summary {
position: relative;
display: block;
padding: 1.05rem 3.25rem 1.05rem 0;
cursor: pointer;
font-size: var(--t-h3);
font-weight: 600;
line-height: 1.3;
list-style: none;
text-wrap: balance;
}
.preguntas summary::-webkit-details-marker {
display: none;
}
.preguntas summary::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 2rem;
height: 2rem;
margin-top: -1rem;
border-radius: 50%;
background:
linear-gradient(var(--azul), var(--azul)) center / 0.9rem 2px no-repeat,
linear-gradient(var(--azul), var(--azul)) center / 2px 0.9rem no-repeat,
var(--azul-claro);
}
.preguntas details[open] > summary::after {
rotate: 45deg;
}
.preguntas summary:hover::after {
box-shadow: inset 0 0 0 1.5px var(--azul-marca);
}
@media (forced-colors: active) {
.preguntas summary::after {
border: 1px solid CanvasText;
background: linear-gradient(CanvasText, CanvasText) center / 0.9rem 2px no-repeat,
linear-gradient(CanvasText, CanvasText) center / 2px 0.9rem no-repeat;
forced-color-adjust: none;
}
}
.respuesta {
max-width: 44em;
padding: 0 3.5rem 1.5rem 0;
color: var(--texto-2);
}
.contacto__correo {
font-size: clamp(1.375rem, 1.14rem + 0.95vw, 2rem); 
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
}
.contacto__correo a {
text-decoration-thickness: 2px;
}
.contacto__telefono {
margin-top: 0.6rem;
font-size: var(--t-entradilla);
}
.contacto__privacidad {
max-width: 48em;
margin-top: 1.75rem;
}
.muestra__etapas {
display: grid;
gap: 0.45rem;
}
.etapa {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.etapa__marca {
flex: none;
width: 1rem;
font-weight: 700;
text-align: center;
}
.etapa--hecha .etapa__marca {
color: var(--azul);
}
.etapa--ahora {
font-weight: 600;
}
.etapa--luego {
color: var(--texto-2);
}
.precios__piloto {
max-width: 40rem;
margin-bottom: 1.75rem;
padding: 1.5rem;
border: 1px solid var(--azul-borde);
border-radius: 12px;
background: var(--hoja);
box-shadow: var(--sombra-tarjeta);
}
.precios__piloto-titulo {
margin-bottom: 0.5rem;
font-size: var(--t-h3);
font-weight: 600;
}
.recibes {
max-width: 47rem;
margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.recibes__titulo {
font-size: var(--t-h3, 1.25rem);
}
.recibes ul {
margin-top: 0.6rem;
padding-left: 1.2rem;
list-style: disc;
}
.recibes li + li {
margin-top: 0.3rem;
}
.recibes__enlace {
margin-top: 1rem;
font-weight: 600;
}
.pagina-secundaria main {
padding-block: clamp(1.5rem, 0.5rem + 3vw, 3.5rem) clamp(4rem, 3rem + 4vw, 6.5rem);
}
.hoja-legal,
.hoja-aviso {
max-width: 52rem;
margin-inline: auto;
padding: clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);
border-radius: 4px;
background: var(--hoja);
box-shadow: var(--sombra-hoja);
}
.hoja-legal {
max-width: 47rem;
}
.hoja-legal__titulo,
.hoja-aviso__titulo {
font-size: var(--t-h2);
line-height: 1.1;
}
.hoja-legal__version {
margin-top: 0.6rem;
color: var(--texto-2);
font-size: var(--t-nota);
}
.borrador {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0.5rem 0.9rem;
border: 1px solid var(--azul-borde);
border-radius: 8px;
background: var(--azul-claro);
font-size: var(--t-nota);
font-weight: 600;
}
.indice {
padding: 1.1rem 1.35rem 1.25rem;
border: 1.5px solid var(--azul-borde);
border-radius: 12px;
}
.texto-legal > .indice {
margin-top: 1.75rem;
}
.indice__titulo {
font-weight: 600;
}
.indice ol {
margin-top: 0.5rem;
padding-left: 1.5rem;
list-style: decimal;
columns: 2 16rem;
column-gap: 2.5rem;
font-size: var(--t-nota);
line-height: 1.4;
}
.indice li {
padding-block: 0.25rem;
break-inside: avoid;
}
.indice a {
color: var(--tinta);
}
.indice li::marker {
color: var(--texto-2);
}
.texto-legal {
margin-top: 2rem;
}
.texto-legal > * + * {
margin-top: 1rem;
}
.texto-legal h2 {
margin-top: 2.75rem;
padding-top: 1.25rem;
border-top: 3px solid var(--tinta);
font-size: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
}
.texto-legal > h2:first-child {
margin-top: 0.5rem;
}
.texto-legal h3 {
margin-top: 1.75rem;
font-size: 1.1875rem;
}
.texto-legal p,
.texto-legal li {
max-width: 34em;
}
.texto-legal ul {
padding-left: 1.25rem;
list-style: disc;
}
.texto-legal ol {
padding-left: 1.5rem;
list-style: decimal;
}
.texto-legal li + li {
margin-top: 0.4rem;
}
.texto-legal li > ul {
margin-top: 0.4rem;
list-style: circle;
}
.texto-legal a {
overflow-wrap: anywhere;
}
.texto-legal code,
.texto-legal pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.875em;
}
.texto-legal code {
padding: 0.05em 0.3em;
border-radius: 4px;
background: var(--mesa);
overflow-wrap: anywhere;
}
.texto-legal pre {
max-width: 100%;
padding: 0.9rem 1rem;
overflow-x: auto;
border-radius: 8px;
background: var(--mesa);
line-height: 1.5;
}
.texto-legal pre code {
padding: 0;
background: none;
overflow-wrap: normal;
}
.texto-legal h4 {
margin-top: 1.5rem;
font-size: 1.0625rem;
font-weight: 600;
}
.texto-legal table {
width: 100%;
border-collapse: collapse;
font-size: var(--t-nota);
line-height: 1.45;
}
.texto-legal th,
.texto-legal td {
padding: 0.65rem 1rem 0.65rem 0;
border-bottom: 1.5px solid var(--mesa);
text-align: left;
vertical-align: top;
}
.texto-legal thead th {
border-bottom: 2px solid var(--tinta);
font-weight: 600;
}
.texto-legal tbody th {
font-weight: 600;
white-space: nowrap; 
}
@media (max-width: 39.99em) {
.texto-legal table,
.texto-legal tbody,
.texto-legal tr,
.texto-legal th,
.texto-legal td {
display: block;
}
.texto-legal thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.texto-legal tbody tr {
padding-block: 0.75rem;
border-bottom: 1.5px solid var(--mesa);
}
.texto-legal tbody th,
.texto-legal tbody td {
padding: 0.15rem 0;
border: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.texto-legal td::before {
content: attr(data-etiqueta) ": ";
font-weight: 600;
}
}
.texto-legal .nota {
padding: 0.9rem 1.1rem;
border-radius: 10px;
background: var(--azul-claro);
color: var(--tinta);
font-size: inherit;
}
.hoja-aviso .entradilla {
margin-top: 1.25rem;
}
.hoja-aviso .accion,
.hoja-aviso .acciones {
margin-top: 2.25rem;
}
.hoja-aviso .acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
}
.hoja-legal__accion {
margin-top: 2rem;
}
@media (prefers-reduced-motion: no-preference) {
.mesa .marca {
animation: marcar 0.55s ease-out 0.5s backwards;
}
.mesa .marca--puerta {
animation-delay: 0.9s;
}
.mesa .marca--toma {
animation-delay: 1.2s;
}
.preguntas summary::after {
transition: rotate 150ms ease-out, box-shadow 120ms;
}
}
@keyframes marcar {
from {
opacity: 0;
}
}
@media print {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
box-shadow: none !important;
}
body {
background: var(--hoja);
}
.cabecera .menu,
.acceder,
.saltar {
display: none;
}
.banda,
.portada {
padding-block: 2rem;
}
.hoja-legal,
.hoja-aviso {
padding: 0;
}
.mesa {
break-inside: avoid;
}
.mesa__hoja,
.mesa__nota {
outline-color: var(--tinta);
}
.boton,
.paso__numero,
.opcion--elegida,
.plan--recomendado,
.mesa__nota {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}