/*
Theme Name: Equipate
Theme URI: https://equipate.biz
Author: Equipate Consultoría Empresarial
Description: Tema a medida para equipate.biz — consultoría en Zoho CRM, Qlik Sense, RapidMiner, automatización IA y estrategias omnicanal.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: equipate
*/

/* ============================================================
   CSS COMPARTIDO — usado por TODAS las páginas (header, footer,
   banner de página interna, bloques reutilizables como CTA,
   franja de productos, filas de producto, acordeón, carousel).
   El CSS específico de cada página (home, blog, etc.) se agrega
   aparte dentro de cada plantilla.
   ============================================================ */

  :root{
    --red:#C41E3A;
    --graphite:#1F2328;
    --graphite-soft:#2A2F35;
    --green:#1E8E5A;
    --green-dark:#166B44;
    --sky:#EDF3F8;
    --gray-text:#6B7280;
    --bg:#FAFAF9;
    --white:#FFFFFF;
    --border:#E7E5E0;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:'Helvetica Neue',Arial,sans-serif;
    background:var(--bg);
    color:var(--graphite);
    line-height:1.6;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
  h1,h2,h3{font-family:'Open Sans',sans-serif;font-weight:600;line-height:1.15;}

  /* ===== Header (idéntico en todas las páginas) ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--white);
    border-bottom:1px solid var(--border);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 24px;max-width:1200px;margin:0 auto;
  }
  .logo{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;width:190px;}
  .logo img{width:100%;height:auto;}
  .logo-tag{
    font-family:'Helvetica Neue',Arial,sans-serif;font-size:13px;letter-spacing:0;
    text-transform:uppercase;color:rgba(0,0,0,0.7);margin-top:4px;
    width:100%;white-space:normal;text-align:left;
  }

  nav{display:none;}
  nav ul{display:flex;list-style:none;gap:10px;align-items:center;}
  nav a{
    font-family:'Raleway', arial, sans-serif;
    font-weight:500;
    display:inline-block;
    padding:0 10px;
    text-align:right;
    letter-spacing:1.5px;
    font-size:17px;
    color:var(--graphite);text-transform:uppercase;
    align-items:center;gap:4px;
    position:relative;
  }
  nav a:hover{color:var(--red);}
  nav > ul > li > a::after{
    content:'';position:absolute;left:10px;right:10px;bottom:-6px;height:2px;
    background:var(--red);transform:scaleX(0);transform-origin:right;
    transition:transform .25s ease;
  }
  nav > ul > li > a:hover::after{transform:scaleX(1);transform-origin:left;}
  .has-sub{position:relative;}
  .submenu{
    display:none;position:absolute;top:100%;left:0;background:#f6f6f6;
    border:none;border-radius:0;width:190px;
    padding:0;box-shadow:none;text-align:right;
  }
  .has-sub:hover .submenu{display:block;}
  .submenu a{
    display:block;padding:14px 16px;font-family:'Raleway',Arial,sans-serif;font-size:15px;font-weight:500;
    text-transform:none;letter-spacing:0;border-radius:0;color:#333;
    transition:background .15s,color .15s,padding-right .15s;
    border-bottom:1px solid rgba(0,0,0,0.08);
    line-height:1.4;
  }
  .submenu a::after{content:none;}
  .submenu a:last-child{border-bottom:none;}
  .submenu a:hover{background:#ffffff;color:var(--red);padding-right:22px;}
  .submenu a.current{color:var(--red);}
  nav a.current{color:#000;}

  .burger{
    display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;
  }
  .burger span{width:22px;height:2px;background:var(--graphite);display:block;}

  .mobile-nav{
    display:none;flex-direction:column;background:var(--white);
    position:fixed;top:var(--header-h, 70px);left:0;right:0;bottom:0;
    z-index:49;padding:16px 24px 24px;overflow-y:auto;
    font-size:16px;
  }
  .mobile-nav.open{display:flex;}
  .mobile-nav a{
    font-family:'Raleway',Arial,sans-serif;
    padding:0.8125em 0;font-size:1.0625em;font-weight:500;border-bottom:1px solid var(--border);
    text-transform:uppercase;letter-spacing:0.03em;
  }
  .mobile-sub{padding:0.375em 0 0.375em 0.875em;background:#FAFAF9;border-left:2px solid var(--border);margin-bottom:0.375em;}
  .mobile-sub a{
    display:block;width:100%;
    font-family:'Raleway',Arial,sans-serif;
    text-transform:none;font-weight:500;font-size:0.9375em;padding:0.6875em 0;color:var(--gray-text);
    border-bottom:1px solid rgba(0,0,0,0.06);line-height:1.4;
  }
  .mobile-sub a:last-child{border-bottom:none;}

  @media(min-width:900px){
    nav{display:block;}
    .burger{display:none;}
  }

  /* ===== Banner de título de página interna ===== */
  /* Mismo patrón que usaba el sitio original: fondo oscuro (o imagen propia de cada página, agregada inline), título grande, línea roja debajo */
  /* Si la página tiene imagen de fondo propia (como Nosotros, Zoho CRM), agregarla vía style inline en el <section class="page-banner">:
     style="background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('...');"
     La capa negra semitransparente (rgba(0,0,0,0.5)) es SIEMPRE necesaria sobre fotos para que el título blanco se lea bien. */
  .page-banner{
    background:var(--graphite);text-align:center;padding:44px 24px 36px;background-size:cover;background-position:center;
  }
  .page-banner h1{
    font-family:'Century Gothic','Century Gothic MT',Arial,sans-serif;
    color:#fff;font-weight:400;
    font-size:clamp(36px,6vw,60px);margin-bottom:16px;
  }
  .page-banner .rule{
    width:48px;height:3px;background:var(--red);margin:0 auto;
  }

  /* ===== Contenido genérico (ajustar por página) ===== */
  .page-content{
    max-width:1100px;margin:0 auto;padding:64px 24px;
  }
  .page-content p{font-size:19px;margin-bottom:20px;color:var(--graphite);}
  .page-content h2{font-size:19px;margin:40px 0 18px;}
  /* Subtítulo destacado opcional, para usar debajo del banner (ej: frase de apertura grande antes del cuerpo de texto) */
  .page-content .subtitle{
    font-family:Arial,sans-serif;font-size:clamp(22px,2.6vw,30px);font-weight:400;
    text-align:center;color:var(--graphite);line-height:1.4;margin-bottom:40px;
  }

  /* ===== Subsecciones de página de producto/servicio (títulos, filas texto+imagen, acordeón, lista, carousel) =====
     Usar cuando una página tenga varias subsecciones con imágenes, como las páginas de producto (Zoho CRM, Qlik Sense, RapidMiner) */
  .product-row{
    display:grid;grid-template-columns:1fr;gap:36px;align-items:center;margin-top:10px;margin-bottom:64px;
  }
  @media(min-width:800px){
    .product-row{grid-template-columns:1fr 1fr;}
    .product-row.reverse .product-row-text{order:2;}
    .product-row.reverse .product-row-img{order:1;}
  }
  .product-row-img img{border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.1);}
  .product-row-text p{font-size:18px;color:var(--graphite);margin-bottom:14px;}
  .text-row{
    display:grid;grid-template-columns:1fr;gap:24px;margin:64px 0 0;
  }
  @media(min-width:800px){.text-row{grid-template-columns:1fr 1fr;}}
  .text-row p{font-size:18px;color:var(--graphite);}
  /* Título de subsección en mayúscula: más espacio ANTES (separación del bloque anterior) que DESPUÉS (queda pegado al texto que introduce) */
  .section-heading{
    font-family:'Helvetica Neue',arial,sans-serif;font-weight:700;text-transform:uppercase;
    font-size:19px;color:var(--graphite);margin:80px 0 10px;letter-spacing:0.02em;
  }
  .feature-list{list-style:none;margin:28px 0;padding:0;}
  .feature-list li{
    padding:14px 0 14px 32px;position:relative;font-size:18px;border-bottom:1px solid var(--border);
  }
  .feature-list li:last-child{border-bottom:none;}
  .feature-list li:before{
    content:'';position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--red);
  }
  /* Acordeón "Saber más": sin margen arriba (queda pegado al párrafo anterior), color de texto gris #666 (no negro) */
  .accordion{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 0 48px;}
  .accordion summary{
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    padding:18px 4px;font-weight:700;font-size:19px;font-family:Arial,sans-serif;color:#666666;list-style:none;
  }
  .accordion summary::-webkit-details-marker{display:none;}
  .accordion summary .plus{font-size:22px;color:var(--gray-text);transition:transform .2s;}
  .accordion[open] summary .plus{transform:rotate(45deg);}
  .accordion .accordion-body{padding:8px 4px 28px;font-size:18px;color:var(--graphite);}
  .accordion .accordion-body p{margin-bottom:20px;}
  .accordion .accordion-body .section-heading{margin:56px 0 10px;}
  .product-video{width:100%;border-radius:12px;margin:32px 0 8px;box-shadow:0 8px 30px rgba(0,0,0,0.1);}
  .video-caption{text-align:center;font-size:14px;color:var(--gray-text);margin-bottom:32px;}
  /* Carousel de imágenes tipo slide (una imagen a la vez, flechas + dots). Fondo blanco con object-fit:contain
     para que las capturas de producto no se recorten ni queden con barras negras. Ver equipate-zoho-crm.html
     para el JS de referencia (goTo/dots/autoplay). */
  .img-carousel{
    position:relative;border-radius:12px;overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,0.1);background:#fff;border:1px solid var(--border);
    height:320px;
  }
  .img-carousel .carousel-track{display:flex;height:100%;transition:transform .4s ease;}
  .img-carousel .carousel-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;background:#fff;display:block;}
  .img-carousel .carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    background:#fff;border:1px solid var(--border);color:var(--graphite);
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:16px;z-index:2;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
  }
  .img-carousel .carousel-prev{left:10px;}
  .img-carousel .carousel-next{right:10px;}
  .img-carousel .carousel-dots{
    position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2;
  }
  .img-carousel .carousel-dots button{
    width:7px;height:7px;border-radius:50%;background:rgba(31,35,40,0.2);border:none;cursor:pointer;padding:0;
  }
  .img-carousel .carousel-dots button.active{background:var(--red);width:18px;border-radius:4px;transition:width .2s;}

  /* ===== CTA reutilizable (mismo estilo que "Contactanos" de la home) ===== */
  .cta-block{text-align:center;padding:24px 24px 56px;}
  .cta-block a{
    display:inline-block;background:var(--green);color:#fff;font-weight:700;
    font-family:'Raleway',Arial,sans-serif;letter-spacing:0.03em;
    font-size:17px;padding:15px 36px;text-transform:uppercase;border-radius:8px;
  }
  .cta-block a:hover{background:var(--green-dark);}

  /* ===== Products strip (igual que en home) ===== */
  .products-strip{background:var(--sky);padding:32px 24px;text-align:center;}
  .products-strip .links{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;align-items:center;}
  .products-strip .links a{font-family:'Raleway',Arial,sans-serif;font-weight:500;font-size:18px;letter-spacing:0.02em;color:var(--graphite);}
  .products-strip .links a:hover{color:var(--red);}

  /* ===== Footer (idéntico en todas las páginas) ===== */
  footer{background:var(--graphite);color:#B8BCC2;padding:48px 24px 24px;}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:32px;max-width:1200px;margin:0 auto;}
  @media(min-width:720px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;}}
  .footer-logo-mark{font-family:'Open Sans',sans-serif;font-weight:600;color:#fff;font-size:22px;margin-bottom:8px;}
  .footer-grid h4{font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;text-transform:none;letter-spacing:0;color:#B6B6B3;background:transparent;margin-bottom:14px;font-weight:400;}
  .footer-grid a{font-family:'Helvetica Neue',Arial,sans-serif;display:block;font-size:14px;padding:6px 0;color:#C6CAD0;}
  .footer-grid a:hover{color:var(--green);}
  .footer-bottom{max-width:1200px;margin:32px auto 0;padding-top:20px;border-top:1px solid #33383F;font-size:13px;color:#6E737B;text-align:center;}