:root{
  --bg: #ffffff;
  --muted: #6b7280;
  --accent: #000000; /* Principal accent color */
  --accent-dark: #ff6b6b; /* secondary accent (for emphasis if needed) */
  --text: #000000;
  --container: 1100px;
  --radius: 10px;
  --card: #f8fafc;
}

/* Load custom font from local fonts/ directory */
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe Light Italic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: bold;
  font-display: swap;
}
@font-face{
  font-family: 'Louis George Cafe';
  src: url('../fonts/Louis George Cafe Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'Garet-Heavy';
  src: url('../fonts/Garet-Heavy.ttf') format('truetype');
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Louis George Cafe', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

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

/* Site header inside hero */
.site-header{display:flex;align-items:center;justify-content:flex-end;padding:16px 20px;position:relative;z-index:2}
.site-header .btn-sm{padding:8px 16px;font-size:0.875rem}

.logo{font-family: 'Garet-Heavy', sans-serif;color:var(--text);text-decoration:none;font-size:1.125rem; margin-left:16px}
.logo-inverse{font-family: 'Garet-Heavy', sans-serif;color:white;text-decoration:none;font-size:1.5rem; padding-bottom:20px;}
.nav a{margin-left:12px}
.nav a:visited{color:var(--text)}


/*************************************************************************** /
/**             HERO                         ************************ *****/
/*************************************************************************** */
.hero{padding:0 0 100px 0;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;min-height:380px}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.25));pointer-events:none;z-index:0}
.hero-inner{display:flex;gap:28px;align-items:flex-end;position:relative;z-index:1;padding-top:80px}
.hero-text{flex:1;color:#fff}
.hero h1, .hero .lead{position:relative;z-index:1;text-shadow:0 6px 32px rgba(0,0,0,0.6)}
.hero h1{font-size:2.5rem;margin:0 0 40px; font-weight: 800;}
.hero .lead{color:rgba(255,255,255,0.94)}
.hero .accent{color:var(--accent-dark);font-weight:700}
.hero-text h1 .accent{color:var(--accent-dark);font-weight:800}

/* Stronger button styles on top of hero */
.hero .btn-primary{background:var(--accent);color:white;border-color:transparent}
.hero .btn-ghost{background:transparent;color:rgba(255,255,255,0.75);border-color:rgba(255,255,255,0.18)}
/* Use the hero image from imgs/hero.png (CSS path is relative to css/) */
.hero{background-image: url('../imgs/hero2.jpg')}
/* hide the placeholder SVG media to avoid visual conflict with the full-bleed image */
.hero-media{display:none}

.lead{color:var(--muted);margin:0 0 0px;font-size:1.125rem;font-weight:700}
.hero-ctas .btn{margin-right:12px}

.section{padding:40px 0}
.section-title{font-size:2rem;margin:0 0 18px;font-weight:800}




/*************************************************************************** /
/**             FAQ                         ************************ *****/
/*************************************************************************** */
.faq-section{padding-top:28px}
.faq-list{max-width:900px;margin:12px auto 0}
.faq-item{border-bottom:1px solid rgba(15,23,42,0.04);}
.faq-question{display:block;width:100%;text-align:left;padding:18px 12px;background:transparent;border:0;font-weight:700;font-size:1rem;cursor:pointer}
.faq-question:after{content:'+';float:right;font-size:1.125rem}
.faq-question[aria-expanded="true"]:after{content:'−'}
.faq-answer{padding:0 12px 18px;color:var(--muted)}




.table-wrap{overflow:auto}
.compare-table{width:100%;border-collapse:collapse;background:#fff;margin-top:12px}
.compare-table th,.compare-table td{padding:12px 14px;border:1px solid #eef2f7;text-align:left}
.compare-table th {background-color: #f9fafa;}
.compare-table thead th{font-weight:600}
.compare-table thead th:not(:first-child){background:black;color:white}
.compare-table thead th:first-child{background:transparent;color:var(--text)}
.compare-table .yes{color:var(--accent);font-weight:600}
.compare-table .price{font-weight:700}
.comparativa_example{display:block;font-size:0.9rem;color:var(--muted);margin-top:6px}
.table-footnote{font-size:0.7rem;color:var(--muted);margin-top:6px}

/* Highlight Tutoropo column (2nd column) subtly */
.compare-table thead th:nth-child(2){background:var(--accent);box-shadow:0 -4px 0 var(--accent-dark) inset}
.compare-table tbody td:nth-child(2){background:rgba(14,165,255,0.04);}
.compare-table tbody tr:last-child td:nth-child(2){border-bottom:2px solid var(--accent)}

/* Desktop/Mobile comparison toggle */
.compare-desktop{display:block}
.compare-mobile{display:none}

/* Mobile comparison cards */
.compare-card{background:var(--card);border-radius:12px;padding:0;margin-bottom:16px;box-shadow:0 4px 12px rgba(12,34,56,0.06);overflow:hidden}
.compare-card__header{padding:16px 18px;background:#f8fafc;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between}
.compare-card__header h3{margin:0;font-size:1.1rem;font-weight:700}
.compare-card__title{margin:0;font-size:1.3rem;font-weight:700;color:var(--text)}
.compare-card__badge{background:var(--accent-dark);color:#fff;padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600}
.compare-card__list{list-style:none;margin:0;padding:0}
.compare-card__item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 18px;border-bottom:1px solid #f1f5f9;gap:12px}
.compare-card__item:last-child{border-bottom:none}
.compare-card__label{font-weight:600;color:var(--text);flex:0 0 auto;min-width:90px}
.compare-card__value{color:var(--muted);text-align:right;flex:1}

/* Card item states */
.compare-card__item--yes .compare-card__label::before{content:'✓ ';color:#16a34a}
.compare-card__item--yes .compare-card__value{color:var(--text);font-weight:500}
.compare-card__item--no .compare-card__label::before{content:'✗ ';color:#dc2626}
.compare-card__item--partial .compare-card__label::before{content:'~ ';color:#f59e0b}

/* Featured card (Tutoropo) */
.compare-card--featured{border:2px solid var(--accent);box-shadow:0 8px 24px rgba(14,165,255,0.15)}
.compare-card--featured .compare-card__header{background:var(--accent);color:#fff}
.compare-card--featured .compare-card__header h3{color:#fff}
.compare-card--featured .compare-card__badge{background:#fff;color:var(--accent)}

@media (max-width:900px){
  .compare-desktop{display:none}
  .compare-mobile{display:block;margin-top:18px}
}

.subscribe-section{background:linear-gradient(90deg, rgba(14,165,255,0.06), rgba(255,107,107,0.03))}
.subscribe-inner{display:flex;gap:18px;align-items:center;padding:18px}
.subscribe-copy{flex:1}
.subscribe-form{display:flex;gap:8px;flex:0 0 420px;flex-wrap:wrap;align-items:center}
.subscribe-form input[type=email]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid #e6eef8;order:1}
.subscribe-form .btn{padding:10px 14px;order:2}
.subscribe-accept{order:3;flex-basis:100%}

/* checkbox inside subscribe forms */
.subscribe-accept{display:flex;align-items:center;gap:8px;margin-top:8px}
.subscribe-accept input[type="checkbox"]{width:18px;height:18px}
.subscribe-accept label{font-size:0.9rem;color:var(--muted)}
.subscribe-accept a{color:var(--accent);text-decoration:underline}

/* Convince / darker CTA block after comparison table */
.convince-section{background:#000;color:#fff;padding:28px;margin-top:20px}
.convince-inner{display:flex;align-items:center;gap:28px}
.convince-content{flex:1}
.convince-content .section-title{color:#fff}
.convince-list{list-style:none;padding:0;margin:12px 0 18px}
/* Odd items are statements (bold) without checkmark; even items are supporting answers with a checkmark */
.convince-list li{position:relative;padding-bottom:5px}
.convince-list li:nth-child(odd){font-weight:800;padding-left:0}
.convince-list li:nth-child(even){font-weight:400;padding-left:28px;padding-bottom:20px}
.convince-list li:nth-child(even):before{content:'✓';position:absolute;left:0;top:0;color:var(--accent-dark);font-weight:800}
.convince-visual{flex:0 0 260px;display:flex;justify-content:center}
.convince-visual img{max-width:100%;height:auto;border-radius:8px}
.convince-section .btn-primary{background:#fff;color:#002034;border-color:transparent}


@media (max-width:900px){
  .convince-inner{flex-direction:column;align-items:center;}
  .convince-visual{flex-basis:260px;margin-top:12px}
  .convince-section{padding:0;}

}

.site-footer{border-top:1px solid #eef2f7;padding:18px 0;margin-top:28px}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-nav a{margin-left:12px;color:var(--muted);text-decoration:none}

.btn{display:inline-block;text-decoration:none;border-radius:8px;padding:10px 14px;font-weight:600;border:1px solid transparent}
.btn-primary{background:var(--accent);color:white}
.btn-outline{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:8px 12px}
.btn-ghost{background:transparent;color:var(--text)}

.dark {background: var(--accent-dark); color: white;}

.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Responsive */
@media (max-width:900px){
  .hero{padding:0px 0;}
  .hero-inner{flex-direction:column-reverse;text-align:center;align-items:center;padding-top:40px}

  .hero-media{flex-basis:260px}
  .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.90), rgba(0,0,0,0.45));pointer-events:none;z-index:0}

  .lead{color:var(--muted);margin:0 0 12px;}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .subscribe-inner{flex-direction:column;align-items:stretch}
  .subscribe-form{flex:1}
  /* On mobile place the checkbox between the email input and the submit button */
  .subscribe-form .btn{order:3}
  .subscribe-accept{order:2;flex-basis:100%}
  .footer-inner{flex-direction:column;gap:8px;text-align:center}

  .section{padding-top: 20px;}
}

@media (max-width:560px){
  .features-grid{grid-template-columns:1fr}
  .hero{padding-bottom: 10px; min-height: 85vh; background-position: calc(50% - 100px) center;}
  .hero-inner{padding-top:20vh; margin-left: 12px; margin-right: 12px;}
  .hero h1{font-size:2rem; margin:0 0 15vh; font-weight: 800;}
  .section{padding-top: 0px;}
}




/*************************************************************************** /
/** CARACTERISTICAS    **********************************************/
/*************************************************************************** /


/* Feature rows: text + list with an accompanying visual */
.feature-row{display:flex;gap:28px;align-items:center;margin:40px 0}
.feature-row.reverse{flex-direction:row-reverse}
.feature-copy{flex:1}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{padding:12px 0;border-top:1px solid rgba(15,23,42,0.04)}
.feature-list li p{margin:6px 0 0;color:var(--muted)}

.feature-visual{flex:0 0 380px;display:flex;justify-content:center}
.feature-visual img{max-width:100%;height:auto;border-radius:12px;}

/* For the dedicated features page we want image to the right on desktop and below on mobile */
.feature-page .feature-row{display:flex;gap:28px;align-items:center}
.feature-page .feature-visual{flex:0 0 420px}

@media (max-width:900px){
  /* On mobile stack text then image (image below) */
  .feature-page .feature-row{flex-direction:column;align-items:center}
  .feature-page .feature-visual{flex-basis:260px;margin-top:12px}

  /* keep previous rules for other pages */
  /* On mobile ensure text appears first and the image is below for all feature rows */
  .feature-row{flex-direction:column}
  .feature-row.reverse{flex-direction:column;}
  .feature-visual{flex-basis:260px}
  .feature-list strong{color:var(--text);font-weight:600;  font-size:1.2rem;}
}

/* Feature CTA */ 

.feature-cta .btn{padding:8px 16px;font-size:0.8rem}
.grid{display:grid}
.features-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(12,34,56,0.04)}
.feature-icon{font-size:28px;margin-bottom:10px}








/*************************************************************************** /
/** PLANS ************************************************************/
/*************************************************************************** /
/* Plans styles (shared) */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 24px rgba(12,34,56,0.04)}
.card h3{margin:0 0 8px;font-size:1.5rem;font-weight:800;color:var(--accent-dark)}

.price{font-size:1.2rem;font-weight:800;margin:12px 0}
.features-list{margin-top:12px}
.features-list li{padding:8px 0;border-top:1px dashed rgba(12,34,56,0.03)}
.disclaimer-beta{font-size:0.9rem;color:var(--muted);margin-top:-6px;margin-bottom:12px;}
.btn-disabled{background:var(--muted);color:#fff;border-color:transparent;cursor:not-allowed;opacity:0.6;text-decoration:none;display:inline-block;padding:10px 14px;border-radius:8px;font-weight:600}

/* Featured pricing card */
.card.featured{border:2px solid var(--accent);box-shadow:0 18px 40px rgba(14,165,255,0.12);transform:translateY(-6px);position:relative}
.card.featured .price{color:var(--accent);}
.card .badge{position:absolute;top:-12px;right:-12px;background:var(--accent-dark);color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;box-shadow:0 6px 18px }

@media (max-width:900px){
  .card.featured{transform:none;margin-top:0}
  .card .badge{position:static;margin-bottom:12px}
}

@media (max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
}

.disclaimers-list{font-size:0.7rem;color:var(--muted)}