/*
Theme Name: Maca Mesias White Pastels
Theme URI: https://example.com/maca-mesias-white-pastels
Author: Maca Mesias
Author URI: https://example.com
Description: Un tema de WordPress basado en la plantilla HTML “Maca Mesias – Nutrición Consciente (White Pastels)”.  Este tema incluye un diseño limpio y minimalista con colores pastel, perfecto para sitios de nutrición o estilo de vida saludable.  El CSS se ha extraído de la página original y se empaqueta aquí para que WordPress lo gestione correctamente.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maca-mesias
Tags: pastel, minimalista, responsive, nutrición, personal
*/

/* Variables de color y estilo global extraídas del HTML original */
:root{
  /* PALETA PASTELES (White theme) */
  --bg:#ffffff;                 /* fondo blanco */
  --ink:#1b1f2a;                /* texto principal */
  --muted:#617085;              /* texto secundario */
  --card:#ffffffcc;             /* tarjetas translúcidas */
  --stroke:#e9eef6;             /* bordes sutiles */
  --shadow:0 10px 30px #1b1f2a12, inset 0 1px 0 #ffffff, 0 0 0 1px var(--stroke);
  --accent:#F8CDE1;             /* rosado pastel */
  --accent-2:#CDE6FF;           /* azul pastel */
  --accent-3:#C9F0E8;           /* turquesa pastel */
  --ok:#B6E2C8;                 /* verde suave */
  --warn:#FFE6BB;               /* durazno claro */
  --radius:24px;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background:
    /* sutiles manchas de color */
    radial-gradient(900px 600px at 10% -5%, var(--accent)20%, transparent 60%),
    radial-gradient(800px 500px at 110% 15%, var(--accent-2)24%, transparent 60%),
    radial-gradient(700px 500px at 30% 110%, var(--accent-3)22%, transparent 65%),
    /* líneas pasteles superpuestas */
    repeating-linear-gradient(  0deg, #0000 0 38px, #eaf2fb 38px 39px),
    repeating-linear-gradient( 90deg, #0000 0 38px, #eef7f4 38px 39px),
    linear-gradient(180deg, #fcfdff 0%, #ffffff 60%, #ffffff 100%);
  background-attachment: fixed;
}
a{color:inherit}
.container{max-width:var(--max); margin:auto; padding:0 20px}

header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:#ffffffb8;
  border-bottom:1px solid var(--stroke);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.logo{width:38px; height:38px; border-radius:12px; background:
  linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 6px 18px #2b2f3a1a, inset 0 1px 0 #ffffff90;
}
nav ul{list-style:none; display:flex; gap:10px; margin:0; padding:0}
nav a{padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--ink); border:1px solid transparent}
nav a:hover{border-color:var(--stroke); background:#f7fbff}

/* UTILIDADES */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--stroke)}
.badge{display:inline-flex; gap:8px; align-items:center; font-size:12px; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:#ffffffc8}
.pill{display:inline-flex; gap:8px; align-items:center; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:#ffffff}
.muted{color:var(--muted)}
.section-title{font-size:clamp(20px, 3.6vw, 32px); margin:0 0 16px; font-weight:800}

/* HERO */
.hero{padding:72px 0 32px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero .lead{font-size:clamp(28px, 5vw, 48px); font-weight:800; line-height:1.1; margin:18px 0}
.hero p{color:var(--muted); font-size:18px; max-width:64ch}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px; border:1px solid var(--stroke); text-decoration:none; transition:transform .08s ease, box-shadow .2s ease; background:#ffffff}
.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); color:#0e1520; font-weight:800; border-color:#e6edf6}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px #0b122012}
.btn .icon{width:18px; height:18px}

/* HIGHLIGHTS */
.highlights{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px}
.highlight{padding:18px; border-radius:18px; border:1px solid var(--stroke); background:#ffffffb8}
.highlight b{color:#0e1520}

/* SECTIONS */
section{padding:56px 0}

/* SERVICES */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.service{padding:20px; border-radius:18px; border:1px solid var(--stroke); background:#ffffff}
.service h3{margin:8px 0 8px}

/* PORTFOLIO */
.portfolio{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.shot{aspect-ratio: 4 / 3; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, #ffffff 0%, #f7fbff 100%); border:1px dashed var(--stroke); display:grid; place-items:center; color:var(--muted)}

/* TESTIMONIOS */
.testi{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.quote{padding:20px; border-radius:18px; border:1px solid var(--stroke); background:#ffffff; font-size:15px}

/* PLANES */
.plans{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.plan{padding:22px; border-radius:18px; border:1px solid var(--stroke); background:#ffffff}
.price{font-size:32px; font-weight:800; margin:10px 0}
.plan ul{margin:12px 0 0; padding-left:18px; color:var(--muted)}

/* CONTACTO */
.contact{display:grid; grid-template-columns:1fr .9fr; gap:18px}
form{display:grid; gap:12px}
label span{display:block; font-weight:600; margin-bottom:6px}
input, textarea{width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--stroke); background:#ffffff; color:var(--ink)}
input:focus, textarea:focus{outline:2px solid #cfe7ff; box-shadow:0 0 0 4px #cfe7ff55}
textarea{min-height:120px}

footer{padding:32px 0; border-top:1px solid var(--stroke); color:var(--muted)}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero-grid, .grid, .portfolio, .testi, .plans, .contact{grid-template-columns:1fr}
  .highlights{grid-template-columns:1fr;}
}