:root{
    --green:#4ADE80;
    --green-dark:#22C55E;
    --cyan:#5BC6E8;
    --dark:#1E1E1E;
    --text:#111111;
    --text-muted:#4B5563;
    --placeholder:#D9D9D9;
    --max-width:1400px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  body{
    font-family:'Montserrat', sans-serif;
    color:var(--text);
    background:#e2e2e2;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }

  a{ text-decoration:none; color:inherit; }

  .wrapper{
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 40px;
  }

  /* ===== HEADER ===== */
  header{
    background:#ffffff;
    padding:22px 40px;
  }
 
  header .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--max-width);
    margin:0 auto;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:22px;
    letter-spacing:-0.02em;
  }

  .logo .logo-icon{
    width: 320px;
    height: auto;
    flex-shrink:0;
  }

  .whatsapp-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--cyan);
    color:#fff;
    font-weight:700;
    font-size:20px;
    padding:12px 22px;
    border-radius:30px;
    border:none;
    cursor:pointer;
    white-space:nowrap;
  }

  .whatsapp-btn svg{ width:25px; height:25px; }

  /* ===== PROMO BANNER ===== */
  .promo-banner{
    background:var(--green);
    text-align:center;
    padding:14px 20px;
    font-weight:700;
    font-size:25px;
    color:#0d3b1e;
  }

  /* ===== HERO ===== */
  .hero{
    padding:80px 40px 60px;
    max-width:var(--max-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:24px;
  }

  .hero-content{
    flex-shrink:0;
  }

  .hero h1{
    font-size:48px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.02em;
    margin-bottom:24px;
  }

  .hero p{
    font-size:18px;
    color:var(--text-muted);
    line-height:1.6;
    margin-bottom:32px;
    max-width:480px;
  }

  .cta-btn{
    display:inline-block;
    background:var(--green);
    color:#0d3b1e;
    font-weight:700;
    font-size:16px;
    padding:18px 36px;
    border-radius:30px;
    border:none;
    cursor:pointer;
    margin-bottom:16px;
  }

  .hero-note{
    font-size:13px;
    color:var(--text-muted);
  }

  /* Columna derecha del hero: imagen */
  .hero-visual{
    flex:1;
    display:flex;
    min-width:0;
  }

  .hero-image{
    width:100%;
    aspect-ratio:4/3;
    border-radius:16px;
    overflow:hidden;
  }
  .hero-image img{ width:100%; height:100%; object-fit:cover; }

  /* ===== PROBLEM SECTION ===== */
  .problem-section{
    padding:60px 40px 80px;
    max-width:var(--max-width);
    margin:0 auto;
  }

  .problem-section h2{
    font-size:26px;
    font-weight:800;
    margin-bottom:28px;
  }

  .problem-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }

  .problem-card{
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    height:100%;
  }

  .problem-card-image{
    width:100%;
    aspect-ratio:4/3;
    background:var(--placeholder);
    /* Reemplaza el background por: <img src="tu-imagen.jpg"> dentro de este div */
  }
  .problem-card-image img{ width:100%; height:100%; object-fit:cover; }

  .problem-card-body{
    padding:20px 20px 24px;
    flex:1;
    display:flex;
    flex-direction:column;
  }

  .problem-card-body h3{
    font-size:17px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:10px;
  }

  .problem-card-body p{
    font-size:14px;
    color:var(--text-muted);
    line-height:1.55;
  }

  /* ===== WORKSHOP SECTION ===== */
  .workshop-section{
    padding:40px 40px 100px;
    max-width:var(--max-width);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:60px;
    align-items:start;
  }

  .workshop-gallery-main{
    width:100%;
    aspect-ratio:508/480;
    background:var(--placeholder);
    border-radius:16px;
    overflow:hidden;
    margin-bottom:16px;
  }
  .workshop-gallery-main img{ width:100%; height:100%; object-fit:cover; }

  .workshop-gallery-sub{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:16px;
  }

  .workshop-gallery-sub div{
    aspect-ratio:1/1;
    background:var(--placeholder);
    border-radius:16px;
    overflow:hidden;
  }
  .workshop-gallery-sub img{ width:100%; height:100%; object-fit:cover; }

  .workshop-info h2{
    font-size:34px;
    font-weight:800;
    margin-bottom:18px;
    letter-spacing:-0.01em;
  }

  .workshop-info p{
    font-size:16px;
    color:var(--text-muted);
    line-height:1.6;
    margin-bottom:28px;
    max-width:440px;
  }

  .workshop-info .workshop-photo{
    width:100%;
    aspect-ratio:485/500;
    background: transparent;
    border-radius:16px;
    overflow:hidden;
  }
  .workshop-info .workshop-photo iframe{
    width:100%;
    height:100%;
    border:0;
    border-radius:16px;
    display:block;
  }

  /* ===== FEATURES ===== */
  .features-section{
    padding:60px 40px 90px;
    max-width:var(--max-width);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:40px;
    border-top:1px solid var(--dark);
  }

  .feature-item .feature-icon{
    width:34px;
    height:34px;
    margin-bottom:22px;
    color:var(--text);
  }
  .feature-icon svg{ width:100%; height:100%; }

  .feature-item h3{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
  }

  .feature-item p{
    font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
  }

  /* ===== FOOTER ===== */
  footer{
    background:var(--dark);
    color:#fff;
    padding:32px 40px;
  }

  .footer-inner{
    max-width:var(--max-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:20px;
  }

  .footer-logo .logo-icon{
    width:277px;
    height:auto;
  }

  .footer-socials{
    display:flex;
    gap:18px;
  }

  .footer-socials a{
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid var(--green);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--green);
  }
  .footer-socials svg{ width:16px; height:16px; }

  /* ===== RESPONSIVE =====
     Todo lo de acá abajo son SOLO ajustes para pantallas chicas.
     No se tocó ninguna regla de las de arriba (desktop). */

  /* Tablets y notebooks chicos */
  @media (max-width: 960px){
    .hero{ align-items:center; justify-content:center; gap:24px; }
    .hero-content{ flex:1; max-width:38%; }
    .hero-visual{ flex:1; max-width:62%; width:auto; }

    .workshop-section{ grid-template-columns:1fr; }
    /* "Conoce nuestro taller" (texto + mapa) primero, imágenes abajo */
    .workshop-gallery{ order:2; }
    .workshop-info{ order:1; }

    .features-section{ grid-template-columns:repeat(2, 1fr); }
    .problem-grid{ grid-template-columns:repeat(2, 1fr); }
    .hero h1{ font-size:36px; }
    .hero-break{ display:none; }
    .logo .logo-icon{ width:260px; }
    .footer-logo .logo-icon{ width:230px; }
  }

  /* Celulares (horizontal grande / tablets chicas) */
  @media (max-width: 768px){
    header{ padding:16px 20px; }
    header .header-inner{ flex-wrap:wrap; justify-content:center; gap:14px; text-align:center; }
    .logo{ justify-content:center; width:100%; }
    .logo .logo-icon{ width:220px; }
    .whatsapp-btn{ font-size:15px; padding:10px 18px; }
    .whatsapp-btn svg{ width:18px; height:18px; }
    .promo-banner{ font-size:15px; padding:12px 16px; }

    .wrapper, .hero, .problem-section, .workshop-section, .features-section{
      padding-left:24px;
      padding-right:24px;
    }

    .hero{ padding-top:48px; padding-bottom:40px; gap:20px; }
    .hero h1{ font-size:22px; }
    .hero p{ font-size:13px; margin-bottom:16px; }
    .hero-note{ font-size:11px; }
    .cta-btn{ font-size:12px; padding:10px 18px; margin-bottom:10px; }

    .problem-section{ padding-top:40px; padding-bottom:56px; }
    .problem-section h2{ font-size:22px; }

    .workshop-section{ gap:32px; padding-top:24px; padding-bottom:64px; }
    .workshop-gallery-sub{ gap:12px; }

    .features-section{ padding-top:40px; padding-bottom:56px; gap:32px; }

    .footer-inner{ flex-direction:column; gap:20px; text-align:center; }
    .footer-logo{ justify-content:center; }
    .footer-logo .logo-icon{ width:200px; }
  }

  /* Celulares medianos */
  @media (max-width: 600px){
    header{ padding:14px 16px; }
    .logo .logo-icon{ width:190px; }
    .whatsapp-btn{ font-size:13px; padding:9px 16px; }
    .whatsapp-btn svg{ width:16px; height:16px; }
    .whatsapp-btn span{ display:inline; }

    .promo-banner{ font-size:13px; padding:10px 14px; }

    .wrapper, .hero, .problem-section, .workshop-section, .features-section{
      padding-left:18px;
      padding-right:18px;
    }

    .hero{ padding-top:36px; gap:14px; }
    .hero h1{ font-size:18px; margin-bottom:10px; }
    .hero p{ font-size:11px; margin-bottom:12px; }
    .hero-note{ font-size:10px; }
    .cta-btn{ font-size:11px; padding:9px 16px; margin-bottom:8px; }

    .problem-grid{ gap:14px; }
    .problem-card-body{ padding:14px 14px 18px; }
    .problem-card-body h3{ font-size:15px; }
    .problem-card-body p{ font-size:13px; }

    .workshop-info h2{ font-size:24px; }
    .workshop-info p{ font-size:14px; max-width:100%; }

    .features-section{ grid-template-columns:1fr; gap:28px; }

    .footer-logo .logo-icon{ width:170px; }
    .footer-socials{ gap:14px; }
  }

  /* Celulares chicos */
  @media (max-width: 400px){
    .logo .logo-icon{ width:160px; }
    .footer-logo .logo-icon{ width:150px; }
    .whatsapp-btn{ font-size:12px; padding:8px 14px; }

    .hero{ gap:10px; }
    .hero h1{ font-size:15px; }
    .hero p{ font-size:10px; }
    .cta-btn{ font-size:10px; padding:8px 14px; }

    .problem-grid{ grid-template-columns:1fr; }
  }