/*
    Theme Name: Cafeteria Web
    Theme URI: https://innovamos.com/cafeteria-web
    Author: Juan Pablo Misat
    Author URI: https://innovamos.com
    Description: Cafeteria theme for WordPress
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: cafeteria-web
*/

/* --- New API landing specific styles --- */
:root {
    --coffee-bg:#f8f5f0;
    --coffee-brown:#3e2c1c;
    --coffee-mid:#a67c52;
    --coffee-mid-alt:#c4945e;
    --coffee-accent:#d9b382;
    --coffee-accent-dark:#8a6135;
    --radius-sm:4px;
    --radius:10px;
    --shadow-sm:0 2px 4px rgba(0,0,0,.08);
    --shadow:0 4px 16px -2px rgba(62,44,28,.18);
    --grad-header:linear-gradient(135deg,#a67c52,#8a6135 60%,#5b3c25);
}

.api-landing body, body.api-landing {
    background: radial-gradient(circle at 20% 20%, #ffffff, var(--coffee-bg) 60%) fixed;
}

.site-header {
    background: var(--grad-header);
    padding: clamp(2rem,4vw,3.5rem) 1.5rem;
    color:#fff;
    box-shadow: var(--shadow);
}

.branding {display:flex;align-items:center;gap:1.25rem;justify-content:center;flex-wrap:wrap;}
.logo-icon {width:72px;height:72px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.35);border-radius:18px;backdrop-filter:blur(4px);}
.logo-icon svg{width:48px;height:48px;}
.site-title {margin:0;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.5px;}
.tagline {margin:.25rem 0 0;font-size:1rem;opacity:.9;}

.hero {background:transparent;box-shadow:none;max-width:1040px;padding:0 1.25rem;margin:2.5rem auto 3rem;}
.hero-intro {background:#fff;padding:2.25rem clamp(1.5rem,3.2vw,3rem);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.hero-intro:before {content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(166,124,82,.05) 0 10px,rgba(0,0,0,0) 10px 20px);pointer-events:none;}
.hero-intro h2 {margin-top:0;font-size:clamp(1.6rem,3.6vw,2.3rem);}
.hero-intro p {line-height:1.55;font-size:1.02rem;}

.cta-group {display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem;}
.btn {--btn-bg:var(--coffee-mid);--btn-color:#fff;--btn-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;padding:.85rem 1.35rem;border-radius:var(--radius-sm);text-decoration:none;background:var(--btn-bg);color:var(--btn-color);box-shadow:var(--btn-shadow);border:1px solid rgba(0,0,0,.08);position:relative;transition:.25s background,.25s transform,.25s box-shadow;}
.btn.primary {--btn-bg:linear-gradient(135deg,var(--coffee-mid),var(--coffee-accent-dark));}
.btn.ghost {--btn-bg:rgba(255,255,255,.15);--btn-color:#2b1c12;backdrop-filter:blur(4px);border:1px solid var(--coffee-mid);}
.btn:hover {transform:translateY(-3px);box-shadow:0 6px 18px -4px rgba(62,44,28,.35);}
.btn:active {transform:translateY(-1px);}
.btn:focus-visible {outline:3px solid #fff;outline-offset:2px;}

.section-title {font-size:1.35rem;margin:0 0 1rem;letter-spacing:.5px;display:flex;align-items:center;gap:.5rem;}

.api-highlights {margin:3rem 0 2.75rem;}
.pill-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.pill-grid li {background:#fff;padding:.95rem .95rem .95rem 1rem;border-radius:40px;display:flex;align-items:center;gap:.65rem;font-weight:500;box-shadow:var(--shadow-sm);border:1px solid #eadfd3;position:relative;}
.pill-grid .icon {width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:var(--coffee-mid);color:#fff;border-radius:50%;font-size:1.1rem;box-shadow:0 2px 4px rgba(0,0,0,.2);}

.endpoint-examples {margin:2.5rem 0;}
.endpoint-list {display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.endpoint-card {background:#fff;border:1px solid #e6dbcf;border-radius:var(--radius);padding:1.1rem 1rem 1.2rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.25s box-shadow,.25s transform;}
.endpoint-card:before {content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(166,124,82,.08),rgba(255,255,255,0));opacity:0;transition:.4s;}
.endpoint-card:hover {box-shadow:0 6px 18px -4px rgba(62,44,28,.25);transform:translateY(-4px);}
.endpoint-card:hover:before {opacity:1;}
.endpoint-card h4 {margin:.2rem 0 .4rem;font-size:1rem;font-weight:700;color:var(--coffee-accent-dark);}
.endpoint-card p {margin:.15rem 0 .65rem;font-size:.82rem;line-height:1.35;color:#553b29;}
.endpoint-card code {display:block;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;font-size:.7rem;background:#2b1c12;color:#ffe9d1;padding:.45rem .55rem;border-radius:6px;overflow-x:auto;}

.note {font-size:.75rem;color:#6a4b34;opacity:.9;margin-top:1rem;}

.dev-quickstart {margin:2.75rem 0 0;}
.code-block {display:block;background:#1e120b;color:#ffe9d1;font-size:.78rem;line-height:1.45;border-radius:8px;padding:1rem 1.1rem;overflow-x:auto;box-shadow:0 4px 14px -4px rgba(0,0,0,.55);}
.code-block::-webkit-scrollbar {height:8px;}
.code-block::-webkit-scrollbar-track {background:#3e2c1c;}
.code-block::-webkit-scrollbar-thumb {background:#8a6135;border-radius:4px;}

.site-footer {background:#3e2c1c;padding:2rem 1rem;margin-top:4rem;color:#fff;font-size:.85rem;position:relative;}
.site-footer p {margin:0;opacity:.9;}

/* Focus accessibility */
:focus-visible {outline:3px solid var(--coffee-accent-dark);outline-offset:2px;}

/* Subtle animated gradient border on hero intro */
.hero-intro {--border-size:2px;}
.hero-intro:after {content:'';position:absolute;inset:0;padding:var(--border-size);border-radius:calc(var(--radius) + var(--border-size));background:linear-gradient(125deg,#ffe9d1, #a67c52,#ffe9d1,#8a6135);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:borderShift 8s linear infinite;opacity:.65;pointer-events:none;}
@keyframes borderShift {0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}

/* Nueva sección autenticación */
.auth-info {margin:3rem 0 2rem;}
.auth-grid {display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.auth-card {background:#fff;border:1px solid #e6dbcf;border-radius:var(--radius);padding:1rem 1rem 1.1rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.auth-card h4 {margin:.1rem 0 .5rem;font-size:1rem;font-weight:600;color:var(--coffee-accent-dark);}
.auth-card p {margin:0 0 .75rem;font-size:.78rem;line-height:1.4;color:#553b29;}
.auth-card pre {margin:0 0 .25rem;}
.auth-card code {font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;font-size:.68rem;display:block;white-space:pre;overflow-x:auto;background:#1e120b;color:#ffe9d1;padding:.55rem .65rem;border-radius:6px;}

/* Responsive tweaks */
@media (max-width: 680px) {
  .endpoint-list {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
  .pill-grid {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
  .logo-icon {width:60px;height:60px;border-radius:14px;}
  .logo-icon svg {width:40px;height:40px;}
}

@media (prefers-reduced-motion: reduce) {
  .btn, .endpoint-card, .hero-intro:after {transition:none;animation:none;}
  .endpoint-card:hover {transform:none;}
}