/*
Theme Name: Intentio Theme
Theme URI: https://www.intentio.es
Author: Cotu
Author URI: https://www.septimacaja.com/cotu/
Description: Theme personalizado para Intentio
Version: 11.2
License: GNU General Public License v2 or later
Text Domain: Web creada para intentio
*/

/* ============================================================
   1) RESET + BASE
   ============================================================ */

html, body {
    margin:0; 
    padding:0;
    font-family: system-ui, sans-serif;
    background:#FFFFFF;
    color:#0A1220;
    max-width:100% !important;
    overflow-x:hidden !important;
}

footer {
    position:static !important;
}

/* Links */
a {
    color: var(--intentio-primary, #E63946);
    text-decoration: none;
    transition: .2s ease;
}
a:hover, a:focus {
    color: var(--intentio-accent, #1D3557);
    text-decoration: underline;
}

/* General Sections */
.section {
    padding:4rem 2rem;
    text-align:center;
    box-sizing:border-box;
}

/* First section offset (header fixed) */
.section:first-of-type,
#inicio {
    padding-top: 1rem;
}

/* Fondo correcto para el hero */
#inicio.section.hero {
    background: #0C1D2F !important;
}

/* Asegurar que texto y elementos internos se vean como en la captura */
#inicio h1,
#inicio .lead {
    color: #FFFFFF !important;
}

#inicio .btn {
 background: #E63946;
    color: #FFF;
    border: none;
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

/* --- SECCIÓN POR QUÉ WARGAMING CON OVERLAY --- */
#por-que.section.parallax {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #FFFFFF; /* texto blanco */
    padding: 6rem 2rem;
}

/* Capa oscura */
#por-que.section.parallax::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); /* oscurecimiento del fondo */
    z-index: 1;
}

/* Para que el contenido quede por encima */
#por-que.section.parallax > div {
    position: relative;
    z-index: 2;
}

/* Títulos y textos */
#por-que h2, 
#por-que h3, 
#por-que p {
    color: #FFFFFF !important;
}

/* Separación como en la referencia */
#por-que h2 {
    margin-bottom: 1.5rem;
}
#por-que p.lead,
#por-que p {
    max-width: 900px;
    margin: 0 auto 2rem;
}

/* Recolorear las cajas de beneficios dentro de #por-que */
#por-que .icon-box {
    color: #0A1220;
}

#por-que .icon-box h3,
#por-que .icon-box p {
    color: #0A1220 !important;
}


/* Distancia antes de los iconos */
#por-que h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* --- SECCIÓN SERVICIOS CON OVERLAY COMO POR QUÉ WARGAMING --- */
#servicios.section.parallax {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 6rem 2rem;
    color: #FFFFFF !important;
}

/* Capa oscura encima del fondo */
#servicios.section.parallax::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.55); /* Ajusta si quieres más o menos oscuridad */
    z-index: 1;
}

/* Asegurar que el contenido se vea */
#servicios.section.parallax > div {
    position: relative;
    z-index: 2;
}

/* Títulos y textos visibles */
#servicios h2,
#servicios h3,
#servicios p {
    color: #FFFFFF !important;
}

/* Restaurar color de las icon-box dentro de Servicios */
#servicios .icon-box {
    color: #0A1220 !important;
}
#servicios .icon-box h3,
#servicios .icon-box p {
    color: #0A1220 !important;
}


#contacto > div {
    max-width: 750px;
    margin: 0 auto;
}


/* ============================================================
   2) HEADER FINAL (SC-HEADER)
   ============================================================ */

.sc-header {
    background:#0A1220;
    width:100%;
    padding:14px 20px;
    display:flex;
    align-items:center;
    position:relative;
    z-index:9999;
    border-bottom:1px solid rgba(255,255,255,.08);
	box-sizing:border-box !important;
}

.sc-left {
    display:flex;
    align-items:center;
    width:100%;
    gap:20px;
}

/* Menu desktop */
.sc-menu {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap:32px;
}
.sc-menu li a {
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
}
.sc-menu li a:hover {
    color:#E63946;
}

/* Hamburger */
.menu-toggle {
    margin-left:auto;
    background:transparent;
    border:0;
    font-size:28px;
    color:#fff !important;
    cursor:pointer;
    display:none;
}
.menu-toggle i {
    color:#fff !important;
}

/* Mobile */
@media (max-width:768px) {

    .menu-toggle { display:block; }

    .sc-menu {
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#0A0F18;
        flex-direction:column;
        padding:20px;
        display:none;
        border-top:1px solid rgba(255,255,255,.1);
    }
    .sc-menu.is-open { display:flex !important; }
	
	.sc-menu li a {
        display: block;
        padding: 0px 1rem; /* añade espacio vertical */
        font-size: 17px;
        font-weight: 600;
        color: #FFFFFF;
    }

    /* Más separación entre elementos */
    .sc-menu li {
        margin-bottom: 6px;
    }
}

/* Admin bar fix 
body.admin-bar .sc-header { margin-top:32px; }
@media(max-width:782px){
    body.admin-bar .sc-header { margin-top:46px; }
}
*/
/* Remove old WP header */
.site-header { all:unset !important; }

/* ============================================================
   3) HERO
   ============================================================ */

.hero {
    padding-top:90px;
    text-align:center;
}
.hero h1,
.hero .lead { color:#FFFFFF; }

.hero img {
    width: auto;
    max-width: 400px;
    display: block;
    margin: 0 auto;
    height: auto;
}

/* Asegurar que las imágenes destacadas SIEMPRE respeten su diseño */
.post-single-content .single-featured-image img,
.single-featured-image img {
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    width: 100%;
}


/* Estilos diferenciados para las páginas (page.php) */
.page .post-single-content {
    padding-top: 4rem !important; /* elimina los 70px extra */
}


/* Imagen destacada estilo HERO solo en páginas */
.page .single-featured-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0; /* Hero limpio */
    display: block;
    margin-bottom: 0;
}

/* ============================================================
   4) ICON GRID (VERSIÓN FINAL)
   ============================================================ */

.icon-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
    margin-top:2rem;
    text-align:center;
}

.icon-box {
    background:#FFFFFF;
    padding:1.5rem;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    transition:.3s;
    text-align:center;
}
.icon-box:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 15px rgba(0,0,0,0.1);
}

.icon-box-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border:2px solid #20A4A6;
    border-radius:50%;
    margin-bottom:1rem;
    font-size:1.5rem;
    color:#20A4A6;
}

/* Mobile */
@media(max-width:768px){
    .icon-grid { grid-template-columns:1fr; }
    .icon-box { text-align:left; }
    .icon-box-icon { float:left; margin-right:1rem; }
}

/* ============================================================
   5) CONTACT FORM
   ============================================================ */

.contact-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:2rem;
    text-align:left;
}
.contact-form-grid .full-width {
    grid-column:1 / -1;
}

.contact-form-grid input,
.contact-form-grid textarea {
    width:100%;
    padding:0.75rem;
    border:1px solid rgba(10,18,32,0.1);
    border-radius:6px;
    font-size:1rem;
    box-sizing:border-box;
}
.contact-form-grid textarea {
    resize:vertical;
    min-height:120px;
}
@media(max-width:768px){
    .contact-form-grid { grid-template-columns:1fr; }
}

/* ============================================================
   6) QUIÉNES SOMOS
   ============================================================ */

#quienes {
    background:#F3F3F3;
    text-align:left;
    padding:6rem 2rem;
}

.quienes-somos-content {
    display:flex;
    align-items:center;
    gap:4rem;
    max-width:1200px;
    margin:0 auto;
}
.quienes-somos-image { flex:1; padding:2rem; }
.quienes-somos-image img { width:100%; height:auto; }

.quienes-somos-text {
    flex:1;
    max-width:50%;
    padding-right:2rem;
}
.quienes-somos-text .subtitle {
    color:#20A4A6;
    font-weight:700;
    font-size:.9rem;
    text-transform:uppercase;
    margin-bottom:.5rem;
}
.quienes-somos-text h2 {
    font-size:2.8rem;
    color:#0A1220;
    margin-bottom:1.5rem;
    line-height:1.2;
}
.quienes-somos-text p {
    font-size:1.1rem;
    color:#4A4A4A;
    line-height:1.7;
    margin-bottom:1.5rem;
}

#quienes .btn {
    background:#E63946 !important;
    color:#FFF !important;
    padding:0.75rem 1.4rem;
    border-radius:8px;
    display:inline-block;
}


@media(max-width:768px){
    #quienes { padding:4rem 1rem; }
    .quienes-somos-content { flex-direction:column; gap:2rem; }
    .quienes-somos-text { max-width:100%; text-align:center; padding:0; }
}

/* ============================================================
   7) BLOG GRID + POST CARDS
   ============================================================ */

.posts-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:1.2rem;
}
.post-item {
    background:#FFFFFF;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
	max-width: 350px;
}
.post-item img {
    width:100%;
    height:150px;
    object-fit:cover;
}
.post-body {
    padding:1rem;
    color:#0A1220;
}

/* ============================================================
   8) SINGLE — ENTRY
   ============================================================ */

.post-single-content {
    padding-top:calc(4rem + 70px);
    padding-bottom:4rem;
    padding-left:2rem;
    padding-right:2rem;
    text-align:left;
}
.post-single-content .post-container {
    max-width:800px;
    margin:0 auto;
}
.entry-title {
    font-size:2.5rem;
    margin:1rem 0 .5rem;
    color:#E63946;
}

/* ====== Autor del post — estilo Intentio ====== */
.post-meta-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Avatar redondo */
.post-meta-author img.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* Contenedor del nombre + fecha */
.post-meta-author .author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

/* Nombre del autor */
.post-meta-author .author-info .author-name {
    font-weight: 700;
    color: #E63946;   /* rojo Intentio */
    font-size: 1rem;
}

/* Fecha */
.post-meta-author .author-info .post-date {
    font-size: .9rem;
    color: #666;
    margin-top: 2px;
}




/* ============================================================
   9) COMMENTS (NUEVA VERSIÓN)
   ============================================================ */

.comment-list {
    list-style:none;
    margin:2rem 0 0;
    padding:0;
}

.comment-list li {
    list-style: none !important;
}

.comment-body {
    display:flex;
    gap:1.5rem;
    background:#FFF;
    border-radius:16px;
    padding:1.5rem;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}
.comment-avatar img {
    width:64px;
    height:64px;
    border-radius:50%;
    object-fit:cover;
}
.comment-author-name a {
    font-weight:600;
    font-size:1rem;
    color:#222;
}
.comment-author-name a:hover {
    color:#20A4A6;
    text-decoration:underline;
}
.comment-meta {
    font-size:.85rem;
    color:#888;
    margin-bottom:.5rem;
}
.comment-content {
    color:#333;
    line-height:1.6;
}


/* Comment form */
#respond {
    max-width:800px;
    margin:2.5rem auto 0;
    padding:1.75rem 1.5rem;
    background:#F9FAFB;
    border:1px solid rgba(0,0,0,0.04);
    border-radius:14px;
}
#respond input,
#respond textarea {
    width:100%;
    border-radius:8px;
    border:1px solid #D1D5DB;
    padding:0.6rem .75rem;
}
#respond input[type="submit"] {
    background:#E63946;
    color:#FFF;
    border:none;
    border-radius:8px;
    padding:.6rem 1.2rem;
    font-weight:700;
    cursor:pointer;
}
#respond input[type="submit"]:hover { opacity:.9; }

/* ============================================================
   10) METODOLOGÍA (NUEVA)
   ============================================================ */

.metodologia-inner {
    max-width:1100px;
    margin:0 auto;
}
.metodologia-intro {
    max-width:640px;
    margin:0 auto 2rem;
    text-align:center;
}
.metodologia-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1.5rem;
}
.method-card {
    background:#FFF;
    border-radius:16px;
    padding:1.5rem 1.25rem;
    box-shadow:0 16px 30px rgba(15,23,42,0.08);
    display:flex;
    flex-direction:column;
    text-align:left;
}
.method-step-circle {
    width:40px;
    height:40px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    margin-bottom:.8rem;
    background:#0A1220;
    color:#F3EED9;
}
@media(max-width:1024px){
    .metodologia-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
    .metodologia-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px){
    .metodologia-grid { grid-template-columns:1fr; }
}


/* Estilos para la Sección de Contacto (Nuevos) */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: left;
}
.contact-form-grid .full-width {
    grid-column: 1 / -1; /* Ocupa ambas columnas */
}
.contact-form-grid input[type="text"],
.contact-form-grid input[type="email"],
.contact-form-grid textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(10, 18, 32, 0.1);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: system-ui, sans-serif;
    color: #0A1220;
}
.contact-form-grid textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-form-grid .btn {
    background: #E63946;
    color: #FFF;
    border: none;
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-weight: 700;
    cursor: pointer;
}



/* ============================================================
   11) FOOTER AVANZADO
   ============================================================ */

.site-footer.advanced-footer {
    background:#0A1220;
    color:#F3EED9;
    padding:3rem 1rem 1.5rem;
    text-align:center;
}
.footer-container { max-width:960px; margin:0 auto; }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 1fr;
}

.footer-grid .footer-col:nth-child(1) {
    grid-column: 2;
}

.footer-grid .footer-col:nth-child(2) {
    grid-column: 3;
}

.links-col, .about-col { text-align:left; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li a {
    color:#F3EED9;
    line-height:2;
}
.footer-col ul li a:hover { color:#20A4A6; }

.social-media a {
    color:#F3EED9;
    font-size:1.5rem;
    margin-right:.8rem;
}
.social-media a:hover { color:#E63946; }

.footer-separator hr {
    border:0;
    height:1px;
    background:rgba(255,255,255,0.1);
    max-width:65%;
    margin:1rem auto;
}

footer .footer-icon i {
    font-size:45px;
    color:#F3EED9;
}
footer .footer-icon i:hover {
    color:#E63946;
    transform:scale(1.1);
}

/* Mobile footer */
@media(max-width:768px){
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .links-col, .about-col { text-align:center; }
    .footer-separator hr { max-width:90%; }
}

/* ============================================================
   INTENTIO — Content Styles (aplican a posts y pages)
   ============================================================ */

/* ---------- TIPOGRAFÍA GLOBAL ---------- */

.post-single-content,
.page-content {
    line-height: 1.7;
    font-size: 1.05rem;
    color: #0A1220;
}

.post-single-content p,
.page-content p {
    margin-bottom: 1.4rem;
}

/* ---------- CABECERAS ---------- */

.post-single-content h1,
.page-content h1 {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #E63946;
}

.post-single-content h2,
.page-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 2.2rem 0 1rem;
    color: #0A1220;
}

.post-single-content h3,
.page-content h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
}

.post-single-content h4,
.page-content h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.8rem 0 .8rem;
}

.post-single-content h5,
.page-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .85;
    margin: 1.6rem 0 .6rem;
}

.post-single-content h6,
.page-content h6 {
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    opacity: .6;
    margin: 1.4rem 0 .5rem;
}

/* ---------- BLOCKQUOTES & CITE ---------- */

/* ============================================================
   Citas estilo "Caja con banda roja" — Intentio
   Soporta: blockquote, wp-block-quote, wp-block-pullquote
   ============================================================ */

/* Caja general */
.post-single-content blockquote,
.page-content blockquote,
.wp-block-quote,
.wp-block-pullquote {
    position: relative;
    background: #FFFFFF;
    padding: 2rem 2rem 1.5rem;
    margin: 2.5rem 0;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    font-style: italic;
    color: #333;
    border: none;
}

/* Banda superior roja */
.post-single-content blockquote::before,
.page-content blockquote::before,
.wp-block-quote::before,
.wp-block-pullquote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: #E63946; /* Color corporativo */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Comillas decorativas */
.post-single-content blockquote::after,
.page-content blockquote::after,
.wp-block-quote::after,
.wp-block-pullquote::after {
    content: "“";
    font-size: 4rem;
    position: absolute;
    top: -5px;
    left: 15px;
    color: #E63946;
    opacity: 0.2;
    font-weight: 700;
    line-height: 1;
}

/* Texto interior */
.post-single-content blockquote p,
.page-content blockquote p,
.wp-block-quote p,
.wp-block-pullquote p {
    margin: 0 0 1rem;
}

/* Cita del autor */
.post-single-content blockquote cite,
.page-content blockquote cite,
.wp-block-quote cite,
.wp-block-pullquote cite {
    font-style: normal;
    font-weight: bold;
    display: block;
    color: #555;
    text-align: right;
    margin-top: 1rem;
}


/* ---------- IMÁGENES & FIGCAPTION ---------- */

.post-single-content img,
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.post-single-content figure,
.page-content figure {
    margin: 2rem 0;
    text-align: center;
}

.post-single-content figcaption,
.page-content figcaption {
    font-size: .9rem;
    color: #666;
    margin-top: .5rem;
}

/* ---------- TABLAS ---------- */

.post-single-content table,
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.post-single-content th,
.page-content th {
    background: #F3F3F3;
    font-weight: 700;
    padding: .7rem;
    border: 1px solid #ddd;
}

.post-single-content td,
.page-content td {
    padding: .7rem;
    border: 1px solid #ddd;
}

/* ---------- LISTAS ---------- */

.post-single-content ul,
.page-content ul,
.post-single-content ol,
.page-content ol {
    margin: 1.2rem 0 1.2rem 2rem;
    line-height: 1.6;
}

.post-single-content ul li,
.page-content ul li {
    list-style: disc;
}

.post-single-content ol li,
.page-content ol li {
    list-style: decimal;
}

/* ---------- HR ---------- */

.post-single-content hr,
.page-content hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 2.4rem 0;
}

/* ---------- CÓDIGO & PRE ---------- */

.post-single-content pre,
.page-content pre {
    background: #0A1220;
    color: #F3EED9;
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.post-single-content code,
.page-content code {
    background: #000;
    padding: .2rem .4rem;
    border-radius: 4px;
    font-family: monospace;
}

/* ---------- TEXTO PEQUEÑO / SUBTÍTULO ---------- */

.post-single-content small,
.page-content small,
.post-single-content .wp-block-subtitle,
.page-content .wp-block-subtitle {
    font-size: .9rem;
    color: #666;
    font-style: italic;
}

/* ---------- GUTENBERG: BOTONES ---------- */

.post-single-content .wp-block-button__link,
.page-content .wp-block-button__link {
    display: inline-block;
    background: #E63946;
    color: #FFF;
    padding: .7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
}

.post-single-content .wp-block-button__link:hover,
.page-content .wp-block-button__link:hover {
    opacity: .9;
}

/* ---------- GUTENBERG: COLUMNAS ---------- */

.wp-block-columns {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.wp-block-column {
    flex: 1;
}

@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}