/* Public site · DERMO CLÍNICA (premium template 02, docs/design/plantillas/02-dermo-clinica): clinic of one dermatologist.
   Loaded after public-site-premium-urbana.css: the shared blocks (.pu-*: booking, my appointment, events, map) take this
   template's values through the --pu-* tokens below; its own blocks are .dc-*. Every token lives in the :root block; the
   only per-center value is the brand colour (TenantTheme: --brand…, AA-adjusted). Mobile first (390 px), then 720 / 1024 /
   1180 px. Fonts: Cormorant Garamond + Manrope, self-hosted OFL woff2. Reading text >= 16 px, touch targets >= 44 px. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Design tokens ---- */
:root[data-template="dermo-clinica"]{
  --pu-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --pu-font-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --pu-heading:#231D1A;
  --pu-ink-strong:#231D1A;
  --pu-ink-lead:#2A2421;
  --pu-ink:#2A2421;
  --pu-ink-2:#5F5550;
  --pu-ink-3:#4A413C;
  --pu-line:#EAE2DA;
  --pu-line-2:#D6CBC0;
  --pu-pill:#EFE7DE;
  --pu-bg:#FBF8F5;
  --pu-bg-hero:#F3EEE8;
  --pu-veil:#F3EEE8;
  --pu-bg-booking:#F3EEE8;
  --pu-bg-articles:#F6F1EC;
  --pu-bg-reviews:#F6F1EC;
  --pu-bg-values:#F6F1EC;
  --pu-star:#C98A1A;
  --pu-accent:var(--brand);
  --pu-on-accent:var(--on-brand);
  --pu-accent-text:var(--brand-text);
  --pu-accent-strong:var(--brand-strong);
  --pu-icon-bg:var(--brand-soft);
  --pu-mark-leaf:#FFFFFF;
  --pu-focus:var(--brand-strong);
  --pu-radius-btn:999px;
  --pu-radius-card:10px;
  --pu-radius-lg:12px;
  --pu-radius-pill:999px;
  --pu-max:1240px;
  --pu-gutter:16px;
  --pu-shadow:0 6px 24px rgba(35,29,26,.08);
  --dc-bg-about:#F2ECE4;
  --dc-surface:#FFFFFF;
  --dc-circle:#EADFD4;
  --dc-map-bg:#ECE6DE;
  --dc-map-road:#FFFFFF;
  --dc-footer:#F2ECE4;
  /* Base tokens of public-pharmacy.css (booking internals) mapped to this design. */
  --paper:var(--pu-bg);
  --ink:var(--pu-ink);
  --muted:var(--pu-ink-2);
  --line:var(--pu-line);
  --font-body:var(--pu-font-body);
  --font-display:var(--pu-font-display);
  --site-button-radius:var(--pu-radius-btn);
  --site-radius-scale:.6;
}
@media (min-width:720px){:root[data-template="dermo-clinica"]{--pu-gutter:32px}}

/* ---- Base ---- */
body.dc{font-size:17px;line-height:1.6}
.dc .pu-intro,.dc .pu-muted{font-size:16px}
/* Shared premium pieces at this template's minimums (labels >= 14 px). */
.dc .pu-pill,.dc .pu-pill-sm{font-size:14px}
.dc .pu-map-note{font-size:14px}
.dc .pu-steps li span{width:28px;height:28px;font-size:14px}
.dc .pu-btn{font-size:16px}
.dc-btn-pill{border-radius:999px;padding:12px 24px}
.dc-btn-ghost{background:transparent;color:var(--pu-ink-strong);border-color:var(--pu-ink-strong)}
.dc-btn-ghost:hover{background:var(--dc-surface)}
.dc-eyebrow{display:block;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pu-ink-3)}
.dc-h1{margin:0;font:500 clamp(40px,5vw,58px)/1.06 var(--pu-font-display);color:var(--pu-heading);text-wrap:balance}
.dc-h2{margin:0;font:500 clamp(32px,4vw,44px)/1.1 var(--pu-font-display);color:var(--pu-heading);text-wrap:balance}
.dc-h2-sm{font-size:clamp(28px,3vw,34px)}
.dc-h3{margin:0;font:700 18px/1.3 var(--pu-font-body);color:var(--pu-heading)}
.dc-h3 a{color:inherit;text-decoration:none}
.dc-h3 a:hover{text-decoration:underline}
.dc-lead{margin:0;font-size:18px;color:var(--pu-ink-lead);max-width:34em}
.dc-intro{margin:0;color:var(--pu-ink-2);font-size:16px;max-width:38em}
.dc-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:16px;color:var(--pu-ink-strong);text-decoration:none}
.dc-more:hover{text-decoration:underline}
.dc-section{padding:48px 0}
.dc-head{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}

/* ---- Header ---- */
.dc-header{background:var(--pu-bg)}
.dc-wordmark{display:flex;flex-direction:column;gap:2px;margin-right:auto;text-decoration:none;min-width:0}
.dc-wordmark-name{font:500 22px/1.1 var(--pu-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--pu-ink-strong);overflow-wrap:anywhere}
.dc-wordmark-motto{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--pu-ink-3)}
.dc-header .pu-tools .dc-btn-pill{display:none}

/* ---- Hero ---- */
.dc-hero{background:var(--pu-bg-hero);overflow:hidden}
.dc-hero-grid{display:flex;flex-direction:column-reverse}
.dc-hero-copy{display:flex;flex-direction:column;gap:18px;padding:28px 0 40px}
.dc-hero-media{margin:0 calc(var(--pu-gutter) * -1)}
.dc-hero-media img{display:block;width:100%;height:320px;object-fit:cover;object-position:50% 20%}
.dc .dc-hero .pu-actions .pu-btn{flex:1 1 100%}
.dc-trust{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.dc-trust li,.dc-credentials li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--pu-ink)}
.dc-trust-icon{flex:none;display:inline-flex;color:var(--pu-ink-strong)}

/* ---- Cards (areas, treatments) ---- */
.dc-grid4,.dc-grid3{display:grid;grid-template-columns:1fr;gap:28px}
.dc-card{display:flex;flex-direction:column;gap:10px}
.dc-card p{margin:0;color:var(--pu-ink-2);font-size:16px}
.dc-card-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pu-radius-card);margin-bottom:6px}
.dc-card-img-wide{aspect-ratio:16/9}

/* ---- About ---- */
.dc-about{background:var(--dc-bg-about);padding:48px 0}
.dc-about-grid{display:grid;gap:28px;align-items:center}
.dc-about-img{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:var(--pu-radius-card)}
.dc-about-copy{display:flex;flex-direction:column;gap:16px}
.dc-about-copy p{margin:0;font-size:17px;color:var(--pu-ink)}
.dc-about-copy .pu-btn{align-self:flex-start}
.dc-credentials{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:16px}
.dc-credentials li span{display:flex;flex-direction:column;font-size:15px;color:var(--pu-ink-2)}
.dc-credentials li strong{font-size:16px;color:var(--pu-ink-strong)}

/* ---- Pathologies: circles, horizontal scroll with snap ---- */
.dc-circles{list-style:none;margin:0;padding:4px 0 12px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dc-circles li{flex:0 0 104px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dc-circles img,.dc-circle-initial{width:96px;height:96px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--dc-circle);font:500 34px/1 var(--pu-font-display);color:var(--pu-ink-strong)}
.dc-circle-label{font-size:15px;line-height:1.3;color:var(--pu-ink)}
.dc-circles:focus-visible{outline:3px solid var(--pu-focus);outline-offset:4px}

/* ---- Testimonial ---- */
.dc-testimonial{position:relative;background:var(--pu-bg-hero);overflow:hidden;padding:48px 0}
.dc-testimonial-bg{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.dc-testimonial.has-image::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(243,238,232,.95) 0%,rgba(243,238,232,.92) 100%)}
.dc-testimonial-grid{position:relative;z-index:2;display:grid;gap:28px;align-items:center}
.dc-testimonial-copy{display:flex;flex-direction:column;gap:16px;max-width:30em}
.dc-testimonial-copy p{margin:0;font-size:17px}
.dc-testimonial-copy .pu-btn{align-self:flex-start}
.dc-quotes{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory}
.dc-quote{flex:0 0 min(100%,380px);scroll-snap-align:start;margin:0;background:var(--dc-surface);border-radius:var(--pu-radius-lg);padding:24px;box-shadow:var(--pu-shadow);display:flex;flex-direction:column;gap:12px}
.dc-quote blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--pu-ink)}
.dc-quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--pu-ink-2)}
.dc-quote figcaption strong{color:var(--pu-ink-strong);font-size:16px}
.dc-quote figcaption a{display:inline-flex;align-items:center;min-height:44px}

/* ---- Technology ---- */
.dc-tech{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 16px}
.dc-tech li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:16px;color:var(--pu-ink)}
.dc-tech-icon{display:inline-flex;color:var(--pu-ink-strong)}

/* ---- Contact ---- */
.dc-contact-grid{display:grid;gap:24px}
.dc-contact-info{display:flex;flex-direction:column;gap:16px}
.dc-contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dc-contact-list li{display:flex;gap:12px;font-size:16px;color:var(--pu-ink)}
.dc-contact-list svg{flex:none;margin-top:3px;color:var(--pu-ink-strong)}
.dc-contact-list a{color:var(--pu-ink);min-height:44px;display:inline-flex;align-items:center;margin-top:-10px}
.dc-contact-info .pu-btn{align-self:flex-start}
.dc-contact-photo{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--pu-radius-card)}
.dc-map{border-radius:var(--pu-radius-card);min-height:240px}

/* ---- Blog ---- */
.dc-post{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.dc-post img{width:96px;height:96px;object-fit:cover;border-radius:var(--pu-radius-card)}
.dc-post p{margin:6px 0 0;font-size:16px;color:var(--pu-ink-2)}
.dc-post-meta{display:block;font-size:14px;color:var(--pu-ink-2);margin-bottom:4px}

/* ---- Footer ---- */
.dc-footer{background:var(--dc-footer);padding:40px 0 calc(28px + env(safe-area-inset-bottom));margin-top:24px}
.dc-footer-top{display:grid;gap:24px}
.dc-footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.dc-footer-links a{min-height:44px;display:flex;align-items:center;color:var(--pu-ink);text-decoration:none;font-size:16px}
.dc-footer-links a:hover{text-decoration:underline}
.dc-footer-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.dc-footer .pu-social a{color:var(--pu-ink-strong)}
.dc-footer .pu-legal-data{color:var(--pu-ink-2);font-size:14px;margin:20px 0 0}
.dc-copy{margin:12px 0 0;font-size:14px;color:var(--pu-ink-2)}
.dc .pu-mobile-bar{padding-bottom:env(safe-area-inset-bottom)}

/* ---- 720 px ---- */
@media (min-width:720px){
  .dc-section,.dc-about,.dc-testimonial{padding:64px 0}
  .dc-grid4{grid-template-columns:repeat(2,1fr)}
  .dc-grid3{grid-template-columns:repeat(3,1fr)}
  .dc .dc-hero .pu-actions .pu-btn{flex:0 0 auto}
  .dc-trust{grid-template-columns:repeat(3,1fr)}
  .dc-credentials{grid-template-columns:repeat(3,1fr)}
  .dc-tech{grid-template-columns:repeat(3,1fr)}
  .dc-head-split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:32px}
  .dc-contact-grid{grid-template-columns:1fr 1fr}
  .dc-footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- 1024 px ---- */
@media (min-width:1024px){
  .dc-header .pu-tools .dc-btn-pill{display:inline-flex}
  .dc-hero-grid{flex-direction:row;align-items:stretch;min-height:520px}
  .dc-hero-copy{flex:1 1 55%;padding:56px 32px 56px 0;justify-content:center}
  .dc-hero-media{flex:1 1 45%;margin:0 calc(var(--pu-gutter) * -1) 0 0}
  .dc-hero-media img{height:100%;min-height:520px}
  .dc-grid4{grid-template-columns:repeat(4,1fr)}
  .dc-about-grid{grid-template-columns:5fr 6fr;gap:56px}
  .dc-circles{justify-content:space-between;overflow-x:visible;flex-wrap:wrap}
  .dc-testimonial-grid{grid-template-columns:1.2fr 1fr}
  /* Wide screens: the photo shows on the right, the copy keeps an opaque veil (AA contrast). */
  .dc-testimonial.has-image::before{background:linear-gradient(90deg,var(--pu-bg-hero) 0%,var(--pu-bg-hero) 45%,rgba(243,238,232,0) 62%)}
  .dc-testimonial-bg{left:auto;width:55%;object-position:50% 30%}
  .dc-testimonial-copy{max-width:min(30em,40vw)}
  .dc-quotes{justify-content:flex-end}
  .dc-tech{grid-template-columns:repeat(6,1fr)}
  .dc-contact-grid{grid-template-columns:1fr 1.5fr 1.1fr;align-items:stretch}
  .dc-contact-photo{height:100%;min-height:280px;aspect-ratio:auto}
  .dc-footer-top{grid-template-columns:1.2fr 2fr auto;align-items:start}
}

/* ---- 1180 px ---- */
@media (min-width:1180px){
  .dc-hero-copy{padding-right:64px}
}

@media (prefers-reduced-motion:reduce){.dc *{scroll-behavior:auto!important}}

/* Test centers (PublicSiteSeo::isTestCenter): discreet "Web de ejemplo" strip above the header. */
.dc-demo-note{margin:0;padding:6px 16px;background:var(--dc-bg-about);color:var(--pu-ink-strong);font-size:14px;line-height:1.4;text-align:center}

/* Team (Mi web → Equipo) in the place of «Sobre mí» (#equipo). */
.dc-team-list{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.dc-team-member{display:flex;flex-direction:column;gap:4px;font-size:16px}
.dc-team-member strong{font-size:17px}
.dc-team-member span{font-size:15px;color:var(--pu-ink-2)}
.dc-team-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.dc-team-initial{display:grid;place-items:center;width:100%;aspect-ratio:4/5;border-radius:20px;background:var(--pu-icon-bg);color:var(--pu-heading);font-size:40px;font-weight:600}