/* ========================================
   MAIN CSS — Sites6 Elegancia Premium
   Below-the-fold. Escrito desde cero.
   ======================================== */

/* --- Sections --- */
.section--alt{background:var(--c-bg-alt)}
.section__title{font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:.75rem;color:var(--c-primary)}
.section__text{font-size:1.0625rem;color:var(--c-text-muted);max-width:760px;margin:0 auto 2.5rem;line-height:1.7}

/* --- Steps / How It Works --- */
.steps__grid{display:grid;gap:1.5rem;margin-top:2rem}
.step-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:2rem 1.75rem;text-align:center;transition:transform .2s ease,box-shadow .2s ease}
.step-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.step-card__number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--c-primary);color:#fff;font-weight:800;font-size:1.25rem;margin-bottom:1.25rem}
.step-card h3{font-size:1.125rem;margin-bottom:.5rem;color:var(--c-primary)}
.step-card p{font-size:.9375rem;color:var(--c-text-muted);line-height:1.6}
@media(min-width:768px){.steps__grid{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media(min-width:1024px){.steps__grid{grid-template-columns:repeat(4,1fr)}}

/* --- Metrics --- */
.metrics__grid{display:grid;gap:1.5rem;text-align:center}
.metric{padding:2rem 1.5rem;background:var(--c-bg);border-radius:.5rem;border:1px solid var(--c-border)}
.metric__number{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3rem);font-weight:var(--heading-weight);color:var(--c-primary);line-height:1}
.metric__label{font-size:.9375rem;color:var(--c-text-muted);margin-top:.5rem}
@media(min-width:768px){.metrics__grid{grid-template-columns:repeat(3,1fr);gap:2rem}}

/* --- Service Cards --- */
.services__grid{display:grid;gap:1.5rem}
.service-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:2rem;transition:transform .2s ease,box-shadow .2s ease}
.service-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.service-card__icon{width:48px;height:48px;margin-bottom:1.25rem;color:var(--c-secondary)}
.service-card h3{font-size:1.125rem;margin-bottom:.75rem;color:var(--c-primary)}
.service-card p{font-size:.9375rem;color:var(--c-text-muted);line-height:1.6;margin-bottom:1rem}
.service-card a{color:var(--c-secondary);font-weight:600;font-size:.9375rem;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.service-card a:hover{border-bottom-color:var(--c-secondary)}
@media(min-width:768px){.services__grid{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media(min-width:1024px){.services__grid{grid-template-columns:repeat(3,1fr)}}

/* --- Benefits --- */
.benefits{display:grid;gap:2rem;align-items:center}
.benefits__image{border-radius:.5rem;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,.08)}
.benefits__list{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:2rem}
.benefits__list ul{display:flex;flex-direction:column;gap:.875rem}
.benefits__list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.6}
.benefits__list li::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:50%;background:var(--c-secondary);color:#fff;font-weight:700;font-size:.75rem;margin-top:2px}
@media(min-width:768px){.benefits{grid-template-columns:1fr 1fr}}

/* --- FAQ --- */
.faq__list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.5rem}
.faq-item{border:1px solid var(--c-border);border-radius:.375rem;overflow:hidden;transition:border-color .2s ease}
.faq-item:hover{border-color:var(--c-secondary)}
.faq-item summary{padding:1.125rem 1.25rem;font-weight:600;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;transition:background .2s ease;color:var(--c-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\FF0B";font-size:1.25rem;color:var(--c-secondary);transition:transform .3s ease}
.faq-item[open] summary::after{content:"\FF0D"}
.faq-item[open] summary{background:var(--c-bg-alt)}
.faq-item .faq-answer{padding:0 1.25rem 1.25rem;font-size:.9375rem;line-height:1.7;color:var(--c-text-muted)}
.faq-item .faq-answer a{color:var(--c-secondary);text-decoration:underline;text-underline-offset:2px}

/* --- Cases --- */
.cases-list{display:flex;flex-direction:column;gap:.625rem}
.cases-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.55}
.cases-list li::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:var(--c-secondary);color:#fff;font-weight:700;font-size:.7rem}
.cases-faq__grid{display:grid;gap:2rem}
.panel{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:2rem}
.panel--accent{background:var(--c-bg-alt)}
.panel h2{font-size:clamp(1.25rem,2.5vw,1.5rem);margin-bottom:1.25rem}
@media(min-width:768px){.cases-faq__grid{grid-template-columns:1fr 1fr}}

/* --- Contact Form --- */
.form-section{background:var(--c-bg-alt)}
.form-grid{display:grid;gap:2rem;align-items:start}
.form-grid__info h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1rem;color:var(--c-primary)}
.form-grid__info p{color:var(--c-text-muted);margin-bottom:1.5rem;line-height:1.7}
.form-grid__info ul{display:flex;flex-direction:column;gap:.75rem}
.form-grid__info li a{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--c-text);transition:color .2s ease}
.form-grid__info li a:hover{color:var(--c-secondary)}
@media(min-width:768px){.form-grid{grid-template-columns:1fr 1fr;gap:3rem}}

.form{display:flex;flex-direction:column;gap:1rem}
.form__group{display:flex;flex-direction:column;gap:.375rem}
.form__label{font-size:.875rem;font-weight:600;color:var(--c-text)}
.form__input,.form__textarea{width:100%;padding:.875rem 1rem;border:1.5px solid var(--c-border);border-radius:.375rem;font-size:.9375rem;background:var(--c-bg);transition:border-color .2s ease,box-shadow .2s ease}
.form__input:focus,.form__textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(27,58,92,.08)}
.form__textarea{min-height:120px;resize:vertical}
.form__checkbox{display:flex;align-items:flex-start;gap:.625rem;font-size:.8125rem;color:var(--c-text-muted);line-height:1.4}
.form__checkbox input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--c-primary);flex-shrink:0}
.form__checkbox a{color:var(--c-secondary);text-decoration:underline;text-underline-offset:2px}
.form__error{color:#c53030;font-size:.8125rem;display:none}
.form__success{padding:1rem;background:#f0faf0;color:#1a6b3c;border:1px solid #c6e6c6;border-radius:.375rem;text-align:center;display:none}
.form__success.show,.form__error.show{display:block}

/* --- Calculator --- */
.calculator-section .container{max-width:960px}
.calculator-iframe-wrap{border-radius:.5rem;overflow:hidden;border:1px solid var(--c-border);background:var(--c-bg)}
.calculator-iframe-wrap iframe{width:100%;min-height:600px;border:none;display:block}

/* --- Reviews --- */
.reviews-section .container{max-width:960px}
.reviews-placeholder{text-align:center;padding:2rem;color:var(--c-text-muted);font-size:.9375rem}

/* --- CTA --- */
.cta-section{background:var(--c-primary);color:#fff;text-align:center}
.cta-section h2{color:#fff;font-size:clamp(1.5rem,3.5vw,2.25rem);margin-bottom:.75rem}
.cta-section p{color:rgba(255,255,255,.85);margin-bottom:1.75rem;font-size:1.0625rem}
.cta-section .btn--primary{background:var(--c-secondary);color:#fff;border-color:var(--c-secondary)}
.cta-section .btn--primary:hover{background:#fff;color:var(--c-primary);border-color:#fff}

/* --- Google Maps --- */
.map-section{padding:0}
.map-container{position:relative;width:100%;padding-top:56.25%;background:var(--c-bg-alt);border-radius:.5rem;overflow:hidden}
.map-container iframe,.map-container img{position:absolute;top:0;left:0;width:100%;height:100%;border:none;object-fit:cover}
.map-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--c-bg-alt)}
.map-placeholder span{padding:.75rem 1.5rem;background:var(--c-primary);color:#fff;border-radius:.375rem;font-weight:600}

/* --- Testimonials --- */
.testimonials__grid{display:grid;gap:1.5rem}
.testimonial-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:2rem;text-align:center}
.testimonial-card .stars{color:#d4a017;font-size:1.25rem;margin-bottom:.75rem;letter-spacing:3px}
.testimonial-card blockquote{font-size:.9375rem;color:var(--c-text-muted);line-height:1.65;font-style:italic;margin-bottom:.75rem}
.testimonial-card .author{font-weight:700;font-size:.875rem;color:var(--c-text)}
@media(min-width:768px){.testimonials__grid{grid-template-columns:repeat(3,1fr)}}

/* --- Footer --- */
.footer{background:var(--c-primary);color:#fff;padding:3.5rem 0 1.5rem}
.footer__grid{display:grid;gap:2rem;margin-bottom:2rem}
.footer__heading{font-size:.875rem;font-weight:700;margin-bottom:.75rem;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.footer__col p,.footer__col li,.footer__col a{font-size:.875rem;color:rgba(255,255,255,.75);line-height:1.65}
.footer__col a:hover{color:#fff}
.footer__col ul{display:flex;flex-direction:column;gap:.375rem}
.footer__logo img{height:42px;width:auto;margin-bottom:1rem}
.footer__social{display:flex;gap:.75rem;margin-bottom:1rem}
.footer__social a{color:rgba(255,255,255,.7);transition:color .2s ease}
.footer__social a:hover{color:#fff}
.footer__copyright{font-size:.8125rem;color:rgba(255,255,255,.5)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;text-align:center;font-size:.8125rem;color:rgba(255,255,255,.5)}
@media(min-width:768px){.footer__grid{grid-template-columns:repeat(4,1fr)}}

/* --- WhatsApp Float --- */
.whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,211,102,.3);z-index:9990;transition:transform .2s ease}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float svg{width:28px;height:28px;fill:#fff}

/* --- Cookie Banner --- */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:rgba(26,26,26,.95);color:#fff;padding:1rem;z-index:9999;transform:translateY(100%);transition:transform .4s ease}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner__content{max-width:1140px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}
.cookie-banner__content p{font-size:.8125rem;line-height:1.5}
.cookie-banner__content a{color:var(--c-secondary);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.5rem}
@media(min-width:768px){.cookie-banner__content{flex-direction:row;text-align:left;gap:1.5rem}}

/* --- Blog / Articles --- */
.articles__grid{display:grid;gap:1.5rem}
.article-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.article-card img{width:100%;height:200px;object-fit:cover}
.article-card__body{padding:1.5rem}
.article-card h3{font-size:1.125rem;margin-bottom:.5rem}
.article-card h3 a{color:var(--c-primary);transition:color .2s ease}
.article-card h3 a:hover{color:var(--c-secondary)}
.article-card time{font-size:.8125rem;color:var(--c-text-muted)}
.article-card p{font-size:.9375rem;color:var(--c-text-muted);margin-top:.5rem;line-height:1.6}
@media(min-width:768px){.articles__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.articles__grid{grid-template-columns:repeat(3,1fr)}}

/* --- Article single --- */
.article-single{max-width:700px;margin:0 auto}
.article-single h1{margin-bottom:1rem}
.article-single time{display:block;font-size:.875rem;color:var(--c-text-muted);margin-bottom:2rem}
.article-single .article-body{font-size:1.0625rem;line-height:1.8;color:var(--c-text)}
.article-single .article-body h2{font-size:1.5rem;margin:2.5rem 0 1rem;color:var(--c-primary)}
.article-single .article-body h3{font-size:1.25rem;margin:2rem 0 .75rem;color:var(--c-primary)}
.article-single .article-body p{margin-bottom:1.25rem}
.article-single .article-body ul,.article-single .article-body ol{margin:1rem 0 1.25rem 1.5rem;list-style:disc}
.article-single .article-body ol{list-style:decimal}
.article-single .article-body li{margin-bottom:.5rem}
.article-single .article-body a{color:var(--c-secondary);text-decoration:underline;text-underline-offset:2px}
.article-single .article-body img{border-radius:.375rem;margin:1.5rem 0}

.article-intro{font-size:1.125rem;line-height:1.7;color:var(--c-text-muted);border-left:3px solid var(--c-secondary);padding-left:1.25rem;margin-bottom:1.5rem}
.article-video{background:var(--c-bg-alt);border-radius:.5rem;overflow:hidden;margin:2rem 0}
.article-video__embed{position:relative;padding-bottom:56.25%;height:0}
.article-video__embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.article-video__text{padding:1.25rem}
.article-video__text h3,.article-video__text h4{font-size:1.1rem;margin-bottom:.5rem}
.article-video__text p{font-size:.9375rem;color:var(--c-text-muted);margin-bottom:.75rem}
.article-callout{background:var(--c-bg-alt);border-left:3px solid var(--c-secondary);border-radius:0 .375rem .375rem 0;padding:1.25rem 1.5rem;margin:1.5rem 0}
.article-callout h3{font-size:1rem;color:var(--c-secondary);margin-bottom:.5rem}
.article-callout p{margin-bottom:0}
.article-faq{margin:1.5rem 0}
.article-faq details{border:1px solid var(--c-border);border-radius:.375rem;margin-bottom:.75rem;overflow:hidden}
.article-faq summary{padding:1rem 1.25rem;cursor:pointer;font-size:1rem;font-weight:600;list-style:none;background:var(--c-bg-alt);color:var(--c-text)}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::before{content:'+';font-weight:700;margin-right:.75rem;color:var(--c-secondary)}
.article-faq details[open] summary::before{content:'\2212'}
.article-faq details div{padding:1rem 1.25rem}
.blog-clear{clear:both}
.article-card__body .btn{margin-top:.75rem}

/* --- Guide blocks --- */
.guide-block{margin-bottom:2rem}
.guide-block h3{font-size:1.125rem;margin-bottom:.75rem;color:var(--c-primary)}

/* --- Steps 3-col --- */
.steps__grid--3col{max-width:900px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.steps__grid--3col{grid-template-columns:repeat(3,1fr)!important}}

/* --- About --- */
.about-hero{background:var(--c-primary);color:#fff;padding:4rem 0 5rem;text-align:center}
.about-hero__title{font-size:clamp(1.75rem,4.5vw,2.75rem);color:#fff;margin-bottom:1rem;line-height:1.15;max-width:800px;margin-left:auto;margin-right:auto}
.about-hero__title .text-secondary{color:var(--c-secondary)}
.about-hero__text{font-size:1.0625rem;color:rgba(255,255,255,.85);max-width:700px;margin:0 auto 1.5rem;line-height:1.7}
.about-hero__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:1.5rem}
.about-hero__badge{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:2rem;font-size:.8125rem;font-weight:600;color:#fff}
.about-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.btn--whatsapp{background:#25d366;color:#fff;border-color:#25d366}
.btn--whatsapp:hover{opacity:.9;transform:translateY(-1px)}

.about-founder{display:grid;gap:2.5rem;align-items:start}
.about-founder__photo{text-align:center}
.about-founder__photo img{width:200px;height:200px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:3px solid var(--c-border)}
.about-founder__name{font-size:1.5rem;font-weight:800;margin-bottom:.25rem;color:var(--c-primary)}
.about-founder__role{font-size:.9375rem;color:var(--c-secondary);font-weight:600;margin-bottom:1rem}
.about-founder__bio{font-size:.9375rem;color:var(--c-text-muted);line-height:1.7;max-width:400px;margin:0 auto}
.about-founder__process h2{font-size:clamp(1.25rem,3vw,1.75rem);margin-bottom:1.25rem}
.about-process-list{display:flex;flex-direction:column;gap:1rem}
.about-process-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.6}
.about-process-list__icon{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:var(--c-secondary);color:#fff;font-weight:700;font-size:.75rem;margin-top:2px}
@media(min-width:768px){.about-founder{grid-template-columns:1fr 1fr;gap:3rem}}

.about-team__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.about-team__grid--lawyers{max-width:900px;margin-left:auto;margin-right:auto}
.about-team__grid--support{max-width:600px;margin-left:auto;margin-right:auto}
.about-team__card{text-align:center;background:var(--c-bg);border:1px solid var(--c-border);border-radius:.5rem;padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}
.about-team__card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.about-team__card img{width:140px;height:140px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;border:3px solid var(--c-border)}
.about-team__card h3{font-size:1.0625rem;margin-bottom:.25rem;color:var(--c-primary)}
.about-team__role{font-size:.8125rem;color:var(--c-secondary);font-weight:600;margin-bottom:.75rem}
.about-team__desc{font-size:.8125rem;color:var(--c-text-muted);line-height:1.55}
@media(min-width:768px){.about-team__grid--lawyers{grid-template-columns:repeat(3,1fr);gap:2rem}.about-team__grid--support{grid-template-columns:repeat(2,1fr);gap:2rem}}

.about-results{background:var(--c-primary);color:#fff;padding:3.5rem 0;text-align:center}
.about-results__title{font-size:clamp(1.25rem,3vw,1.75rem);color:#fff;margin-bottom:2rem}
.about-results__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:700px;margin:0 auto}
.about-results__number{display:block;font-family:var(--font-heading);font-size:clamp(2rem,5vw,3rem);font-weight:var(--heading-weight);color:#fff;line-height:1}
.about-results__label{display:block;font-size:.875rem;color:rgba(255,255,255,.75);margin-top:.5rem}
@media(max-width:480px){.about-results__grid{grid-template-columns:1fr}}

/* --- 404 --- */
.error-page{text-align:center;padding:5rem 0}
.error-page h1{font-size:clamp(3rem,8vw,6rem);color:var(--c-primary);margin-bottom:.5rem}
.error-page p{font-size:1.125rem;color:var(--c-text-muted);margin-bottom:2rem}

/* --- Gracias --- */
.thanks-page{text-align:center;padding:5rem 0}
.thanks-page h1{color:var(--c-primary);margin-bottom:1rem}
.thanks-page p{font-size:1.125rem;color:var(--c-text-muted);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}

/* --- Animations --- */
.animate-on-scroll{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}

/* --- Print --- */
@media print{.header,.footer,.whatsapp-float,.cookie-banner,.calculator-iframe-wrap{display:none!important}body{color:#000;background:#fff}a{color:#000;text-decoration:underline}}

/* --- Legal pages --- */
.legal-content{max-width:760px;margin:0 auto;font-size:.9375rem;line-height:1.8}
.legal-content h2{font-size:1.375rem;margin:2rem 0 1rem;color:var(--c-primary)}
.legal-content p{margin-bottom:1rem}
.legal-content ul{margin:1rem 0 1rem 1.5rem;list-style:disc}
.legal-content li{margin-bottom:.5rem}
.legal-content a{color:var(--c-secondary);text-decoration:underline;text-underline-offset:2px}

/* FIX QA: logo del footer legible sobre fondo oscuro (vuelos era navy/navy) */
.footer__logo img{filter:brightness(0) invert(1);opacity:.95}

/* FIX QA articulos: columna mas comoda + bold legible */
.article-single .article-body strong{color:var(--c-primary)}
.article-single .article-body h2{border-bottom:2px solid var(--c-border);padding-bottom:.35rem}

/* FIX QA: Indice de contenido del articulo (como el WP) */
.article-toc{background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:.5rem;padding:1rem 1.25rem;margin:0 0 2rem}
.article-toc summary{font-weight:700;color:var(--c-primary);cursor:pointer;font-size:1.05rem;list-style-position:inside}
.article-toc ol{margin:.75rem 0 0;padding-left:1.25rem}
.article-toc li{margin:.35rem 0}
.article-toc li.toc-h3{margin-left:1rem;font-size:.95rem;list-style:circle}
.article-toc a{color:var(--c-text);text-decoration:none}
.article-toc a:hover{color:var(--c-secondary);text-decoration:underline}
.article-single .article-body h2,.article-single .article-body h3{scroll-margin-top:90px}

/* FIX QA: cajas del articulo (intro / sabias que / cta / video) como el WP */
.article-body .blog-intro-box{background:var(--c-bg-alt);border-left:4px solid var(--c-secondary);border-radius:.4rem;padding:1.1rem 1.3rem;margin:1.5rem 0}
.article-body .blog-did-you-know{background:#eef4fb;border:1px solid var(--c-border);border-radius:.6rem;padding:1.2rem 1.4rem;margin:2rem 0}
.article-body .blog-did-you-know-title{font-weight:700;color:var(--c-primary);font-size:1.1rem;margin:0 0 .6rem}
.article-body .blog-cta-container,.article-body .blog-video-container{display:flex;gap:1.5rem;align-items:center;background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:.7rem;padding:1.3rem 1.5rem;margin:2rem 0;flex-wrap:wrap}
.article-body .blog-cta-text-wrapper,.article-body .blog-video-text-wrapper{flex:1 1 280px}
.article-body .blog-cta-title,.article-body .blog-video-title{font-weight:700;color:var(--c-primary);font-size:1.18rem;margin:0 0 .5rem}
.article-body .blog-video-embed-wrapper{flex:1 1 260px;max-width:320px}
.article-body .blog-video-embed-wrapper iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:.5rem}
.article-body .blog-video-embed-wrapper.vertical iframe{aspect-ratio:9/16;max-height:480px}

.article-body .imagen-responsive-flotante{max-width:min(300px,100%);border-radius:.5rem;margin:.3rem 0 1rem 1.5rem;float:right}
@media(max-width:640px){.article-body .imagen-responsive-flotante{float:none;margin:1rem auto;display:block}.article-body .blog-video-embed-wrapper{max-width:100%}}

/* FIX QA: facade de video YouTube (miniatura + play, carga al clic) */
.article-body .yt-facade{position:relative;display:block;width:100%;aspect-ratio:9/16;max-height:480px;border:0;border-radius:.5rem;background-size:cover;background-position:center;background-color:#000;cursor:pointer;padding:0;overflow:hidden}
.article-body .blog-video-embed-wrapper:not(.vertical) .yt-facade{aspect-ratio:16/9}
.article-body .yt-facade .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;background:rgba(0,0,0,.7);border-radius:.7rem;transition:background .2s}
.article-body .yt-facade .yt-play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.article-body .yt-facade:hover .yt-play{background:#f00}
.article-body .blog-video-embed-wrapper iframe{width:100%;aspect-ratio:9/16;height:auto;border:0;border-radius:.5rem}
/* FIX QA: boton WhatsApp/CTA del articulo - texto blanco legible (gana a .article-body a) */
.article-single .article-body .blog-video-whatsapp-button,.article-single .article-body .blog-cta-form-wrapper a{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#25d366;color:#fff;text-decoration:none;padding:.72rem 1.5rem;border-radius:.55rem;font-weight:700;font-size:.95rem;letter-spacing:.01em;box-shadow:0 3px 8px rgba(37,211,102,.35);transition:background .2s,transform .15s,box-shadow .2s;margin-top:.7rem}
.article-single .article-body .blog-video-whatsapp-button:hover,.article-single .article-body .blog-cta-form-wrapper a:hover{background:#1ebe5d;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 5px 14px rgba(37,211,102,.45)}
.article-single .article-body .blog-video-whatsapp-button::before{content:"";display:inline-block;width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.4-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.21 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.41-.07-.12-.27-.2-.57-.35z M12 0C5.37 0 0 5.37 0 12c0 2.62.85 5.06 2.28 7.03L.79 23.49l4.63-1.47A11.94 11.94 0 0012 24c6.63 0 12-5.37 12-12S18.63 0 12 0z%27/%3E%3C/svg%3E")}

/* FIX QA: articulos relacionados (interlinking interno del cluster) */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.related-card{display:block;text-decoration:none;border:1px solid var(--c-border);border-radius:.5rem;overflow:hidden;transition:transform .2s,box-shadow .2s;background:#fff}
.related-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.related-card img{width:100%;height:150px;object-fit:cover;display:block}
.related-card__title{display:block;padding:.8rem 1rem;font-weight:700;color:var(--c-primary);font-size:.98rem;line-height:1.3}

.form__opt{color:var(--c-text-muted);font-weight:400;font-size:.85em}
.services-hero__media{max-width:560px;margin:2rem auto 0;border-radius:.625rem;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.08)}
.services-hero__media img{width:100%;height:auto;display:block;border-radius:.625rem}

/* s12 (19-jul-2026) — Desborde horizontal en movil del contenido del articulo.
   Una tabla ancha empujaba TODA la pagina y provocaba scroll lateral (medido con navegador
   real: 146 px de desborde a 390 px de ancho). En contenido publico eso lo marca Google como
   problema de usabilidad movil. display:block hace que la tabla se ajuste al contenedor y sea
   ELLA la que scrollea, en vez de desbordar el documento. Mismo criterio para los bloques de
   codigo. Afecta a 8 articulos con <table> en el parque. */
.article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body pre{max-width:100%;overflow-x:auto}
/* s16-chat19 faq-acc */.faq-acc{margin:1.5rem 0}.faq-acc details{border:1px solid var(--c-border);border-radius:.375rem;margin-bottom:.75rem;overflow:hidden}.faq-acc summary{padding:1rem 1.25rem;cursor:pointer;font-size:1rem;font-weight:600;list-style:none;background:var(--c-bg-alt);color:var(--c-text)}.faq-acc summary::-webkit-details-marker{display:none}.faq-acc summary::before{content:'+';font-weight:700;margin-right:.75rem;color:var(--c-secondary)}.faq-acc details[open] summary::before{content:'\2212'}.faq-acc details>div{padding:1rem 1.25rem}

/* ============================================================================
   BLOQUE DE CAPTACIÓN — «caso real + short vertical + formulario»
   s17 03-ago-2026 · REMAQUETADO por s51 el 09-sep-2026
   ----------------------------------------------------------------------------
   MAQUETA QUE PIDIÓ FERNANDO el 09-sep-2026 mirando la vista previa:

       ┌───────────────┬──────────────────────────┐
       │  short 9:16   │  caso real + importe     │  ← fila 1: DOS columnas
       ├───────────────┴──────────────────────────┤
       │  formulario, a todo lo ancho             │  ← fila 2: UNA sola
       └──────────────────────────────────────────┘

   🧨 POR QUÉ ESTO ES `grid` Y YA NO ES `flex`. No es una preferencia de estilo:
   la maqueta de flex se partía POR SEIS PÍXELES y no lo veía venir nadie.
   En pantalla ancha las bases eran 280px de vídeo + 36px de hueco + 320px de
   texto = 636px. Y el ancho útil de verdad es 700px (`.article-single`) MENOS
   6px de borde (5 a la izquierda + 1 a la derecha) MENOS 64px de padding =
   630px. Seis píxeles de menos ⇒ `flex-wrap` empuja el texto a una segunda
   línea y el bloque sale con el vídeo arriba a la izquierda, MEDIO BLOQUE
   VACÍO a su derecha y el texto debajo a todo lo ancho. Eso es exactamente lo
   que Fernando fotografió. Con `grid` no existe «se parte o no se parte»: las
   dos columnas están declaradas y no dependen de que las cuentas salgan.
   Y `minmax(0,…)` en las dos evita el clásico de al lado: un hijo ancho (el
   iframe, una tabla) empujando su columna por encima de la fracción que le toca.

   🧨 SIRVE PARA LOS DOS MARCADOS, y esto es a propósito. En los artículos
   viejos el `__form` cuelga DENTRO de `__text`, así que NO es hijo del grid:
   no crea la fila 2 y el bloque se pinta a dos columnas, que es como estaba
   pensado desde s17. En el marcado nuevo el `__form` es HERMANO y ocupa la
   fila 2 entera. Los dos quedan bien: migrar los viejos no corre prisa y no
   hay ninguna ventana en la que se vean rotos.

   El resto de decisiones de s17 siguen valiendo y por los mismos motivos:
   · Va en OSCURO (--c-primary) mientras las demás cajas del artículo van en
     gris claro. El contraste es lo que para el ojo; del mismo color sería una
     caja más y no la vería nadie.
   · El vídeo va en 9:16 REAL: los shorts son todos verticales y el bloque
     `.article-video__embed` de la casa es 16:9 y los deforma.
   · El importe va en el acento naranja y en su propia línea: es el dato que
     convierte.
   · Móvil: primero el short, después el texto y al final el formulario.
   ========================================================================= */

.article-body .blog-conversion{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:1.4rem 1.75rem;
  align-items:stretch;
  background:linear-gradient(135deg,var(--c-primary) 0%,#1b2230 100%);
  border:1px solid rgba(255,255,255,.08);
  border-left:5px solid var(--c-secondary);
  border-radius:.9rem;padding:1.6rem 1.75rem;margin:2.5rem 0;
  box-shadow:0 10px 30px rgba(37,45,58,.18);
  color:#fff;
}

/* --- columna 1: el short vertical --- */
/* 🧨 `width:100%` sigue siendo OBLIGATORIO. Sin él, en móvil el ancho colapsa
   a 0 y, como el alto sale de `padding-bottom:177.78%` del ANCHO, el vídeo
   desaparece entero. Se cazó en una captura de móvil antes de publicar. */
.article-body .blog-conversion__video{
  grid-column:1;grid-row:1;width:100%;max-width:260px;margin:0;align-self:start;
}
.article-body .blog-conversion__embed{
  position:relative;padding-bottom:177.78%;   /* 9:16 — vertical de verdad */
  height:0;border-radius:.7rem;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.article-body .blog-conversion__embed iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}

/* --- columna 2: el caso real --- */
.article-body .blog-conversion__text{
  grid-column:2;grid-row:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
.article-body .blog-conversion__etiqueta{
  display:inline-block;align-self:flex-start;
  background:var(--c-secondary);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:.35rem;margin-bottom:.85rem;
}
.article-body .blog-conversion__titular{
  color:#fff;font-size:1.28rem;line-height:1.32;margin:0 0 .35rem;font-weight:800;
}
.article-body .blog-conversion__importe{
  display:block;color:var(--c-secondary);font-size:2rem;line-height:1.1;font-weight:900;margin:.15rem 0 .5rem;
}
.article-body .blog-conversion__desc{
  color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.6;margin:0 0 1rem;
}
.article-body .blog-conversion__nota{
  color:rgba(255,255,255,.55);font-size:.78rem;line-height:1.45;margin:.9rem 0 0;
}

/* --- fila 2: el formulario, a todo lo ancho --- */
.article-body .blog-conversion__form{grid-column:1 / -1;grid-row:2;min-width:0}

/* --- botón del bloque de CIERRE (el que NO lleva formulario) ---
   🧨 Va con su propia clase y no como un <a> suelto: en `.article-body` hay una
   regla que convierte CUALQUIER enlace suelto de un CTA en el botón verde de
   WhatsApp, y ya tapó el enlace de la política de privacidad una vez. */
.article-body .blog-conversion__cta{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  background:var(--c-secondary);color:#fff;text-decoration:none;
  padding:.78rem 1.4rem;border-radius:.5rem;margin-top:.35rem;
  font-weight:800;font-size:.98rem;line-height:1.2;
  box-shadow:0 4px 12px rgba(236,105,7,.4);
  transition:background .2s,transform .15s,box-shadow .2s;
}
.article-body .blog-conversion__cta:hover{
  background:#d25c05;color:#fff;text-decoration:none;
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(236,105,7,.5);
}

/* --- el formulario, legible sobre fondo oscuro --- */
.article-body .blog-conversion__form input[type=text],
.article-body .blog-conversion__form input[type=email],
.article-body .blog-conversion__form input[type=tel],
.article-body .blog-conversion__form textarea,
.article-body .blog-conversion__form select{
  width:100%;background:rgba(255,255,255,.96);color:var(--c-text);
  border:1px solid rgba(255,255,255,.25);border-radius:.45rem;
  padding:.62rem .8rem;margin-bottom:.55rem;font-size:.95rem;
}
.article-body .blog-conversion__form input::placeholder,
.article-body .blog-conversion__form textarea::placeholder{color:#6b7280}
.article-body .blog-conversion__form label{color:rgba(255,255,255,.9);font-size:.88rem}
.article-body .blog-conversion__form input[type=submit],
.article-body .blog-conversion__form button[type=submit]{
  width:100%;background:var(--c-secondary);color:#fff;border:0;
  padding:.8rem 1.4rem;border-radius:.5rem;font-weight:800;font-size:1rem;cursor:pointer;
  box-shadow:0 4px 12px rgba(236,105,7,.4);transition:background .2s,transform .15s,box-shadow .2s;
}
.article-body .blog-conversion__form input[type=submit]:hover,
.article-body .blog-conversion__form button[type=submit]:hover{
  background:#d25c05;transform:translateY(-1px);box-shadow:0 6px 18px rgba(236,105,7,.5);
}

/* --- móvil: una sola columna, el short primero y el formulario al final --- */
/* 🧨 Hay que devolver `grid-row` a `auto` en los tres. Si se queda la fila
   explícita de escritorio, el texto y el vídeo pelean por la fila 1 y se
   superponen: un fallo que en escritorio no se ve. */
@media(max-width:767px){
  .article-body .blog-conversion{
    grid-template-columns:minmax(0,1fr);padding:1.25rem 1.1rem;gap:1.1rem;
  }
  .article-body .blog-conversion__video{grid-column:1;grid-row:auto;max-width:220px;margin:0 auto}
  .article-body .blog-conversion__text{grid-column:1;grid-row:auto}
  .article-body .blog-conversion__form{grid-column:1;grid-row:auto}
  .article-body .blog-conversion__titular{font-size:1.15rem}
  .article-body .blog-conversion__importe{font-size:1.75rem}
}

/* --- escritorio ancho: mismo reparto, con más aire --- */
@media(min-width:992px){
  .article-body .blog-conversion{
    grid-template-columns:minmax(0,280px) minmax(0,1fr);
    padding:1.9rem 2rem;gap:1.5rem 2rem;
  }
  .article-body .blog-conversion__video{max-width:280px}
}

/* s24 (17-ago-2026) - La imagen destacada del articulo no tenia ninguna regla propia: salia
   pegada al bloque del indice y con las esquinas en pico. Las del cuerpo si la tenian, pero la
   portada vive fuera de .article-body y no heredaba nada. Los 2rem de margen inferior son los
   mismos que ya usa .article-toc, asi que el ritmo vertical no se inventa. Aprobado por Fernando
   el 17-ago-2026 tras verlo en reclamarvuelo.es. */
.article-single__image{display:block;width:100%;height:auto;border-radius:.75rem;margin:0 0 2rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* =====================================================================
   s34 (25-ago-2026) · Arreglos de lo que se veia roto en los articulos.
   Se anaden AL FINAL a proposito: asi ganan por cascada sin reescribir
   ninguna regla existente, y borrar este bloque revierte el cambio entero.
   ===================================================================== */

/* 1 · TABLAS. Antes solo tenian `display:block; overflow-x:auto`: ni un
   borde, ni cabecera, ni padding, y ademas el `display:block` impide que la
   tabla ocupe el ancho disponible -> una comparativa de 4 columnas se veia
   amontonada, partida en vertical y con la ultima columna CORTADA (medido:
   400 px de ancho por 1104 de alto). En escritorio vuelve a ser una tabla de
   verdad al 100 %; el scroll horizontal se reserva para movil, que es donde
   hace falta de verdad. */
.article-body table{
  display:table; width:100%; table-layout:auto;
  border-collapse:collapse; margin:1.75rem 0; font-size:.93rem; line-height:1.45;
  background:var(--c-bg); border:1px solid var(--c-border);
}
.article-body table th,
.article-body table td{
  border:1px solid var(--c-border); padding:.62rem .85rem;
  text-align:left; vertical-align:top;
}
.article-body table th{
  background:var(--c-bg-alt); color:var(--c-primary); font-weight:700;
}
.article-body table tbody tr:nth-child(even) td{background:rgba(0,0,0,.025)}
.article-body table caption{
  caption-side:top; text-align:left; font-weight:600;
  color:var(--c-text-muted); font-size:.88rem; padding:0 0 .5rem;
}
/* Movil: aqui SI se necesita el scroll horizontal, y entonces las celdas
   llevan un ancho minimo para que las columnas no se aplasten. */
@media(max-width:760px){
  .article-body table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .article-body table th,
  .article-body table td{min-width:8.5rem}
}

/* 2 · El enlace «Politica de Privacidad» de la casilla del formulario se
   pintaba como el BOTON VERDE de WhatsApp y tapaba el texto de al lado.
   La culpa es de la regla que convierte en boton CUALQUIER <a> dentro de
   .blog-cta-form-wrapper, y el formulario vive justo ahi dentro. Se revierte
   SOLO para los enlaces del formulario: el boton de WhatsApp sigue igual. */
.article-single .article-body .blog-cta-form-wrapper .form a,
.article-single .article-body .blog-cta-form-wrapper .form__checkbox a,
.article-single .article-body .blog-conversion__form .form a{
  display:inline; gap:0; background:none; color:var(--c-secondary);
  padding:0; margin-top:0; border-radius:0; box-shadow:none;
  font-weight:inherit; font-size:inherit; letter-spacing:inherit;
  text-decoration:underline; text-underline-offset:2px; transform:none;
}
.article-single .article-body .blog-cta-form-wrapper .form a:hover,
.article-single .article-body .blog-cta-form-wrapper .form__checkbox a:hover,
.article-single .article-body .blog-conversion__form .form a:hover{
  background:none; color:var(--c-primary); transform:none; box-shadow:none;
}

/* 3 · El formulario dentro del bloque oscuro «caso real» era INVISIBLE.
   `.blog-conversion__form` pinta las etiquetas de blanco porque las supone
   sobre el fondo oscuro, pero `contact-form.php` las envuelve en un `.panel`
   de fondo BLANCO -> letra blanca sobre blanco. Solo aparecian al
   seleccionarlas con el raton. Se neutraliza el panel, que es justo lo que
   el diseno del bloque daba por hecho. */
.article-body .blog-conversion__form .panel{
  background:transparent; border:0; padding:0; border-radius:0; box-shadow:none;
}
.article-body .blog-conversion__form .panel > h3{color:#fff; margin:0 0 .9rem}
.article-body .blog-conversion__form .form__label{color:rgba(255,255,255,.92)}
.article-body .blog-conversion__form .form__checkbox{color:rgba(255,255,255,.80)}
.article-body .blog-conversion__form .form__checkbox a{color:#fff}
.article-body .blog-conversion__form .form__input,
.article-body .blog-conversion__form .form__textarea{
  color:var(--c-text); background:rgba(255,255,255,.96);
}
.article-body .blog-conversion__form .form__error,
.article-body .blog-conversion__form .form__success{color:#fff}

/* ============================================================================
   s1 REDISEÑO DE LA PORTADA (28-ago-2026) — cuatro arreglos, cada uno con su porqué.
   ============================================================================ */

/* 1 · EL FLOAT QUE SE ESCAPABA — es lo que Fernando veía «roto».
   `.imagen-responsive-flotante` lleva `float:right` (línea ~304) y NADA lo limpiaba: en
   escritorio la foto se salía de su bloque y se pintaba ENCIMA de la sección siguiente
   («Últimas publicaciones»). En móvil no se notaba porque la regla de <=640px la deja en
   `float:none`, y por eso el fallo sobrevivió: mirándolo en el teléfono se ve bien.
   🧨 Se contiene el float en su CONTENEDOR en vez de poner un `clear` suelto detrás de la
      imagen: así vale para cualquier artículo con una imagen flotada, no solo para la
      portada, y no hay que acordarse de añadir nada al escribir el siguiente. */
.article-body::after,.article-single::after{content:"";display:table;clear:both}

/* 2 · TARJETAS DE BLOG A LA MISMA ALTURA Y BOTONES ALINEADOS.
   La mitad de los artículos tiene el `excerpt` vacío en la base de datos, así que las
   tarjetas de «Últimas publicaciones» quedaban de alturas distintas y los «Leer más» a
   distinto nivel dentro de la misma fila.
   🧨 Hacen falta las TRES líneas: `height:100%` para que la tarjeta ocupe toda la celda del
      grid, el body en flex para poder repartir, y `margin-top:auto` en el botón para que se
      pegue abajo. Quitando cualquiera de ellas vuelve el desnivel. */
.article-card{display:flex;flex-direction:column;height:100%}
.article-card__body{display:flex;flex-direction:column;flex:1 1 auto}
.article-card__body .btn{margin-top:auto;align-self:flex-start}

/* 3 · Tarjeta de servicio con más de un enlace (eléctricas / telefónicas): uno por línea.
   `.service-card a` es inline, así que un `<br>` los separa pero no los espacia. */
.service-card__links{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}

/* 4 · PRIMERA CAPA DE INFORMACION RGPD bajo el formulario (art. 13 RGPD).
   Letra pequeña de verdad, pero legible: 12,8px sobre fondo claro y con su separador. */
.form__rgpd{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--c-border);font-size:.8rem;line-height:1.55;color:var(--c-text-muted)}
.form__rgpd p{margin-bottom:.35rem}
.form__rgpd p:last-child{margin-bottom:0}
.form__rgpd strong{color:var(--c-text)}
.form__rgpd a{color:var(--c-secondary);text-decoration:underline;text-underline-offset:2px}

/* ===== 15-sep-2026 · «Articulador: cajas CTA y fuente de la A s1» · Gate 1 de Fernando ===== */
/* --- caja CTA: el MARCADO VIEJO (form DENTRO de __text) se pinta igual que el nuevo ---
   Solo actúa si __form es hijo directo de __text (:has). Marcado nuevo y navegadores sin :has: sin cambios.
   __text se disuelve (display:contents) y sus hijos pasan a ser celdas de la caja, en su orden:
     fila 1 (1fr)      hueco de arriba (lo ocupa el ::before, para que nadie caiga ahí)
     filas 2-9 (auto)  los hijos de __text EN ORDEN DE DOCUMENTO (etiqueta, titular, desc, nota,
                       el enlace a contacto que ponen las webs sin formulario...); las que sobran miden 0
     fila 10 (1fr)     hueco de abajo
     fila 11           formulario a todo lo ancho
   El vídeo ocupa las filas 1-10; lo que mide de más que el texto se reparte entre las dos 1fr,
   así que el texto queda centrado en vertical, como con el flex del marcado nuevo.
   No se asigna fila por clase: un hijo sin fila fija (p. ej. un __cta o un parrafo sin clase) caería en el hueco
   de ARRIBA, encima de la etiqueta. */
@media(min-width:768px){
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form){
    grid-template-rows:1fr repeat(8,auto) 1fr auto;
    row-gap:0;
  }
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form)::before{content:"";grid-column:2;grid-row:1}
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__video{grid-row:1 / 11}
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text{display:contents}
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text > *{grid-column:2;min-width:0}
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text > .blog-conversion__etiqueta,
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text > .blog-conversion__cta{justify-self:start}
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text > .blog-conversion__form{grid-column:1 / -1;grid-row:11;margin-top:1.4rem}
}
@media(min-width:992px){
  .article-body .blog-conversion:has(> .blog-conversion__text > .blog-conversion__form) > .blog-conversion__text > .blog-conversion__form{margin-top:1.5rem}
}
@media(max-width:767px){
  .article-body .blog-conversion__text > .blog-conversion__form{margin-top:1.1rem}
}