/*
Theme Name: Marketing Spain
Theme URI: https://marketingspain.com
Author: Jesús Iturbide
Description: Agencia de SEO, GEO/AEO y WordPress en Navarra. Más clientes desde Google y desde la IA.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marketingspain
Tags: block-theme, full-site-editing, blog, business
*/

/* ============================================================
   Sistema de diseño — itb-web-generator
   Póster neón / graffiti urbano · alto contraste · LOUD
   ============================================================ */

:root {
    --bg:      var(--wp--preset--color--base, #0d0d10);
    --fg:      var(--wp--preset--color--contrast, #ffffff);
    --accent:  var(--wp--preset--color--accent, #b6ff2e);
    --violet:  var(--wp--preset--color--primary, #b06bff);
    --cyan:    var(--wp--preset--color--secondary, #22d3ee);
    --ink:     #0b0b0d;

    --muted:   #c4c8cf;
    --muted:   color-mix(in srgb, var(--fg) 72%, var(--bg));
    --surface: #15151c;
    --surface: color-mix(in srgb, var(--fg) 6%, var(--bg));
    --surface-2: #1f1f29;
    --surface-2: color-mix(in srgb, var(--fg) 10%, var(--bg));
    --line:    color-mix(in srgb, var(--fg) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--fg) 86%, transparent);

    --display: var(--wp--preset--font-family--heading, "Anton", sans-serif);
    --sans:    var(--wp--preset--font-family--body, "Outfit", system-ui, sans-serif);
    --script:  "Permanent Marker", "Caveat", cursive;

    --container: var(--wp--style--global--wide-size, 1200px);
    --gutter:  clamp(1.15rem, 4vw, 2.5rem);
    --section: clamp(4.5rem, 9vw, 8rem);
    --gap:     clamp(1.1rem, 2.2vw, 1.6rem);
    --radius:  16px;
    --card-shadow: var(--accent);
}

* { box-sizing: border-box; }

body {
    margin: 0; overflow-x: clip;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* Atmósfera premium: mesh de focos neón en deriva + rejilla + grano */
body::before {
    content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none;
    background:
        radial-gradient(38% 44% at 84% -8%, color-mix(in srgb, var(--violet) 46%, transparent), transparent 66%),
        radial-gradient(34% 40% at -6% 4%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 68%),
        radial-gradient(40% 38% at 10% 108%, color-mix(in srgb, var(--cyan) 22%, transparent), transparent 70%),
        radial-gradient(42% 40% at 104% 102%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 70%),
        radial-gradient(color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 26px 26px;
    animation: itb-aurora 26s ease-in-out infinite alternate;
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes itb-aurora {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 3% -2%, -3% 3%, 2% -3%, -3% -2%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---- Titulares tipo cartel ---- */
.itb-block h1, .itb-block h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    line-height: 0.9; letter-spacing: 0.01em; margin: 0 0 0.35em;
    color: var(--fg); text-wrap: balance;
}
.itb-block h3 {
    font-family: var(--sans); font-weight: 800; line-height: 1.12;
    letter-spacing: -0.01em; margin: 0 0 0.45em; color: var(--fg);
}
.itb-block p { margin: 0 0 1rem; max-width: 60ch; color: var(--muted); }
.itb-block a { color: var(--accent); text-underline-offset: 3px; }

/* ---- Emphasis con brocha (la *palabra*) ---- */
.itb-script {
    font-family: var(--script); text-transform: none; color: var(--accent);
    font-weight: 400; font-size: 1.08em; letter-spacing: 0.01em; line-height: 0.92;
    display: inline-block; transform: rotate(-2deg); padding: 0 0.06em;
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- Sección ---- */
.itb-block { padding-block: var(--section); position: relative; overflow: clip; }
.itb-block__inner {
    width: min(100% - calc(var(--gutter) * 2), var(--container));
    margin-inline: auto; position: relative;
}
.itb-block__inner > h2 {
    font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.8rem);
    max-width: min(16ch, 100%); margin: 0 0 1.7rem;
    padding-bottom: 0.35rem; position: relative; width: max-content;
    text-shadow: 2px 2px 0 var(--ink);
}
/* subrayado de brocha bajo los títulos de sección */
.itb-block__inner > h2::after {
    content: ""; position: absolute; left: 0.04em; bottom: -0.06em;
    height: 0.16em; width: min(7ch, 70%);
    background: var(--accent); border-radius: 99px; transform: rotate(-0.7deg);
    box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* doodle/sticker en esquina por sección (oculto en móvil) */
.itb-servicios .itb-block__inner::before,
.itb-proceso .itb-block__inner::before,
.itb-precios .itb-block__inner::before,
.itb-faq .itb-block__inner::before {
    position: absolute; top: -0.4rem; right: 0; font-size: 2.7rem; line-height: 1;
    opacity: .6; pointer-events: none; font-family: var(--sans);
}
.itb-servicios .itb-block__inner::before { content: "\2197"; color: var(--accent); transform: rotate(8deg); }
.itb-proceso  .itb-block__inner::before { content: "\273A"; color: var(--violet); transform: rotate(-8deg); }
.itb-precios  .itb-block__inner::before { content: "\2726"; color: var(--cyan);   transform: rotate(12deg); }
.itb-faq      .itb-block__inner::before { content: "?"; color: var(--violet); font-family: var(--display); font-size: 3.2rem; opacity: .5; }
@media (max-width: 720px) {
    .itb-servicios .itb-block__inner::before,
    .itb-proceso .itb-block__inner::before,
    .itb-precios .itb-block__inner::before,
    .itb-faq .itb-block__inner::before { display: none; }
}

/* ---- Rejillas ---- */
.itb-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--gap);
    margin-top: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 600px) { .itb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
    .itb-grid { grid-template-columns: repeat(3, 1fr); }
    .itb-servicios .itb-grid, .itb-resultados .itb-grid, .itb-proceso .itb-grid { grid-template-columns: repeat(4, 1fr); }
    .itb-faq .itb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tarjetas neo-brutalistas (sticker con sombra dura) ---- */
.itb-servicios { --card-shadow: var(--accent); }
.itb-precios   { --card-shadow: var(--violet); }
.itb-faq       { --card-shadow: var(--cyan); }
.itb-testimonios { --card-shadow: var(--violet); }
.itb-grid > [class*="__item"] {
    background: var(--surface); border: 2px solid var(--line-strong);
    border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
    position: relative; box-shadow: 7px 7px 0 0 var(--card-shadow);
    transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .18s;
}
.itb-grid > [class*="__item"] h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.itb-grid > [class*="__item"] p { color: var(--muted); margin-bottom: 0; }
@media (hover: hover) {
    .itb-grid > [class*="__item"]:hover {
        transform: translate(4px, 4px); background: var(--surface-2);
        box-shadow: 3px 3px 0 0 var(--card-shadow);
    }
}
.itb-grid > [class*="__item"]:active { transform: translate(5px, 5px) scale(.994); }

/* ---- Iconos de servicio (chip neón rotado) ---- */
.itb-servicios [class*="__item"] { padding-top: 2.3rem; }
.itb-servicios [class*="__item"] img {
    width: 58px; height: 58px; padding: 12px; background: var(--ink);
    border: 2px solid var(--accent); border-radius: 14px; margin-bottom: 1.1rem;
    box-shadow: 4px 4px 0 var(--accent); transform: rotate(-4deg);
}

/* ---- Numerales de proceso (contorno graffiti) ---- */
.itb-proceso .itb-grid > [class*="__item"] {
    background: transparent; border: none; box-shadow: none; padding: 0.5rem 0 0;
}
.itb-proceso [class*="__numero"] {
    font-family: var(--display); line-height: 0.8;
    font-size: clamp(3.6rem, 2rem + 6vw, 6.5rem); margin: 0 0 0.3rem;
    color: transparent; -webkit-text-stroke: 2px var(--accent);
}
.itb-proceso [class*="__item"]:nth-child(2n) [class*="__numero"] { -webkit-text-stroke-color: var(--violet); }

/* ---- Botones sticker ---- */
.itb-hero a, .itb-cta a, .itb-precios [class*="__item"] a {
    display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.7rem;
    padding: 0.95rem 1.7rem; border-radius: 100px; text-decoration: none;
    font-family: var(--sans); font-weight: 800; font-size: 1rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink); background: var(--accent); border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 0 var(--ink);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.itb-hero a:hover, .itb-cta a:hover, .itb-precios [class*="__item"] a:hover {
    transform: translate(3px, 3px); box-shadow: 1px 1px 0 0 var(--ink); filter: brightness(1.05);
}
.itb-hero a:active, .itb-cta a:active, .itb-precios [class*="__item"] a:active { transform: translate(3px, 3px) scale(.97); }
.itb-hero a::after, .itb-cta a::after, .itb-precios [class*="__item"] a::after {
    content: "\2192"; font-weight: 900; transition: transform .15s;
}
.itb-hero a:hover::after, .itb-cta a:hover::after, .itb-precios [class*="__item"] a:hover::after {
    transform: translateX(5px);
}

/* ---- Hero ---- */
.itb-hero { padding-block: clamp(5rem, 12vw, 10rem); overflow: visible; }
.itb-hero h1 {
    font-size: clamp(3.1rem, 1.2rem + 8.5vw, 7.2rem); max-width: 13ch;
    text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 color-mix(in srgb, var(--violet) 50%, var(--ink));
}
.itb-hero h1 .itb-script { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent); }
.itb-hero .itb-hero__subtitulo {
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
    color: var(--fg); opacity: .9; max-width: 46ch; margin-top: 1.4rem; white-space: pre-line;
}
.itb-hero .itb-hero__imagen {
    width: 100%; height: auto; border-radius: 20px; margin-top: 2.2rem;
    border: 3px solid var(--accent);
    box-shadow: 14px 14px 0 var(--violet),
                0 0 0 1px color-mix(in srgb, var(--cyan) 45%, transparent),
                0 40px 90px -34px rgba(0,0,0,.85),
                0 0 70px -22px color-mix(in srgb, var(--accent) 50%, transparent);
}
/* sticker rotulado del hero (solo desktop) */
.itb-hero .itb-block__inner::before {
    content: "SEO \00B7 GEO/AEO \00B7 WORDPRESS"; position: absolute; top: -1.1rem; left: 0; z-index: 2;
    background: var(--violet); color: var(--ink); font-family: var(--sans);
    font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
    padding: 0.4rem 0.85rem; border-radius: 8px; border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); white-space: nowrap;
}
@media (min-width: 920px) {
    .itb-hero .itb-block__inner {
        display: grid; grid-template-columns: 1.05fr 0.95fr;
        gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
    }
    .itb-hero .itb-block__inner > * { grid-column: 1; }
    .itb-hero .itb-block__inner > .itb-hero__imagen { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
    /* Portada sin imagen subida: gráfico premium generado (mesh + aros neón) */
    .itb-hero .itb-block__inner:not(:has(.itb-hero__imagen))::after {
        content: ""; grid-column: 2; grid-row: 1 / -1; align-self: center;
        min-height: clamp(300px, 32vw, 460px); border-radius: 26px;
        border: 2px solid var(--line-strong); overflow: hidden; position: relative;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke-width='2'%3E%3Ccircle cx='120' cy='120' r='86' stroke='%23b6ff2e' stroke-opacity='0.55'/%3E%3Ccircle cx='120' cy='120' r='58' stroke='%23b06bff' stroke-opacity='0.6'/%3E%3Ccircle cx='120' cy='120' r='30' stroke='%2322d3ee' stroke-opacity='0.5'/%3E%3C/g%3E%3Cg fill='%23b6ff2e'%3E%3Ccircle cx='120' cy='34' r='4'/%3E%3C/g%3E%3C/svg%3E") center / 62% no-repeat,
            radial-gradient(58% 58% at 28% 26%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 70%),
            radial-gradient(60% 60% at 82% 74%, color-mix(in srgb, var(--violet) 62%, transparent), transparent 72%),
            radial-gradient(46% 46% at 66% 14%, color-mix(in srgb, var(--cyan) 44%, transparent), transparent 70%),
            color-mix(in srgb, var(--fg) 5%, var(--bg));
        box-shadow: 14px 14px 0 var(--violet), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 90px rgba(0,0,0,.5);
    }
    /* Imagen/gráfico del hero A SANGRE por la derecha en pantallas anchas */
    .itb-hero .itb-block__inner > .itb-hero__imagen,
    .itb-hero .itb-block__inner:not(:has(.itb-hero__imagen))::after {
        width: calc(100% + max(0px, (100vw - var(--container)) / 2 - 2px));
        border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
        box-shadow: 0 40px 90px -34px rgba(0,0,0,.85), 0 0 100px -26px color-mix(in srgb, var(--violet) 55%, transparent);
    }
}
@media (max-width: 919px) { .itb-hero .itb-block__inner::before { display: none; } }

/* ---- Resultados: BANDA LIMA a sangre, números negros gigantes ---- */
.itb-resultados { background: var(--accent); color: var(--ink); }
.itb-resultados .itb-block__inner > h2 { color: var(--ink); }
.itb-resultados .itb-block__inner > h2::after { background: var(--ink); box-shadow: none; }
.itb-resultados .itb-script {
    color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.itb-resultados .itb-grid {
    margin-top: 2.6rem; gap: 0; border: 3px solid var(--ink);
    border-radius: 20px; overflow: hidden; background: var(--ink);
}
.itb-resultados .itb-grid > [class*="__item"] {
    background: var(--accent); border: none; border-radius: 0; box-shadow: none;
    text-align: center; padding: clamp(1.8rem, 1rem + 2vw, 2.6rem); outline: 1.5px solid var(--ink);
}
.itb-resultados [class*="__item"] h3 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(3rem, 1.8rem + 4vw, 5rem); line-height: 0.95; color: var(--ink); margin: 0 0 0.2rem;
}
.itb-resultados [class*="__item"] p,
.itb-resultados [class*="__etiqueta"] {
    color: color-mix(in srgb, var(--ink) 78%, var(--accent)); font-weight: 600; margin: 0;
}

/* ---- Precios ---- */
.itb-precios [class*="__item"] { text-align: center; display: flex; flex-direction: column; }
.itb-precios [class*="__item"] a { margin-top: auto; align-self: center; }
.itb-precios [class*="__precio"] {
    font-family: var(--display); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem);
    line-height: 1; color: var(--accent); margin: 0.2rem 0 0;
}
.itb-precios [class*="__periodo"] { color: var(--muted); font-weight: 600; }
.itb-precios [class*="__caracteristicas"] { color: var(--muted); margin: 1rem 0; }
.itb-precios [class*="__item"].is-featured {
    border-color: var(--accent); box-shadow: 9px 9px 0 0 var(--accent); background: var(--surface-2);
}
.itb-precios [class*="__item"].is-featured [class*="__precio"] { color: var(--accent); }
@media (min-width: 1000px) {
    .itb-precios [class*="__item"].is-featured { margin-top: -12px; }
}
.itb-precios [class*="__item"].is-featured::before {
    content: "Recomendado"; position: absolute; top: -1rem; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    background: var(--accent); color: var(--ink); font-family: var(--sans);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.4rem 0.9rem; border-radius: 8px; border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink); white-space: nowrap;
}

/* ---- Testimonios ---- */
.itb-testimonios { background: color-mix(in srgb, var(--violet) 7%, var(--bg)); }
.itb-testimonios [class*="__item"] { padding-top: 3.2rem; }
.itb-testimonios [class*="__item"] > p:first-of-type {
    font-weight: 600; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    line-height: 1.45; color: var(--fg);
}
.itb-testimonios [class*="__item"]::before {
    content: "\201C"; position: absolute; top: 0.3rem; left: 1.2rem;
    font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--violet);
}

/* ---- Fotos con aro neón (equipo / testimonios) ---- */
.itb-testimonios img, .itb-equipo img, .itb-nosotros img,
[class*="__foto"], [class*="__miembro"] img {
    border-radius: 50% !important; width: 120px; height: 120px; object-fit: cover;
    border: 3px solid var(--accent); box-shadow: 5px 5px 0 var(--violet); margin-bottom: 1rem;
}

/* ---- Banda CTA: panel póster violeta con sombra lima ---- */
.itb-cta { text-align: center; }
.itb-cta .itb-block__inner {
    background: var(--violet); color: var(--ink); border: 3px solid var(--ink);
    border-radius: 24px; padding: clamp(2.8rem, 6vw, 4.8rem);
    box-shadow: 12px 12px 0 var(--accent); position: relative;
}
.itb-cta .itb-block__inner > h2 { margin-inline: auto; color: var(--ink); }
.itb-cta .itb-block__inner > h2::after {
    background: var(--ink); box-shadow: none; left: 50%; transform: translateX(-50%) rotate(-0.7deg);
}
.itb-cta .itb-script {
    color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.itb-cta p { margin-inline: auto; color: color-mix(in srgb, var(--ink) 82%, var(--violet)); opacity: 1; }
.itb-cta a {
    background: var(--ink); color: var(--accent); border-color: var(--ink);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 55%, var(--violet));
}
.itb-cta a:hover { box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 55%, var(--violet)); }

/* ---- Contacto ---- */
.itb-contacto [class*="__telefono"], .itb-contacto [class*="__email"] {
    font-size: 1.2rem; color: var(--fg); font-weight: 700;
}

img { max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--ink); }
a:focus-visible, button:focus-visible, :focus-visible {
    outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* Accesibilidad: texto solo para lectores de pantalla + skip-link visible al foco */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
    position: fixed; top: 1rem; left: 1rem; z-index: 100000;
    width: auto; height: auto; clip: auto; padding: 0.7rem 1.2rem;
    background: var(--accent); color: var(--ink); border-radius: 8px; font-weight: 800;
    box-shadow: 0 0 0 3px var(--ink);
}

@keyframes itb-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
/* Revelado al cargar, escalonado. Seguro: el contenido SIEMPRE acaba visible
   (sin scroll-driven, que podía dejar secciones ocultas si el navegador falla). */
@media (prefers-reduced-motion: no-preference) {
    .itb-block__inner > *, .itb-grid > [class*="__item"] {
        animation: itb-rise .55s both cubic-bezier(.2, .7, .2, 1);
    }
    .itb-grid > :nth-child(2) { animation-delay: .05s; }
    .itb-grid > :nth-child(3) { animation-delay: .1s; }
    .itb-grid > :nth-child(4) { animation-delay: .15s; }
}