@import "reset.css";

@import "styled-elements.css";

.clear {
clear:both;
height:1px
}

.inv {
display:none
}

.alignleft {
float:left;
margin:5px 10px 5px 0
}

body {
line-height:1;
color:#51565b;
background:#f1f1f1 url(../img/bg/patterns/noise.png);
font-family:Arial,Helvetica,sans-serif;
font-size:100%
}

.wrapper {
width:966px;
margin:0 auto;
position:relative
}

#header {
height:117px;
position:relative;
z-index:10;
background:#2a2d30 url(../img/header-glow.png) top center no-repeat
}

#main {
width:100%
}

#content {
min-height:400px;
overflow:hidden;
margin-bottom:40px;
font-size:14px;
line-height:1.5em
}

#logo {
position:absolute;
top:8px;
left:30px
}

#content a {
color:#37b2d1
}

#content p {
margin-bottom:20px
}

#content .line-divider {
clear:both;
border-bottom:1px solid #d7d7d7;
padding-bottom:10px;
margin-bottom:10px
}

#headline {
position:relative;
width:906px;
margin:20px auto 50px
}

#headline>span.main {
display:block;
margin-right:170px;
font-family:'Ubuntu',arial,serif;
font-size:26px;
line-height:1.5em;
text-shadow:1px 1px rgba(255,255,255,1)
}

#headline>span.sub {
display:block;
margin-right:170px;
font-size:18px;
line-height:1.5em;
text-shadow:1px 1px rgba(255,255,255,1)
}

#headline #link {
display:block;
position:absolute;
top:171px;
right:-16px
}

#menu {
width:100%;
padding-top:1px;
margin-bottom:0;
background:#f858ef;
background:-webkit-gradient(linear,left top,right bottom,from(#f858ef),to(#ffe413));
background:-moz-linear-gradient(left,#f858ef,#ffe413);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f858ef',endColorstr='#ffe413',GradientType=1)
}

#menu-holder {
width:100%;
height:79px;
background:url(../img/menu-bg.png) repeat-x
}

#nav {
display:block;
position:absolute;
top:0;
left:30px;
height:79px;
width:906px
}

#nav>li {
display:block;
float:left;
height:100%;
margin-right:32px
}

#nav>li>a {
display:block;
font-size:16px;
color:#bac0c9;
text-decoration:none;
margin-top:20px;
text-shadow:0 -2px rgba(0,0,0,.8)
}

#nav>li>a>span.subheader {
display:block;
font-size:11px;
color:#656b74;
font-style:italic;
margin-top:10px
}

#nav>li.current-menu-item {
background:url(../img/menu-arrow.png) no-repeat center bottom
}

#nav>li:hover>a {
color:#fff
}

#nav>li ul {
display:block;
margin-top:33px;
background:#1d2023;
border-radius:0 10px 0 10px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
-webkit-box-shadow:0 3px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 3px 2px rgba(0,0,0,0.4);
box-shadow:0 3px 2px rgba(0,0,0,0.4)
}

#nav>li>ul ul {
margin-top:0;
border-radius:0 10px 10px 10px;
-moz-border-radius:0 10px 10px;
-webkit-border-radius:0 10px 10px 10px
}

#nav>li ul li a {
display:block;
padding:10px 15px;
display:block;
font-size:11px;
color:#bac0c9;
text-decoration:none
}

#nav>li ul li a span {
display:block
}

#nav>li ul li a:hover {
background:#000;
color:#fff
}

#nav>li ul li:last-child a:hover {
border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px
}

#header #breadcrumbs {
position:absolute;
bottom:11px;
left:30px;
font-style:italic;
color:#999;
font-size:10px
}

#header #breadcrumbs a {
color:#bfbdbd;
text-decoration:none;
background:url(../img/breadcrumb-slash.png) no-repeat top right;
padding-right:14px
}

#page-title {
overflow:hidden;
height:103px;
margin-bottom:30px;
background:url(../img/tabs-divider.png) repeat-x bottom center;
text-shadow:1px 1px rgba(255,255,255,1);
font-size:100%
}

#page-title .title {
display:block;
float:left;
font-family:'Ubuntu',arial,serif;
font-size:40px;
line-height:103px;
margin-left:30px
}

#page-title .subtitle {
display:block;
float:left;
margin-left:30px;
font-size:14px;
margin-top:4px;
line-height:103px;
color:#929191;
font-style:italic
}

h1,h2,h3,h4,h5,h6 {
line-height:1.4em;
font-family:'Ubuntu',arial,serif;
font-weight:lighter
}

h1 {
font-size:30px
}

h2 {
font-size:28px
}

h3 {
font-size:26px
}

h4 {
font-size:24px
}

h5 {
font-size:22px
}

h6 {
font-size:20px
}

.one-half,.one-third,.two-third,.three-fourth,.one-fourth {
float:left;
margin-right:30px;
position:relative
}

.one-half {
width:438px
}

.one-third {
width:282px
}

.one-fourth {
width:204px
}

.two-third {
width:594px
}

.three-fourth {
width:672px
}

.last {
clear:right;
margin-right:0!important
}

.top-search {
position:absolute;
top:47px;
right:30px
}

#searchform #s {
color:#7e7e7e;
font-size:10px;
width:180px;
height:28px;
padding:0 35px 0 10px;
border:0;
background:url(../img/search.png) no-repeat transparent
}

#searchform #searchsubmit {
position:absolute;
top:0;
right:10px;
width:30px;
height:25px;
border:0;
background:transparent
}

#content .filter {
display:block;
overflow:hidden;
margin-bottom:30px;
padding-left:30px;
padding-right:30px
}

#content .filter li {
display:block;
float:left;
font-size:12px;
line-height:14px;
margin-right:5px;
margin-bottom:10px;
padding:3px 10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#d1d1d1;
background:-webkit-gradient(linear,left top,left bottom,from(#d1d1d1),to(#f1f1f1));
background:-moz-linear-gradient(top,#d1d1d1,#f1f1f1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1',endColorstr='#f1f1f1',GradientType=0);
border-top:1px solid #bcbcbc
}

#content .filter li a {
display:block;
color:#606060;
text-decoration:none;
width:100%;
height:100%
}

#content .filter li:first-child:hover {
background:none
}

#content .filter li.active,#content .filter li:hover {
background:#000;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);
box-shadow:0 1px 2px rgba(0,0,0,.5)
}

#content .filter li:hover a,#content .filter li.active a {
color:#f1f1f1
}

#content .filter li:first-child,#content .filter li:first-child:hover {
background:none;
border:none;
-webkit-box-shadow:0 0 0 rgba(0,0,0,.0);
-moz-box-shadow:0 0 0 rgba(0,0,0,.0);
box-shadow:0 0 0 rgba(0,0,0,.0)
}

#twitter {
position:relative;
background:#f2f1f1;
height:80px;
width:100%;
background:#f2f1f1 url(../img/twitter-border.png) repeat-x
}

#twitter #bird {
position:absolute;
top:2px;
left:70px
}

#twitter #prev-tweet {
display:block;
position:absolute;
top:21px;
left:30px;
width:30px;
height:35px;
background:transparent url(../img/prev-arrow.png) no-repeat top left
}

#twitter #next-tweet {
display:block;
position:absolute;
top:21px;
right:30px;
width:30px;
height:35px;
background:transparent url(../img/next-arrow.png) no-repeat top right
}

#twitter #tweets .tweet_list {
display:block;
position:absolute;
top:1px;
left:200px;
width:700px;
height:75px
}

#twitter #tweets .tweet_list li {
display:block;
width:700px;
height:80px;
font-size:16px;
line-height:1.5em;
font-style:italic;
color:#838383;
padding-top:25px
}

#twitter #tweets .tweet_list li .tweet_time a {
text-decoration:none;
color:#ccc
}

#twitter #tweets .tweet_list li a {
text-decoration:none;
color:#37b2d1
}

#twitter #tweets p.loading {
margin-left:200px;
color:#ccc;
padding-top:16px;
font-style:italic
}

#page-content {
float:left;
width:906px;
margin-left:30px;
line-height:1.5em
}

#projects-list {
overflow:hidden
}

#projects-list .project {
position:relative;
float:left;
width:438px;
margin-left:30px;
margin-bottom:30px;
padding-bottom:30px;
background:url(../img/portfolio-divider.png) no-repeat bottom center
}

#projects-list .project h1 a {
display:block;
text-decoration:none;
margin-bottom:20px;
color:#51565b
}

.project-shadow {
background:url(../img/shadow-project.png) no-repeat 0 267px
}

#projects-list .project .project-thumbnail {
position:relative;
overflow:hidden;
width:438px;
height:267px;
margin-bottom:20px;
background:#f1f1f1;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#projects-list .project .project-thumbnail .cover {
position:absolute;
top:0;
left:0
}

#projects-list .project .project-thumbnail .meta {
display:block;
width:252px;
height:207px;
font-size:12px;
line-height:2em;
position:absolute;
top:30px;
left:30px
}

#projects-list .project .read-more {
display:block;
position:absolute;
bottom:-17px;
left:160px
}

.project-column {
width:438px;
float:left;
margin-left:30px
}

.project-column .project-thumbnail {
overflow:hidden;
width:438px;
height:267px;
margin-bottom:30px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#content .project-column .meta a {
display:inline;
font-size:12px;
color:#fff;
padding:3px 10px;
text-decoration:none;
background:#363636;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#content .project-column .meta a:hover {
background:#000
}

.project-column .project-title {
margin-bottom:20px
}

.project-column .portfolio-left-shadow {
height:26px;
margin-bottom:20px;
background:url(../img/portfolio-left-shadow.png) no-repeat center bottom
}

.project-column .project-gallery {
display:block;
overflow:hidden;
width:468px
}

.project-column .project-gallery li {
display:block;
float:left;
overflow:hidden;
background:url(../img/plus-sign.png) center center no-repeat;
width:204px;
height:148px;
margin-right:30px;
margin-top:30px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

.related-title {
margin-left:30px
}

.related-projects {
display:block;
overflow:hidden
}

.related-projects li {
display:block;
float:left;
overflow:hidden;
width:204px;
height:280px;
margin-left:30px;
margin-top:30px
}

.related-projects li strong {
display:block
}

.related-projects li a.box {
display:block;
overflow:hidden;
width:204px;
height:148px;
margin-bottom:30px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

.related-projects li a.box img {
opacity:.7
}

.related-projects li:hover a.box img {
opacity:1
}

#content .related-projects li a {
text-decoration:none;
color:#999
}

#content .gallery {
display:block;
overflow:hidden
}

#content .gallery li {
display:block;
float:left;
overflow:hidden;
background:url(../img/plus-sign.png) center center no-repeat;
width:204px;
height:148px;
margin-left:30px;
margin-bottom:30px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#content .gallery.three-cols li {
width:282px;
height:267px
}

#content .gallery.two-cols li {
width:438px;
height:267px
}

#content .gallery li a {
display:block
}

#posts {
float:left;
width:624px
}

#posts .post {
position:relative;
margin-left:30px;
margin-bottom:40px
}

#postsdouble {
float:left;
width:800px;
margin-left:30px;
margin-bottom:40px
}

#postsdouble .post {
position:relative;
margin-left:30px;
margin-bottom:40px
}

#comments-block {
position:relative;
margin-left:30px;
margin-top:40px;
margin-bottom:30px;
padding-top:80px
}

#posts.single .post {
border-bottom:none
}

#posts .post:last-child {
border-bottom:none
}

#posts h1 a {
display:block;
margin-bottom:20px;
width:514px;
text-decoration:none;
color:#51565b
}

#posts .n-comments {
display:block;
position:absolute;
top:10px;
right:0;
width:57px;
height:41px;
font-size:14px;
color:#fff;
text-align:center;
line-height:34px;
background:url(../img/balloon.png) no-repeat
}

#posts.single .post .n-comments {
position:static
}

.post .thumb-shadow {
background:url(../img/shadow-blog.png) no-repeat 0 800px
}

#posts .post .post-thumbnail {
position:relative;
overflow:hidden;
width:596px;
height:270px;
margin-bottom:20px;
background:#f1f1f1;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#posts .post .post-thumbnail .cover {
position:absolute;
top:0;
left:0
}

#posts .post .the-excerpt {

padding-bottom:40px;
background:url(../img/post-divider.png) center bottom no-repeat
}

#posts .post .post-thumbnail .meta {
display:block;
width:252px;
height:207px;
font-size:12px;
line-height:2em;
position:absolute;
top:30px;
left:30px
}

#posts.single .post .meta {
display:block;
background:#f1f1f1;
padding:20px;
border-color:#e7e6e6 #ececec #ececec;
border-width:3px 1px 1px;
border-style:solid;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#posts .post .read-more {
display:block;
position:absolute;
bottom:-18px;
left:260px
}

#posts .post .meta a {
text-decoration:none
}

#posts .post .meta-tags {
overflow:hidden
}

#posts .post .meta-tags a {
float:left;
font-size:12px;
line-height:14px;
color:#f1f1f1;
background:#696969;
padding:3px 10px;
margin-right:5px;
margin-bottom:5px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#posts .post .meta-tags a:hover {
background:#000
}

#comments-block .n-comments {
left:0;
left:0
}

#comments-block .n-comments-text {
display:block;
position:absolute;
top:4px;
left:68px;
font-family:'Ubuntu',arial,serif;
font-size:28px
}

.commentlist {
display:block
}

.commentlist li {
display:block;
margin-bottom:0;
padding:10px 10px 10px 0;
line-height:1.5em
}

.commentlist ul {
padding-left:40px;
border-left:1px dashed #ccc
}

.commentlist li .comment-body {
overflow:hidden;
position:relative;
padding:0 0 20px
}

.commentlist li img {
display:block;
float:left;
margin:0 12px 20px 0
}

.commentlist .meta-date {
display:block;
float:right
}

#content .commentlist .reply a {
display:block;
text-decoration:none;
float:right;
padding:2px 8px;
background:#ccc;
color:#f1f1f1;
font-size:12px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
}

#content .comments-pagination {
clear:both;
overflow:hidden;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
margin-bottom:10px
}

#content .comments-pagination span,#content .comments-pagination a {
display:block;
float:left;
margin:2px 4px 2px 0;
padding:6px 9px 5px;
text-decoration:none;
width:auto;
color:#fff;
background:#555;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px
}

#content .comments-pagination a:hover {
color:#fff;
background:#000
}

#content .comments-pagination .current {
padding:6px 9px 5px;
background:#000;
color:#fff
}

.leave-comment {
margin-top:20px;
padding-top:30px;
background:url(../img/post-divider-inverted.png) no-repeat
}

.leave-comment h2 {
margin-bottom:20px
}

.one-column {
width:438px;
float:left;
margin-left:30px
}

#sc-contact-form,#contactForm,#commentform,#contactForm {
margin-bottom:18px
}

#sc-contact-form input,#sc-contact-form textarea,.admin-form input,.admin-form textarea,#contactForm input,#contactForm textarea,#commentform input,#commentform textarea {
padding:10px 15px;
background:#fff;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
}

#sc-contact-form input,.admin-form input,#contactForm input,#commentform input {
width:282px
}

#sc-contact-form textarea,.admin-form textarea,#contactForm textarea,#commentform textarea {
width:380px
}

#sc-contact-form #submit,.admin-form #submit,#contactForm #submit,#commentform input#submit {
width:76px;
margin:21px 0;
padding:5px 0;
color:#f1f1f1;
background:#515558;
background:-webkit-gradient(linear,left top,left bottom,from(#515558),to(#131313));
background:-moz-linear-gradient(top,#515558,#131313);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#515558',endColorstr='#131313',GradientType=0);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);
box-shadow:0 1px 2px rgba(0,0,0,.5);
border:1px solid transparent
}

#sc-contact-form #submit:hover,.admin-form #submit:hover,#contactForm #submit:hover,#commentform input#submit:hover {
background:#515558;
background:-webkit-gradient(linear,left top,left bottom,from(#131313),to(#515558));
background:-moz-linear-gradient(top,#131313,#515558);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313',endColorstr='#515558',GradientType=0)
}

#sc-contact-form input,#sc-contact-form textarea,.admin-form input,.admin-form textarea,#contactForm input,#contactForm textarea,#commentform input,#commentform textarea {
color:#606060;
font-size:14px
}

#sc-contact-form label,.admin-form label,#contactForm label,#commentform label {
display:block;
font-size:14px;
line-height:2.5em;
font-weight:light
}

.pager {
padding-top:0;
overflow:hidden;
display:block;
height:30px;
margin-top:20px;
margin-left:30px;
margin-bottom:20px;
font-size:10px
}

.pager li {
display:block;
width:26px;
height:26px;
margin-right:8px;
float:left
}

#content .pager li a {
display:block;
width:100%;
height:100%;
line-height:26px;
text-align:center;
text-decoration:none;
color:#606060;
border-radius:33px;
-moz-border-radius:33px;
-webkit-border-radius:33px;
background:#d1d1d1;
background:-webkit-gradient(linear,left top,left bottom,from(#d1d1d1),to(#f1f1f1));
background:-moz-linear-gradient(top,#d1d1d1,#f1f1f1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1',endColorstr='#f1f1f1',GradientType=0);
border-top:1px solid #bcbcbc
}

#content .pager li:hover a,#content .pager li.active a {
color:#fff;
background:#515558;
background:-webkit-gradient(linear,left top,left bottom,from(#515558),to(#131313));
background:-moz-linear-gradient(top,#515558,#131313);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#515558',endColorstr='#131313',GradientType=0);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);
box-shadow:0 1px 2px rgba(0,0,0,.5);
border-top:none
}

#sidebar {
float:left;
width:282px;
margin-left:30px
}

#sidebar>li {
margin-bottom:20px
}

#sidebar>li h6 {
padding-bottom:20px
}

#sidebar ul>li {
font-size:14px;
line-height:40px;
text-decoration:none;
border-bottom:1px solid #d7d7d7
}

#sidebar ul>li:last-child {
border-bottom:none
}

#sidebar ul>li a {
display:block;
height:100%;
width:100%;
text-decoration:none;
color:#696969
}

#sidebar ul>li:hover {
background:#f1f1f1
}

#footer {
position:relative;
background:#2a2d30 url(../img/footer-glow.png) no-repeat top center;
color:#fff
}

#footer-cols {
display:block;
overflow:hidden;
color:#bbbaba;
line-height:1.5em
}

#footer-cols li.col {
display:block;
font-size:12px;
width:282px;
float:left;
margin-left:30px;
margin-bottom:30px
}

#footer-cols li.col>h6 {
color:#d7d7d7;
margin-top:30px;
margin-bottom:20px;
text-shadow:0 -2px rgba(0,0,0,.8)
}

#footer-cols li.clear-col {
clear:left
}

#footer-cols li.col ul {
display:block
}

#footer-cols li.col ul li {
display:block;
line-height:1.7em
}

#footer-cols li.col ul li.page_item {
display:block;
line-height:2.5em;
padding-left:17px;
border-top:1px solid #4a4a4a;
border-bottom:1px solid #000;
background:url(../img/footer-bullet.png) no-repeat 0 10px
}

#footer-cols li.col ul li:first-child {
border-top:none
}

#footer-cols li.col ul li:last-child {
border-bottom:none
}

#footer-cols li.col ul li a {
text-decoration:none;
color:#bbbaba
}

#footer-cols li.col ul li a:hover {
color:#fff
}

#bottom {
position:relative;
width:100%;
font-size:12px;
line-height:1.5em;
line-height:60px;
color:#868686;
background:#222426 url(../img/bottom-shadow.png) repeat-x
}

#bottom #bottom-text {
width:600px;
overflow:hidden;
margin-left:30px
}

#bottom a {
color:#AFEAF9;
text-decoration:none
}

#bottom #to-top {
position:absolute;
right:30px;
top:-22px;
width:33px;
height:33px;
background:url(../img/to-top.png) no-repeat;
cursor:pointer
}

.social {
position:absolute;
top:15px;
right:0;
display:block;
overflow:hidden
}

.social li {
display:block;
width:32px;
height:32px;
float:left;
margin-right:10px;
margin-bottom:10px
}

#bottom .social a {
display:block;
width:32px;
height:32px;
text-indent:-9000px
}

#bottom .social a:hover {
background-position:0 -32px
}

.negrilla {
font-weight:700
}
/* --- Ajustes base para diseño responsive --- */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.container, .main, .wrapper, .content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    h1, h2, h3 {
        font-size: 110%;
    }

    .responsive-cols {
        display: block !important;
        width: 100% !important;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0;
    }

    nav ul li {
        width: 100%;
        text-align: center;
    }

    .logo, .menu, .top-bar, .footer {
        text-align: center;
    }

    .hide-mobile {
        display: none !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }
}

/* Botón flotante WhatsApp solo en móviles */
.whatsapp-float {
    display: none;
}
@media (max-width: 768px) {
    .whatsapp-float {
        display: block;
        position: fixed;
        bottom: 90px;
        right: 20px;
        z-index: 9999;
    }
    .whatsapp-float img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transition: transform 0.3s;
    }
    .whatsapp-float img:hover {
        transform: scale(1.1);
    }

    .call-bar-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #E1251B;
        color: white;
        z-index: 9998;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.3);
    }

    .call-bar-mobile a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
    }

    .call-bar-mobile a:hover {
        text-decoration: underline;
    }
}

/* --- Corrección de párrafos desbordados en móviles --- */
@media (max-width: 768px) {
    body, html {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    p, li, div, section, article {
        padding-left: 15px;
        padding-right: 15px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    ul {
        padding-left: 30px;
    }

    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
}



/* === Ajustes responsive para móviles === */
@media only screen and (max-width: 768px) {

  /* Asegurar que los contenedores se ajusten al ancho de pantalla */
  .container, .content, .main, .sidebar, .entry, .box {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  /* Imágenes fluidas */
  img, video {
    max-width: 100%;
    height: auto;
  }

  /* Asegurar que el contenido de columnas o bloques no desborde */
  .one-half, .one-third, .two-third, .three-fourth {
    width: 100% !important;
    float: none !important;
    margin: 0 0 1rem 0 !important;
  }

  /* Ajustes básicos de tipografía para legibilidad */
  body {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Evitar superposición de botones o WhatsApp flotante */
  .whatsapp-float {
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
  }
}



@media only screen and (max-width: 768px) {
  #page-title span {
    font-size: 6vw !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
  }
}



@media only screen and (max-width: 768px) {
  #page-title span {
    font-size: 120% !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
    display: block !important;
  }

  #page-title .subtitle {
    font-size: 100% !important;
  }
}