<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<article class="wysiwyg-block">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="
bodycopy-m
">
<p>¿Te estás planteando vender o <a href='#'>alquilar tu casa</a>? Para que puedas obtener la mayor rentabilidad de esa operación, lo más interesante es incrementar el valor de la vivienda antes de sacarla al mercado a través de la realización de mejoras en el inmueble.</p>
<p>Teniendo en cuenta que la antigüedad media de las viviendas en venta en España es de 45 años, es probable que tu casa requiera alguna reforma, lo que puede aumentar su valor de tasación hasta un 20%, según la Asociación Nacional de Distribuidores de Cerámica y Material de Construcción (Andimac).</p>
<p>Ahora bien, no es necesario que te lances a una remodelación integral del piso para aumentar el valor de la vivienda, pues hay pequeñas reformas que tienen un gran impacto en el precio final de venta. En Hipotecas.com tenemos 6 trucos que te ayudarán a incrementar el valor de la vivienda sin hacer una inversión demasiado elevada. ¡Te los contamos!</p>
</div>
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Pintar las paredes para aportar sensación de nuevo
</h2>
</div>
</div>
<div class="row wysiwyg-block__subtitle">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h3 class="
title-m
">Documentación</h3>
</div>
</div>
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="
bodycopy-m
">
<p>¿Te estás planteando vender o <a href='#'>alquilar tu casa</a>? Para que puedas obtener la mayor rentabilidad de esa operación, lo más interesante es incrementar el valor de la vivienda antes de sacarla al mercado a través de la realización de mejoras en el inmueble.</p>
<p>Teniendo en cuenta que la antigüedad media de las viviendas en venta en España es de 45 años, es probable que tu casa requiera alguna reforma, lo que puede aumentar su valor de tasación hasta un 20%, según la Asociación Nacional de Distribuidores de Cerámica y Material de Construcción (Andimac).</p>
<p>Ahora bien, no es necesario que te lances a una remodelación integral del piso para aumentar el valor de la vivienda, pues hay pequeñas reformas que tienen un gran impacto en el precio final de venta. En Hipotecas.com tenemos 6 trucos que te ayudarán a incrementar el valor de la vivienda sin hacer una inversión demasiado elevada. ¡Te los contamos!</p>
</div>
</div>
</div>
<div class="row wysiwyg-block__is-two-columns">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="
bodycopy-m
">
<p>¿Aún conservas el gotelé? ¿la combinación de colores de las paredes te parece <a href="#">luminosidad</a> o sombría? Siquieres renovar la imagen y aumentar el valor de la vivienda antes de ponerla a la venta o alquilarla, pintarlas paredes es una reforma que no precisa de un alto presupuesto y con la que obtendrás un gran cambio.</p>
<p>Los colores claros y neutros imprimen un carácter uniforme a las estancias y, además, incrementan notablemente la luminosidad, dando la sensación de que el inmueble es más amplio y nuevo. Pero si te aburren las paredes blancas, también puedes elegir colores para habitaciones pequeñas más llamativos, y jugar con la mezcla de tonalidades sin miedo a reducir visualmente el espacio.</p>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
</figure>
</div>
</div>
<div class="row">
<div class="col summary with-line col-xs-10 col-ms-10 col-xs-mr-ml col-sm-10 col-lg-9">
<div class="summary__title-m">
<h3 class="
title-m
">Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet</h3>
</div>
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Pintar las paredes para aportar sensación de nuevo
</h2>
</div>
</div>
<div class="row wysiwyg-block__is-two-columns">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="
bodycopy-m
">
<p>¿Aún conservas el gotelé? ¿la combinación de colores de las paredes te parece <a href="#">luminosidad</a> o sombría? Siquieres renovar la imagen y aumentar el valor de la vivienda antes de ponerla a la venta o alquilarla, pintarlas paredes es una reforma que no precisa de un alto presupuesto y con la que obtendrás un gran cambio.</p>
<p>Los colores claros y neutros imprimen un carácter uniforme a las estancias y, además, incrementan notablemente la luminosidad, dando la sensación de que el inmueble es más amplio y nuevo. Pero si te aburren las paredes blancas, también puedes elegir colores para habitaciones pequeñas más llamativos, y jugar con la mezcla de tonalidades sin miedo a reducir visualmente el espacio.</p>
</div>
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Pintar las paredes para aportar sensación de nuevo
</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="
bodycopy-m
">
<p>¿Te estás planteando vender o <a href='#'>alquilar tu casa</a>? Para que puedas obtener la mayor rentabilidad de esa operación, lo más interesante es incrementar el valor de la vivienda antes de sacarla al mercado a través de la realización de mejoras en el inmueble.</p>
<p>Teniendo en cuenta que la antigüedad media de las viviendas en venta en España es de 45 años, es probable que tu casa requiera alguna reforma, lo que puede aumentar su valor de tasación hasta un 20%, según la Asociación Nacional de Distribuidores de Cerámica y Material de Construcción (Andimac).</p>
<p>Ahora bien, no es necesario que te lances a una remodelación integral del piso para aumentar el valor de la vivienda, pues hay pequeñas reformas que tienen un gran impacto en el precio final de venta. En Hipotecas.com tenemos 6 trucos que te ayudarán a incrementar el valor de la vivienda sin hacer una inversión demasiado elevada. ¡Te los contamos!</p>
</div>
</div>
</div>
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
<div class="row wysiwyg-block__common-list">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="wysiwyg-block__list-wrapper">
<div class="
bodycopy-m
">
<ul>
<li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.</li>
<li>Descubre nuestros productos para los residentes en España.</li>
<li>Puedes pedirnos consejo siempre que lo necesites</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col summary col-xs-10 col-ms-10 col-xs-mr-ml col-sm-10 col-lg-9">
<svg class="icon icon-quotation-marks ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#quotation-marks"></use>
</svg>
<div class="summary__title-m">
<h3 class="
title-m
">Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet Frase destacada lorem ipsum dolor sit amet</h3>
</div>
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Pintar las paredes para aportar sensación de nuevo
</h2>
</div>
</div>
<div class="row wysiwyg-block__common-list">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="wysiwyg-block__list-wrapper">
<div class="
bodycopy-m
">
<ul>
<li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas id arcu at mi suscipit blandit.</li>
<li>Phasellus viverra lectus sed ligula elementum, sollicitudin maximus magna ornare.</li>
</ul>
</li>
<li>Descubre nuestros productos para los residentes en España.</li>
<li>Puedes pedirnos consejo siempre que lo necesites<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas id arcu at mi suscipit blandit.</li>
<li>Phasellus viverra lectus sed ligula elementum, sollicitudin maximus magna ornare.</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row wysiwyg-block__links">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-120 col">
<a class="link
" href="#">
<span>Documento corporativo.pdf (12MB)</span>
</a>
<a class="link
" href="#">
<span>Échale un vistazo a estos enlaces de interés</span>
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="
bodycopy-s
">
<p>Las publicaciones en el Blog de UCI, tratan temas de actualidad que pretenden ser de utilidad para nuestros lectores. No obstante, es posible que algunos de los post menos recientes contengan información no actualizada, por ello es necesario que compruebes siempre la fecha de publicación del post.</p>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<article class="wysiwyg-block">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
{{#if isTwoCols}}
<div class="row">
<div class="col-xs-10 col-xs-mr-ml col-ms-5 col-sm-5 col-lg-5 col img-col">
<img src="{{img-src}}" src="{{img-alt}}" />
</div>
<div class="col-xs-12 col-ms-7 col-sm-7 col-lg-7 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-m bodycopy-1 }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-m bodycopy-2 }}
</div>
</div>
</div>
</div>
{{else}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-m bodycopy-1 }}
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @title-l title-1 }}
</div>
</div>
<div class="row wysiwyg-block__subtitle">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @title-m title-2 }}
</div>
</div>
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-m bodycopy-1 }}
</div>
</div>
<div class="row wysiwyg-block__is-two-columns">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{> @bodycopy-m bodycopy-2 }}
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
</figure>
</div>
</div>
{{#if isHipotecas}}
{{ render '@summary--hipotecas-line' }}
{{else}}
{{ render '@summary--line' }}
{{/if}}
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @title-l title-1 }}
</div>
</div>
<div class="row wysiwyg-block__is-two-columns">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{> @bodycopy-m bodycopy-2 }}
</div>
</div>
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @title-l title-1 }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-m bodycopy-1 }}
</div>
</div>
<figure>
<img src="/dist/images/featured.jpg" alt="A blog post picture">
<figcaption>Pie de foto</figcaption>
</figure>
<div class="row wysiwyg-block__common-list">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="wysiwyg-block__list-wrapper">
{{> @bodycopy-m unordered-list }}
</div>
</div>
</div>
{{#if isHipotecas}}
{{ render '@summary--hipotecas' }}
{{else}}
{{ render '@summary' }}
{{/if}}
<div class="row wysiwyg-block__title">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @title-l title-1 }}
</div>
</div>
<div class="row wysiwyg-block__common-list">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="wysiwyg-block__list-wrapper">
{{> @bodycopy-m subunordered-list }}
</div>
</div>
</div>
<div class="row wysiwyg-block__links">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-120 col">
{{> @link download-link}}
{{> @link external-link}}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{> @bodycopy-s bodycopy-4 }}
</div>
</div>
{{#if withoutclass}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2>Título h2</h2>
<h3>subTítulo h3</h3>
<p>¿Te estás planteando vender o <a href='#'>alquilar tu casa</a>? Para que puedas obtener la mayor
rentabilidad</p>
</div>
</div>
{{/if}}
{{/if}}
</div>
</div>
</article>
{{/content}}
{{/extend}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"bodycopy-1": {
"text": "<p>¿Te estás planteando vender o <a href='#'>alquilar tu casa</a>? Para que puedas obtener la mayor rentabilidad de esa operación, lo más interesante es incrementar el valor de la vivienda antes de sacarla al mercado a través de la realización de mejoras en el inmueble.</p><p>Teniendo en cuenta que la antigüedad media de las viviendas en venta en España es de 45 años, es probable que tu casa requiera alguna reforma, lo que puede aumentar su valor de tasación hasta un 20%, según la Asociación Nacional de Distribuidores de Cerámica y Material de Construcción (Andimac).</p><p>Ahora bien, no es necesario que te lances a una remodelación integral del piso para aumentar el valor de la vivienda, pues hay pequeñas reformas que tienen un gran impacto en el precio final de venta. En Hipotecas.com tenemos 6 trucos que te ayudarán a incrementar el valor de la vivienda sin hacer una inversión demasiado elevada. ¡Te los contamos!</p>"
},
"title-1": {
"text": "Pintar las paredes para aportar sensación de nuevo"
},
"title-2": {
"text": "Documentación"
},
"bodycopy-2": {
"text": "<p>¿Aún conservas el gotelé? ¿la combinación de colores de las paredes te parece <a href=\"#\">luminosidad</a> o sombría? Siquieres renovar la imagen y aumentar el valor de la vivienda antes de ponerla a la venta o alquilarla, pintarlas paredes es una reforma que no precisa de un alto presupuesto y con la que obtendrás un gran cambio.</p><p>Los colores claros y neutros imprimen un carácter uniforme a las estancias y, además, incrementan notablemente la luminosidad, dando la sensación de que el inmueble es más amplio y nuevo. Pero si te aburren las paredes blancas, también puedes elegir colores para habitaciones pequeñas más llamativos, y jugar con la mezcla de tonalidades sin miedo a reducir visualmente el espacio.</p>"
},
"bodycopy-3": {
"text": "<p>¿Te estás planteando vender o alquilar tu casa? Para que puedas obtener la mayor rentabilidad de esa operación, lo más interesante es incrementar el valor de la vivienda antes de sacarla al mercado a través de la realización de mejoras en el inmueble.</p>"
},
"bodycopy-4": {
"text": "<p>Las publicaciones en el Blog de UCI, tratan temas de actualidad que pretenden ser de utilidad para nuestros lectores. No obstante, es posible que algunos de los post menos recientes contengan información no actualizada, por ello es necesario que compruebes siempre la fecha de publicación del post.</p>"
},
"support-link": {
"href": "#",
"text": "Entra en productos para no residentes",
"isLight": true
},
"description": {
"text": "<p>Te ayudamos a financiar tu mayor proyecto, tu hogar.</p>",
"colorLight": false
},
"featured-text": {
"text": "Para pedir financiación es vital que los ingresos de nómina, los de autónomo, rentas por alquiler de viviendas"
},
"unordered-list": {
"text": "<ul><li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.</li><li>Descubre nuestros productos para los residentes en España.</li><li>Puedes pedirnos consejo siempre que lo necesites</li></ul>",
"colorLight": false
},
"subunordered-list": {
"text": "<ul><li>En UCI haremos todo lo posible para que tu proyecto se convierta en realidad.<ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>Maecenas id arcu at mi suscipit blandit.</li><li>Phasellus viverra lectus sed ligula elementum, sollicitudin maximus magna ornare.</li></ul></li><li>Descubre nuestros productos para los residentes en España.</li><li>Puedes pedirnos consejo siempre que lo necesites<ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>Maecenas id arcu at mi suscipit blandit.</li><li>Phasellus viverra lectus sed ligula elementum, sollicitudin maximus magna ornare.</li></ul></li></ul>",
"colorLight": false
},
"external-link": {
"isExternal": true,
"href": "#",
"text": "Échale un vistazo a estos enlaces de interés"
},
"download-link": {
"isDownload": true,
"href": "#",
"text": "Documento corporativo.pdf (12MB)"
}
}
.wysiwyg-block {
.img-col{
@media (--viewport-xs-max) {
margin-bottom: 64px;
}
}
a {
color: var(--color-accent-dark); text-decoration:underline;
}
&__title {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 40px 0 20px;
@media (--viewport-ms-only) {
margin-top: 60px;
}
@media (--viewport-md-min) {
margin-top: 80px;
}
}
}
&__subtitle {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 40px 0 20px;
@media (--viewport-ms-only) {
margin-top: 60px;
}
}
}
&__is-two-columns {
> .col {
.bodycopy-m,
.bodycopy-s {
@media (--viewport-ms-min) {
margin-top: 0;
margin-bottom: 0;
}
@media (--viewport-sm-min) {
margin-top: 60px;
margin-bottom: 60px;
}
}
figure {
@media (--viewport-ms-min) {
margin: 40px 0;
}
@media (--viewport-sm-min) {
margin: 60px 0;
}
}
}
}
&__is-two-columns + &__title {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 40px 0 20px;
@media (--viewport-ms-only) {
margin-top: 60px;
}
@media (--viewport-md-min) {
margin-top: 20px;
}
}
}
&__title + &__is-two-columns {
> .col {
.bodycopy-m,
.bodycopy-s {
@media (--viewport-ms-min) {
margin-top: 0;
margin-bottom: 0;
}
@media (--viewport-sm-min) {
margin-top: 0;
margin-bottom: 60px;
}
}
figure {
@media (--viewport-ms-min) {
margin: 0 0 40px;
}
@media (--viewport-sm-min) {
margin: 0 0 60px;
}
}
}
}
p {
font-size: 16px;
line-height: 26px;
/*fuente e interlineado para forzar un bodycopy-m CR*/
}
p,
.bodycopy-m,
.bodycopy-s {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
a {
color: var(--color-accent-dark); text-decoration:underline;
}
}
ul {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
> li {
position: relative;
padding-left: 30px;
margin-bottom: 20px;
@media (--viewport-ms-min) {
padding-left: 50px;
}
&::before {
position: absolute;
top: 11px;
left: 0;
display: block;
width: 15px;
height: 1px;
background-color: var(--color-accent);
content: '';
@media (--viewport-ms-min) {
left: 20px;
}
}
&:last-child {
margin-bottom: 0;
}
> ul {
margin-top: 20px;
margin-bottom: 0;
> li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
&::before {
position: absolute;
top: 10px;
left: 0;
display: block;
width: 10px;
height: 1px;
background-color: var(--color-accent);
content: '';
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
ol {
margin-bottom: 20px;
counter-reset: custom-counter;
li {
position: relative;
padding-left: 21px;
margin-bottom: 15px;
counter-increment: custom-counter;
&::before {
position: absolute;
top: 7px;
left: 0;
font-family: 'Jornada Sans Book';
font-size: 10px;
font-weight: normal;
line-height: 1;
letter-spacing: 0;
content: counter(custom-counter) ' /';
}
@media (--viewport-ms-min) {
padding-left: 28px;
margin-bottom: 20px;
}
&:last-child {
margin-bottom: 0;
}
}
}
figure {
margin: 40px -19px 40px -20px;
@media (--viewport-ms-min) {
margin: 40px 0;
}
@media (--viewport-sm-min) {
margin: 60px 0;
}
@media (--viewport-sm-min) {
margin: 80px 0;
}
&:first-child {
@media (--viewport-sm-min) {
margin: 50px 0 80px;
}
}
img {
max-width: 100%;
height: auto;
margin: 0 auto;
}
figcaption {
margin-top: 15px;
font-family: 'Jornada Sans Book';
font-size: 16px;
font-weight: normal;
line-height: 26px;
letter-spacing: 0;
color: var(--color-text);
@media (--viewport-xs-max) {
padding: 0 19px 0 20px;
}
@media (--viewport-sm-min) {
margin-top: 30px;
}
}
}
img {
max-width: 100%;
height: auto;
margin: 0 auto;
}
&__common-list {
margin-top: 20px;
margin-bottom: 20px;
ul {
> li {
position: relative;
padding-left: 20px;
@media (--viewport-ms-min) {
padding-left: 30px;
}
&::before {
position: absolute;
top: 11px;
left: 0;
display: block;
width: 15px;
height: 1px;
background-color: var(--color-accent);
content: '';
}
&:last-child {
margin-bottom: 0;
}
> ul {
margin-top: 20px;
margin-bottom: 0;
> li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
&::before {
position: absolute;
top: 10px;
left: 0;
display: block;
width: 10px;
height: 1px;
background-color: var(--color-accent);
content: '';
}
&:last-child {
margin-bottom: 0;
}
}
}
}
}
ol {
counter-reset: custom-counter;
li {
position: relative;
padding-left: 21px;
margin-bottom: 15px;
counter-increment: custom-counter;
&::before {
position: absolute;
top: 7px;
left: 0;
font-family: 'Jornada Sans Book';
font-size: 10px;
font-weight: normal;
line-height: 1;
letter-spacing: 0;
content: counter(custom-counter) ' /';
}
@media (--viewport-ms-min) {
padding-left: 28px;
margin-bottom: 20px;
}
&:last-child {
margin-bottom: 0;
}
}
}
}
&__featured-text {
margin-top: 40px;
margin-bottom: 40px;
@media (--viewport-ms-min) {
margin-top: 80px;
margin-bottom: 80px;
}
&-wrapper {
font-size: 40px;
line-height: 52px;
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid var(--color-secondary-light);
border-bottom: 1px solid var(--color-secondary-light);
@media (--viewport-ms-min) {
font-size: 44px;
line-height: 56px;
padding-top: 61px;
padding-bottom: 61px;
}
}
}
&__featured-text + &__title {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 20px;
}
}
&__links {
margin-top: 40px;
margin-bottom: 40px;
.link {
display: inline-block;
}
.link + .link {
margin-top: 20px;
}
}
h2 {
color: var(--color-accent-dark);
margin-top: 40px;
margin-bottom: 20px;
@media (--viewport-xs-min) {
font-size: 26px;
}
@media (--viewport-ms-min) {
font-size: 32px;
}
@media (--viewport-sm-min) {
font-size: 22px;
}
@media (--viewport-md-min) {
font-size: 32px;
}
@media (--viewport-lg-min) {
font-size: 30px;
}
@media (--viewport-xl-min) {
font-size: 30px;
}
}
h3 {
color: var(--color-accent-dark);
margin-top: 20px;
margin-bottom: 15px;
@media (--viewport-xs-max) {
font-size: 18px;
}
@media (--viewport-ms-min) {
font-size: 24px;
}
@media (--viewport-sm-min) {
font-size: 18px;
}
@media (--viewport-md-min) {
font-size: 26px;
}
@media (--viewport-lg-min) {
font-size: 20px;
}
@media (--viewport-xl-min) {
font-size: 20px;
}
}
}
Se incluyen estilos concreto para el uso de html sin clases para el blog de hipotecas en las variantes:
¿Te estás planteando vender o alquilar tu casa? Para que puedas obtener la mayor rentabilidad